HTML 요소는 박스(Box) 모양으로 구성되며, 이것을 박스 모델(Box Model)이라고 부릅니다.
박스 모델은 HTML 요소를 다음 4가지로 구분합니다.
-
Content는 실질적인 Box의 내용물을 나타냅니다.
-
Padding은 테두리와 Content 사이의 간격을 나타냅니다.
-
Border는 내용물의 테두리를 나타냅니다.
-
Margin은 Box와 외부와의 여백을 나타냅니다.
Content를 만들때는 가로 width와 세로 height의 범위를 지정해 줘야 합니다.
테두리를 나타낼때는 border: 굵기 색상 스타일; 세가지 속성을 모두 표시해 줘야합니다.
테두리는 border:none; 으로 테두리가 없도록 할 수 있으며, border-radius: 크기; 를 사용하여 모서리를 둥글게 만들 수 있습니다.
padding을 이용하여 테두리와 content의 거리를 조절해 줄 수 있습니다.
margin을 이용하여 Box를 주변과 거리를 줄 수 있습니다.
padding과 margin의 값을 줄 때는
padding:top right bottom left; 시계 방향으로 값을 줄 수 있습니다.
padding:20px 30px; 두 개의 값만 주게 되면
top과 bottom, right과 left 두 개가 같은 값을 가지게 됩니다.
Box Model은 기본적으로 content영역의 크기 뿐만 아니라 padding과 border의 크기를 포함합니다.
이때 box-sizing: border-box; 속성을 사용하면 padding과 border의 크기를 제외한 content 만의 크기를 적용해 줄 수 있다.
???