자주 헷갈리는 CSS 개념 3가지

MDN 사이트에 있는 CSS 레퍼런스에는 정말 많은 내용이 있는데요.
그 중에서 자주 사용하고, 자주 헷갈리는 3가지 개념을 정리해 보겠습니다!

1. display 속성

첫 번째는, display 속성입니다.

display 속성에 대해 알기 전에, HTML에서 inline과 block 개념에 대해 알아야 합니다.


inline 요소

새로운 라인에서 시작하지 않고,
해당 요소 내용만큼만 너비 차지하는 특징이 있습니다.
대표적으로 span, a, img 태그 등이 있습니다.

block 요소

새로운 라인에서 시작하고,
해당 라인 너비를 모두 차지하는 특징이 있습니다.
대표적으로 div, h, ul, ol, p, form 등이 있습니다.


CSS에서 display 속성을 통해 해당 요소를 다른 요소로 바꿀 수 있습니다.
대표적으로 block, inline-block, inline이 있습니다.
표를 통해 세 가지 속성을 비교해 보겠습니다.


block, inline-block, inline 비교


2. Selector

두 번째는, 셀렉터입니다.
주로 사용하는 셀렉터는 두 가지가 있습니다.
바로 자식 셀렉터와 후손 셀렉터가 있습니다.

자식 셀렉터, 후손 셀렉터

  • header > p { } - 바로 아래 자식만 선택 (자식 셀렉터)

  • header p {} - 모든 자식 선택 (후손 셀렉터)

  • 엘리먼트명:nth-child(2n) - 자식 중 짝수 선택

  • 엘리먼트명:nth-child(2n+1) - 자식 중 홀수 선택


3. box-sizing 속성

세 번째는, box-sizing 속성입니다.
box-sizing 속성은 영역 크기를 지정할 때 헷갈리는 경우가 많은데요.
border-boxcontent-box의 차이를 이해하셔야 됩니다.


border-box, content-box

  • border-box인 경우 box의 높이: height + padding-top + padding-bottom + border-top + border-bottom
  • content-box인 경우 box의 높이: height

실제 프론트엔드 개발 시 box 크기 산정이 직관적인 border-box 속성을 더 많이 활용하기 때문에 익숙해집시다.

profile
IT 트렌드에 관심이 많은 프론트엔드 개발자

0개의 댓글