2021. 6. 19. 00:01ㆍCSS
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
'CSS' 카테고리의 다른 글
CSS 단위 em, rem, vh vw, %, px 정리 (0) | 2021.08.01 |
---|---|
align-items / align-content / align-self의 특징과 차이점 (0) | 2021.07.14 |
[CSS] div 위에 이미지 및 아이콘 올리기와 사진 영역에 꽉 채우기 (0) | 2021.07.12 |
[HTML] 페이지 이동 링크 (a 앵커) 사용 시 리스트로 묶어주기 (0) | 2021.06.03 |
boothstrap 부트스트랩 사용법 (0) | 2021.05.31 |