코딩스쿨

CSS Box Model

CSS Box Model: 웹 페이지에서 요소의 크기와 간격을 관리하는 방법

CSS Box Model은 웹 페이지에서 HTML 요소가 어떻게 공간을 차지하고 배치되는지 정의하는 기본 구조입니다. 모든 HTML 요소는 박스 모델로 표현되며, 요소의 내용(content), 패딩(padding), 테두리(border), **마진(margin)**으로 구성됩니다. 이 자료에서는 CSS 박스 모델의 각 구성 요소를 이해하고, 이를 활용해 웹 페이지의 레이아웃을 디자인하는 방법을 다룹니다.

1. CSS Box Model 구성 요소

박스 모델은 요소의 크기와 간격을 결정하는 중요한 역할을 합니다. 박스 모델은 크게 네 가지 영역으로 나뉩니다:

내용(Content): 요소의 실제 내용이 표시되는 영역.
패딩(Padding): 내용과 테두리 사이의 내부 여백.
테두리(Border): 요소를 감싸는 경계선.
마진(Margin): 요소와 다른 요소 사이의 외부 여백.

이 구조는 요소의 전체 크기를 결정하며, 레이아웃과 디자인에 중요한 영향을 미칩니다.

Box Model 예시:

<div>내용 영역</div>

div {
    width: 200px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
}

위 예시는 다음과 같은 Box Model로 구성됩니다:

내용(Content): 200px 너비의 콘텐츠.
패딩(Padding): 내용과 테두리 사이에 10px의 여백.
테두리(Border): 5px의 검정색 실선 테두리.
마진(Margin): 요소 외부에 20px의 간격.

2. Box Model 구성 요소 설명

2.1 내용 영역 (Content)

내용 영역은 HTML 요소의 실제 내용이 표시되는 공간입니다. 이 영역의 크기는 width와 height 속성으로 설정할 수 있으며, 텍스트, 이미지, 기타 콘텐츠가 여기에 포함됩니다.

div {
    width: 300px;
    height: 150px;
    background-color: lightblue;
}

위 코드는 <div> 요소의 내용 영역을 300px 너비, 150px 높이로 설정하고, 배경색을 적용한 예시입니다.

2.2 패딩(Padding)

패딩은 내용 영역과 테두리 사이의 내부 여백을 설정하는 속성입니다. 패딩 값은 **각 방향(위, 오른쪽, 아래, 왼쪽)**별로 설정할 수 있으며, 패딩 안쪽에는 배경색이 적용됩니다.

div {
    padding: 20px;
}

위 코드는 요소의 모든 방향에 20px의 패딩을 설정하여, 내용과 테두리 사이에 내부 여백을 만듭니다.

2.3 테두리(Border)

테두리는 요소의 경계를 나타내는 선으로, 두께, 스타일, 색상을 지정할 수 있습니다. 테두리는 내용과 패딩을 감싸며, 요소의 외형을 꾸미거나 구분할 때 사용됩니다.

div {
    border: 5px solid black;
}

위 코드는 5px 두께의 검정색 실선 테두리를 설정한 예시입니다.

2.4 마진(Margin)

마진은 요소와 다른 요소 사이의 외부 여백을 설정하는 속성입니다. 마진 값 역시 각 방향별로 설정할 수 있으며, 요소 간의 간격을 조정할 때 사용됩니다. 마진은 배경색이 적용되지 않는 외부 공간입니다.

div {
    margin: 30px;
}

위 코드는 요소의 모든 방향에 30px의 마진을 설정하여, 요소와 주변 요소들 간의 간격을 만듭니다.

3. 박스 모델의 크기 계산

CSS에서 요소의 최종 크기는 내용, 패딩, 테두리, 마진을 모두 고려하여 계산됩니다. 기본적으로, width와 height 속성은 **내용(content)**의 크기만을 지정하며, 패딩과 테두리는 추가로 더해져 요소의 전체 크기를 결정합니다.

기본 박스 모델 계산 방식:

<!-- HTML 코드 -->
<div>Box Model Example</div>

/* CSS 코드 */
div {
    width: 200px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
}

내용(Content): 200px (width 값)
패딩(Padding): 10px (상하좌우)
테두리(Border): 5px (상하좌우)
전체 너비(Total Width) = 200px + 10px * 2(좌우 패딩) + 5px * 2(좌우 테두리) = 230px
전체 높이(Total Height) = height 값 + 패딩 + 테두리

4. `box-sizing` 속성

box-sizing 속성은 박스 모델의 크기 계산 방법을 제어합니다. 기본적으로 width와 height는 내용만 포함하지만, box-sizing을 사용하면 패딩과 테두리까지 포함하여 크기를 계산할 수 있습니다.

`box-sizing`의 값:

content-box (기본값): width와 height는 내용만을 포함하고, 패딩과 테두리는 추가로 더해집니다.
border-box: width와 height가 패딩과 테두리를 포함한 크기로 계산됩니다.

`border-box` 사용 예시:

div {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: border-box;
}

전체 너비는 200px로 유지되며, 패딩과 테두리가 그 안에 포함됩니다.
이 방식은 요소의 크기를 더 쉽게 제어할 수 있어, 반응형 디자인에서 자주 사용됩니다.

5. 마진 겹침 (Margin Collapsing)

두 개의 인접한 블록 요소 사이의 상하 마진이 겹쳐져 하나의 마진으로 처리되는 현상을 **마진 겹침(Margin Collapsing)**이라고 합니다. 마주하는 마진 중 더 큰 값만 적용됩니다.

예시:

div {
    margin-bottom: 30px;
}

p {
    margin-top: 20px;
}

위 코드에서 <div>와 <p> 사이의 마진은 두 값이 겹쳐져 30px만 적용됩니다. 이는 레이아웃을 단순하게 관리하는 데 도움을 주지만, 예상치 못한 결과를 초래할 수 있어 주의가 필요합니다.

6. 자주 사용되는 박스 모델 예제

패딩과 테두리를 포함한 요소 크기:

div {
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 5px solid blue;
    box-sizing: border-box;
}

고정된 마진 설정:

article {
    margin: 10px 20px;
}

상하 마진만 설정:

h1 {
    margin: 20px 0;
}

박스 모델을 활용하여 웹 페이지의 레이아웃을 정확하게 구성하고, 반응형 디자인을 구현할 수 있습니다.

코딩 스쿨 CSS