Box Sizing

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 39번째.

CSS에서 box-sizing은 요소의 전체 너비와 높이가 계산되는 방식을 결정하는 속성입니다. 기본적으로 width와 height 속성은 콘텐츠의 크기만 포함하며 패딩, 테두리(border) 또는 마진(margin)은 고려하지 않습니다. 하지만 box-sizing 속성을 사용하면 이 동작을 변경하여 width와 height 속성에 패딩과 테두리 크기도 포함되도록 할 수 있습니다.

이는 레이아웃 계산을 단순화하고 예기치 않은 크기 조정 문제를 방지할 수 있습니다.

box-sizing 속성을 사용하기 위한 기본 구문은 다음과 같습니다:

selector {
    box-sizing: value;
}

value: 원하는 box-sizing 동작이며, 다음 중 하나일 수 있습니다:

content-box: 이것은 기본값입니다. width와 height 속성은 콘텐츠의 크기만 포함합니다. 패딩, 테두리, 마진은 지정된 너비와 높이 외부에 추가됩니다.

border-box: width와 height 속성은 콘텐츠, 패딩, 테두리 크기를 포함합니다. 마진은 여전히 요소의 바깥쪽에 추가됩니다.

예를 들어:

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* 기본 동작 */
}

.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
}

이 예제에서 <div> 요소는 box-sizing 값으로 content-box를 가집니다. 이는 <div>의 실제 렌더링된 너비가 300px (콘텐츠) + 40px (좌우 패딩) + 10px (좌우 테두리) = 350px가 됨을 의미합니다. 높이도 이와 유사하게 계산됩니다.

반면에, container 클래스를 가진 요소는 box-sizing 값이 border-box입니다. 이 경우, 지정된 width인 400px에는 콘텐츠, 패딩, 테두리가 포함됩니다. 실제 콘텐츠 영역은 패딩과 테두리를 수용하기 위해 축소되어, 콘텐츠 너비는 400px - 60px (좌우 패딩) - 20px (좌우 테두리) = 320px가 됩니다. 높이도 이와 유사하게 계산됩니다.

챌린지

쉬움

두 개의 div(<div>) 요소가 포함된 HTML 문서가 주어집니다. 각 요소는 서로 다른 클래스를 가지고 있습니다. 여러분의 작업은 box-sizing 속성을 사용하여 이 요소들의 너비와 높이가 계산되는 방식을 제어하는 것입니다. 아래 단계를 따르세요:

클래스가 <strong>content-box-div</strong>인 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. width를 300px로, height를 200px로, padding을 20px로, border를 5px solid blue로, 그리고 box-sizing을 content-box로 설정하세요.
클래스가 <strong>border-box-div</strong>인 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. width를 300px로, height를 200px로, padding을 20px로, border를 5px solid red로, 그리고 box-sizing을 border-box로 설정하세요.

치트 시트

box-sizing 속성은 요소의 전체 너비와 높이가 계산되는 방식을 결정합니다:

selector {
    box-sizing: value;
}

값:

content-box (기본값): 너비와 높이에 콘텐츠 크기만 포함됩니다. 패딩과 테두리는 바깥쪽에 추가됩니다.
border-box: 너비와 높이에 콘텐츠, 패딩, 테두리 크기가 포함됩니다. 마진은 여전히 바깥쪽에 추가됩니다.

/* content-box 예시 */
div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box;
    /* 전체 너비: 300px + 40px + 10px = 350px */
}

/* border-box 예시 */
.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
    /* 전체 너비: 400px (콘텐츠 크기가 맞춰서 줄어듦) */
}

직접 해보기

<html>
<head>
    <title>Box Sizing</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="content-box-div">This is a div with content-box.</div>
    <div class="border-box-div">This is a div with border-box.</div>
</body>
</html>