[CSS] block elements 인데 옆에 오는 이유 + nth-child와 nth-of-type 차이점

block elements인데 inline elements처럼 옆에 오는 이유는?

 

예전 클론코딩 과제를 하면서 생긴 의문점
나는 분명 block 요소인 h1, header를 사용했는데 왜 또 다른 블록 요소인 div의 옆으로 배치되는 건지 이해가 안 됐었다

분명 둘 다 블록요소니까 다른 줄에 배치되어야 하는 거 아닌가? 그래서 검색을 해보니까

 

display:flex; 를 주면 flex 아이템들은 가로방향으로 배치되고 자신이 가진 내용물의 width만큼 차지하게 된다고 한다.

즉 Body안에 display flex 속성값을 주면 그 안의 블록이 모두 inline-block처럼 변한다

처음에 flex 요소의 특징을 잘 몰라서 고민 끝에 제목이 있는 header를 position:absolute; 그리고 top의 값을 넣어서 했었는데 (이렇게 해도 가능하다) display:flex;를 지우니까 바로 블록 요소로 돌아왔다

nth-child()와 nth-of-type()의 차이점 ?

nth-child(n) :  부모 엘리먼트의 모든 자식 엘리먼트 중 n 번째 (p이든 div이든 타입은 상관없음)

nth-of-type(n) : 부모 엘리먼트의 특정한 자식 중 n 번째 (타입을 구분함)

 

그래서 div라는 부모 안에 span, p가 막 섞여있을 때
span인지 p인지 구분하지 않고, 무조건 순서대로 선택하려면 nth-child를 사용한다

반대로 span인지 p인지 타입을 구분해서 선택하려면 nth-of-type으로 따로 정해 준 타입의 순서를 선택할 수 있다.

 

 

 

 

Ref

https://studiomeal.com/archives/197
https://firerope.tistory.com/category/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C/CSS