Box Sizing

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

CSS에서 box-sizing은 요소의 전체 width와 height가 계산되는 방식을 결정하는 속성입니다. 기본적으로 width 및 height 속성에는 content의 크기만 포함되며 padding, border 또는 여백은 고려되지 않습니다. 그러나 box-sizing 속성을 사용하면 이 behavior를 변경하여 width 및 height 속성에 padding과 border 크기도 포함할 수 있습니다.

이렇게 하면 레이아웃 계산을 단순화하고 예상치 못한 크기 조정 문제를 방지할 수 있습니다.

다음은 box-sizing 속성을 사용하는 기본 구문입니다:

selector {
    box-sizing: value;
}

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

content-box: 기본값입니다. width 및 height 속성은 content의 크기만 포함합니다. 지정된 width와 height의 바깥쪽에 padding, border 및 margin이 추가됩니다.

border-box: width 및 height 속성에는 content, padding 및 border 크기가 포함됩니다. 여백은 여전히 요소 바깥쪽에 추가됩니다.

예:

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* Default behavior */
}

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

이 예제에서 <div> 요소의 box-sizing 값은 content-box입니다. 이는 <div>의 실제 렌더링된 너비가 300px(content) + 40px(왼쪽 및 오른쪽 padding) + 10px(왼쪽 및 오른쪽 border) = 350px가 된다는 의미입니다. height도 같은 방식으로 계산됩니다.

반면 container 클래스를 사용하는 요소는 box-sizing 값이 border-box입니다. 이 경우 지정된 width인 400px에는 content, padding 및 border가 포함됩니다. 실제 content 영역은 padding과 border를 수용하기 위해 줄어들며, 그 결과 content width는 400px - 60px(왼쪽 및 오른쪽 padding) - 20px(왼쪽 및 오른쪽 border) = 320px가 됩니다. height도 비슷한 방식으로 계산됩니다.

챌린지

쉬움

서로 다른 클래스를 가진 두 개의 구획(<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로 설정하세요.

직접 해보기

<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>