박스 크기 설정

Coddy HTML 여정의 CSS로 스타일링하기 섹션에 포함된 레슨. 76개 중 39번째.

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

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

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

selector {
    box-sizing: value;
}

value: 원하는 박스 크기 계산 방식으로, 다음 중 하나일 수 있습니다:

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가 됩니다. 높이도 비슷한 방식으로 계산됩니다.

챌린지

쉬움

두 개의 division(<div>)이 있는 HTML 문서가 주어집니다. 각 division에는 서로 다른 클래스가 있습니다. box-sizing 속성을 사용해 이러한 요소의 너비와 높이가 계산되는 방식을 제어하는 것이 과제입니다. 다음 단계를 따르세요:

클래스가 content-box-div인 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. width를 300px, height를 200px, padding을 20px, border를 5px solid blue, box-sizing을 content-box로 설정하세요.
클래스가 border-box-div인 <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>