본문 바로가기

basic/CSS

(16)
font 색상 그라데이션 넣기 background: -webkit-linear-gradient(90deg,pink,orange); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
크기 키우기, 이동하기 transform transform: scale(1.2) // 배수 1.2배 transform: translate(100px) // 단위 px https://developer.mozilla.org/ko/docs/Web/CSS/transform
font태그 font: bold 14px/20px italic Times, serif; 순서 지켜야됨 / 앞의 14px은 font-size를 의미하고 / 뒤의 20px은 line-height 값을 의미한다.
웹접근성을 고려한 요소 숨김처리 방법 display: none은 화면에서 보이지 않지만 스크린리더가 읽어들이지 못하는 문제점이 있다. 그렇다면 비슷한 visible: hidden을 사용해야되는 것인가? 라고 생각할 수 있지만 hidden 또한 사용자에게 보이지 않게하는 의도를 가진 태그이기 때문에 읽지 못하는 스크린리더가 마찬가지로 존재한다고 한다. (국내는 읽을 수 있다는것 같다?... overflow: hidden은 국내외 모든 스크린 리더가 읽어들일 수 있다고 한다.) 따라서 위치를 화면 밖으로 보내버리는 등의 꼼수를 사용하면 된다. .hidden{ position: absolute; top: -9999px; opacity: 0; } .blind { position: absolute; clip: rect(0 0 0 0); width: ..
inline-block 버그 inline-block을 사용할 때 마진을 주지 않았음에도 서로 간격이 벌어져 있는 버그가 있다. 가장 쉬운 해결법은 부모요소에 font-size를 0으로 설정해주면 된다.
Transform http://tcpschool.com/css/css3_transform_2Dtransform 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com 2D 속성 값 설명 none 변형 속성을 적용하지 않음 matrix(n,n,n,n,n,n) translate, scale, rotate, skew 각 속성을 한꺼번에 적용할 수 있는 매트릭스 함수 translate(x,y) 요소의 위치를 옮기는 속성 scale(x,y) 요소의 크기를 비율에 맞춰 확대/축소하는 속성 rotate(angle) 요소를 지정된 각도 만큼 회전시키는 속성 skew (x-angle, y-angle) 요소를 지정된 각도만큼 모양을 비스듬히 변형시키는 속성 3..
텍스트 말줄임 ... 한줄 말 줄이기... display:block; overflow:hidden; text-overflow:ellipse; white-space:nowrap; //ellipse는 ... 효과를 만들어 주고 nowrap은 줄바꿈이 안되게 해준다 여러줄 말 줄이기... overflow:hidden; text-oveflow:ellipse; 까지는 똑같지만 크롬계열 브라우저에서는 display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:줄 수; IE를 위해서는 max-height값을 설정해준다. 값은 line-height X 줄수 table에 적용한 예시 12345678910111213141516171819202122232425262728293031..
float 해제 하는법 1. float이 된 부모 요소에게 visible을 제외한 overflow를 부여하기(단, 이 부모 요소 안에 부모의 영역을 벗어나는 팝업과 같은 자식 콘텐츠가 있다면 그 팝업의 내용이 보이지 않는 현상이 일어난다.) 2. 가상요소를 이용해 clear속성 부여하기 부모요소에 가상선택자 after로 clear속성 부여하기{clear: both;display: block;content:"";} { https://www.boostcourse.org/web344/lecture/47666?isDesc=false 웹 UI 개발 부스트코스 무료 강의 www.boostcourse.org