CSS (5) 썸네일형 리스트형 float 해제 하기 (clearfix) float을 해제해줘야하는 이유- 자식이 float속성을 가지면 부모의 너비는 자식의 너비를 계산하지 않고 그림 EX 1 해결책1 마지막에 빈 엘리먼트를 추가- container의 마지막 자식에 빈 엘리먼트를 추가하고 clear: both 스타일을 준다 EX 1 해결책2 가상 요소 이용- ::after에 clear속성 넣기 EX 1 css position static- position 프로퍼티의 기본값 - 기본적으로 이 값을 지정할 일은 없지만 이미 설정된 position을 무력화하기 위해 사용 - 부모 요소 내에 자식 요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치 relative- 기본 위치(static으로 지정되었을 때의 위치)를 기준으로 좌표 프로퍼티(top, bottom, left, right)를 사용하여 위치를 이동- 별도의 프로퍼티를 지정하지 않으면 static과 동일하게 동작 absolute- static 속성을 가지고 있지 않은 가장 가까운 부모를 기준으로 이동 - 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준 - absolute 선언 시, block 레벨 .. 가변단위 em / rem em- 부모 태그의 영향을 받는 상대적인 크기- 실제 사용된 요소의 폰트 크기에 비례⇒ 모든 요소가 자동으로 상위 요소로부터 폰트 크기를 상속받기 때문에 em 단위로 작업할 시 상속 관련 문제가 발생할 수 있음 EX 1⇒ wrapper클래스는 상위 요소인 html의 font-size를 상속 받아 16*1.5=24px가 되고 width는 이 요소의 font-size를 기준으로 24*3=72px이 된다.⇒ box클래스는 상위 요소인 div의 font-size를 상속 받아 24*1.5=36px가 되고 width는 이 요소의 font-size를 기준으로 36*2=72px이 된다. rem- 최상위(root) 엘리먼트 즉, html 요소의 폰트 크기를 기준으로 적용함 EX 2 white-space / text-overflow white-space- 공백을 어떻게 처리할지 설정- line break(줄바꿈) , tab(들여쓰기), space(띄어쓰기) 로 인해 공백이 만들어짐- HTML에서는 1개 이상의 연속된 띄어쓰기는 1개의 띄어쓰기로 표시된다. (그 이상은 를 사용해야함) 속성값 line break tab/space 자동 줄바꿈 normal(기본값) 무시 1번 O nowrap 무시 1번 X pre 반영 그대로 X pre-wrap 반영 그대로 O pre-line 반영 1번 O EX 1 normal EX 2 nowrap EX 3 pre EX 4 pre-wrap EX 5 pre-line text-overflow- 요소에서 자동줄바꿈 되지 않은 텍스트(영역을 벗어난 텍스트)를 어떻게 처리할지 설정- overflow 값이 visi.. css selector (선택자) :first-child / nth-child / nth-of-type :first-child- 해당 요소가 가장 첫번째 자식인가를 판단 EX 1⇒ p 요소이면서 그 p 요소가 첫번째 자식에 해당하는 것은 복숭아 이므로 복숭아만 빨간글씨가 되었다. EX 2⇒ p 요소이면서 그 p 요소가 첫번째 자식에 해당하는 것은 없으므로 빨간색이 적용되는 요소는 없다. (복숭아는 p요소이면서 fruit 클래스를 가진 div의 두번째 자식이다.) :nth-child(n)- 해당 요소가 n번째 자식인가를 판단- 숫자 대신에 even, odd, 2n+1, ... 가능 EX 3⇒ p 요소이면서 그 p 요소가 3번째자식에 해당하는 것은 자두이다. p 요소이면서 그 p 요소가 짝수번째 자식에 해당하는 것은 복숭아, 체리이다. :nth-of-type(n)-해당 요소 중에서 n번째인가를 판단 EX 4⇒.. 이전 1 다음