CSS 박스 모델

October 16, 2022 1 minute read

CSS는 HTML요소를 화면에 출력하는데 크게 인라인 (inline) 박스와 블록 (block) 박스로 구분합니다.

인라인 박스와 블록 박스

기본값이 인라인 박스로 출력되는 html 요소는 <span>,<p>, <a> 와 같이 글자를 만들고 제어하기 위한 요소라고 생각하면 그 특성들을 이해하기 쉽습니다.

블록 박스는 상자(레이아웃)을 만들기 위한 요소로 대표적으로 <div> 태그가 있으며 다음과 같은 특성을 가집니다.

width, height 속성을 사용해서 콘텐츠의 가로 너비와 세로 너비를 지정 할 수 있습니다.
width, height 속성의 기본값은 auto로 브라우저가 자동으로 너비를 계산합니다.
box-sizing 속성의 값이 content-box (기본값)이면 요소의 내용만으로 크기를 계산하고 border-box 면 내부 여백(padding)과 테두리의 두께(border)를 자동으로 포함해서 계산합니다.

테두리 선을 지정하는 단축 속성입니다. (선 두께 - 선 종류 - 선 색상)
선 두께 (border-width)는 기본값이 medium 인데 브라우저마다 다를 수 있는 애매한 표현으로 정확한 단위로 지정하는게 좋습니다.
선 종류 (border-style)는 기본값이 none 으로 선이 없기 때문에 solid, dashed 와 같은 선의 종류를 지정하지 않으면 테두리 선이 보이지 않습니다.
선 색상(border-color)은 기본값이 검정색 입니다.
테두리 두께 만큼 요소의 크기가 커지는 특성을 가집니다.
border-방향, border-방향-속성 처럼 개별 지정 할 수 있고 모서리를 둥글게 깎는 border-radius 속성이 있습니다.