자주 헷갈리는 CSS 개념 3가지
MDN 사이트에 있는 CSS 레퍼런스에는 정말 많은 내용이 있는데요.
그 중에서 자주 사용하고, 자주 헷갈리는 3가지 개념을 정리해 보겠습니다!
첫 번째는, display 속성입니다.
display 속성에 대해 알기 전에, HTML에서 inline과 block 개념에 대해 알아야 합니다.
는 새로운 라인에서 시작하지 않고,
해당 요소 내용만큼만 너비 차지하는 특징이 있습니다.
대표적으로 span, a, img 태그 등이 있습니다.
는 새로운 라인에서 시작하고,
해당 라인 너비를 모두 차지하는 특징이 있습니다.
대표적으로 div, h, ul, ol, p, form 등이 있습니다.
CSS에서 display 속성을 통해 해당 요소를 다른 요소로 바꿀 수 있습니다.
대표적으로 block, inline-block, inline이 있습니다.
표를 통해 세 가지 속성을 비교해 보겠습니다.
두 번째는, 셀렉터입니다.
주로 사용하는 셀렉터는 두 가지가 있습니다.
바로 자식 셀렉터와 후손 셀렉터가 있습니다.
header > p { }
- 바로 아래 자식만 선택 (자식 셀렉터)
header p {}
- 모든 자식 선택 (후손 셀렉터)
엘리먼트명:nth-child(2n)
- 자식 중 짝수 선택
엘리먼트명:nth-child(2n+1)
- 자식 중 홀수 선택
세 번째는, box-sizing 속성입니다.
box-sizing 속성은 영역 크기를 지정할 때 헷갈리는 경우가 많은데요.
border-box와 content-box의 차이를 이해하셔야 됩니다.
border-box
인 경우 box의 높이: height + padding-top + padding-bottom + border-top + border-bottom
content-box
인 경우 box의 높이: height
실제 프론트엔드 개발 시 box 크기 산정이 직관적인 border-box
속성을 더 많이 활용하기 때문에 익숙해집시다.