화면의 레이아웃을 구성할 때 네모상자를 배치하여 큰 구역을 나눕니다. 이런 구역들을 나눠 박스의 개념으로 보고 코딩을 할 수 있습니다. 이 박스모델에는 콘텐츠의 실제 영역, 안쪽여백, 테두리, 바깥쪽 여백이 모두 포함되어 있습니다. 이는 css의 가장 기본적이고 근간이 되는 내용이기 때문에 반드시 이해를 하고 있어야합니다.
박스모델이란?
박스모델, 상자요소 등 코딩을 하다보면 이런 용어를 접하게 됩니다. HTML 요소를 화면에서 박스모양으로 구성하는데 이를 박스모델이라고 부릅니다. 와이어프레임을 떠올리면 쉽게 이해하실 수 있을 것입니다. 화면상에 보이는 HTML 요소들을 배치하고 동작하게 하기 위해서는 박스모델에 대한 이해가 필요합니다. 박스모델은 내용(content), 내부여백(padding), 테두리(border), 외부여백(margin) 으로 구분합니다.
콘텐츠영역
콘텐츠 영역은 화면에 보여주고싶은 이미지, 텍스트, 비디오 등과 같이 실제 내용 영역입니다. 블록요소의 경우 width, height 값을 사용하여 크기를 정할 수 있습니다. 인라인 요소일 경우엔 display:inilne-block을 사용하여 크기를 지정할 수 있습니다.
패딩영역 (내부여백)
패딩은 콘텐츠를 둘러싸고 있는 눈에 보이지 않는 여백 영역입니다.
테두리영역
콘텐츠와 패딩을 감싸고 있는 테두리 영역입니다. 만약 박스모델에 배경이 설정되어 있으면 이는 테두리의 바깥 가장자리 영역까지 설정됩니다. 마진, 패딩과 달리 두께, 색, 모양 등을 지정할 수 있습니다.
마진영역 (외부여백)
마진은 테두리영역 밖의 눈에 보이지 않는 여백입니다. 이웃하는 박스모델과 상하좌우 간격을 두기 위해 사용됩니다.
box-sizing
box-sizing은 박스모델의 너비와 높이를 계산하는 방법에 대한 css 속성입니다. HTML에서 기본값으로 하고 있는 width, height는 content영역의 크기입니다. padding, margin, border에 대한 크기는 포함되어 있지 않습니다.
TIP. 익스플로러8 이하버전에서는 padding과 border까지 포함되기때문에 HTML에 <!Doctype html> 태그를 입력해야 합니다.
content-box
이 박스모델의 너비는 페이지에 표시되는 너비입니다. 박스모델은 css표준에서 content-box를 기본값으로 정해두었습니다. content-box는 컨텐츠의 너비는 갖고 있지만, 여백과 테두리의 영역은 포함하고 있지 않습니다. 때문에 content-box를 설정값으로 하는 박스모델에 크기를 지정하면 여백과 테두리값을 제외한 콘텐츠영역에만 크기가 적용됩니다.
예를 들어, 컨텐츠의 크기 가로가 200px인 박스모델이 있습니다. padding값이 좌우 10px, 테두리가 5px일 때, 박스모델의 가로크기는 200 + (10x2) + (5x2) 로 총 230px 이 됩니다. width값으로 지정한 크기가 컨텐츠의 크기이며, 거기에 패딩과 보더값까지 더해져서 박스모델의 크기가 결정되는 것이죠. 높이 또한 동일하게 계산하시면 됩니다.
만약 가로사이즈가 500px인 공간에 200px 인 박스모델을 2개 넣는다고 생각하면, margin, padding, border를 각각 계산하여 넓이를 맞춰줘야하기 때문에 너비계산이 복잡해집니다. 또한 반응형으로 제작하기 위해 %나 em 의 단위를 사용하게 되면 더욱 복잡해지겠죠? 이
border-box
대체박스모델에서 적용되는 너비는 컨텐츠, padding, border 영역을 모두 합한 크기 입니다.
예를 들어, 가로너비가 200px이고 padding값이 좌우 10px, border가 5px이면, 200px에서 padding, border를 뺀 값이 자동으로 content의 너비가 됩니다. 200px - (5x2) - (10x2) 로 170px이 content영역이 되겠네요.
요소를 배치할때 border-box를 이용하면 요소의 크기를 쉽게 처리할 수 있습니다. 다만, position:relative, position:absolute를 사용할때는 content-box를 기준으로 하게됩니다. 이때 테두리 및 패딩 크기를 변경해도 영향을 받지 않는 경우가 있으니 참고하시어 적절하게 사용하시면 되겠습니다.
'CSS' 카테고리의 다른 글
| CSS 선택자와 우선순위 (0) | 2024.02.23 |
|---|
