CSS
- e:nth-child(n) : e의 부모 요소 중 n번째의 자식 요소
- e:nth-of-type(n) : e와 같은 형제 중 n번째의 요소
<div id="test">
<h2>nth test</h2>
<p>첫 번째 문단</p>
<p>두 번째 문단</p>
<p>세 번째 문단</p>
<p>네 번째 문단</p>
</div>위와 같은 html이 존재할 때,
#test > p:nth-child(2) {
color: red;
} // 첫 번째 문단 red
#test > p:nth-of-type(2) {
color: red;
} // 두 번째 문단 red와 같은 결과를 확인할 수 있다.
- float : 화면에 둥둥 떠있는 모습을 상상하면 되는데, 웹은 평면이기 때문에 z축이 없어 확인할 수 없을 뿐, 실제로는 요소에 float을 주게 되면 요소의 자리가 사라지게 된다.
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
</div>
<footer>footer</footer>#wrapper div에는 자식 요소 div가 있는데, 이 두 개의 div에 float:left를 하게 되면 화면에 둥둥 뜨게 되고, #wrapper div는 자식이 존재하지 않는 것으로 표현된다. 그래서 확인해보면 div에 높이가 사라지는 것을 볼 수 있다.
그렇다면, 어떻게 float을 해도 자식 요소가 존재한다는 것을 알릴 수 있을까?
- overflow : hidden || auto
바로 overflow를 이용하면 float을 자식 요소로 인식하게 되는 마법을 볼 수 있다.
이는 block formatting context를 만들어 주기 때문에 가능하다고 한다.
위의 html을 다시 한 번 보면, #wrapper div의 자식들에게 float을 주게 되면, footer가 빈 자리를 채우기 위해 위로 올라가는 것을 확인할 수 있다.
footer에게 위에 float 요소가 있다는 걸을 알릴 수 있는 방법은 없을까?
- clear : left || both || right
clear을 사용하면 된다. 현재는 float:left로 적용이 되어 있기 때문에 clear:left를 적용하면 footer가 다시 내려가는 것을 확인할 수 있다.
느낀 점
부스트코스를 수강하면서 몰랐던 부분을 정리했다.
이전에 css를 할 때 clear, overflow, float과 같은 것들을 사용해본 적이 많지 않았고, 나올 때마다 구글링을 하면서 해결해나갔었는데 어떤 원리로 float이 작동하고, clear, overflow를 사용해야 하는지 정확하게 알게 되었다.
또한, nth에 관련된 것은 정말 놀라웠는데, 지금까지 별생각 없이 사용했는데, 모르고 사용한 것 같아서 놀라웠다. 원리도 모르고 숫자를 때려 맞혀서 사용했던 것 같아 반성하게 되는 시간이었다.
