문서의 이전 판입니다!

CSS Box Sizing

description : CSS box-sizing Property
author : 오션
email : shlim@repia.com
lastupdate : 2021-03-16

Source of the article

CSS Box Sizing

CSS Box Sizing

CSS box-sizing속성을 사용하여 요소의 전체 너비와 높이에 패딩과 보더를 포함시킬 수 있습니다.

Without the CSS box-sizing Property

기본적으로, 요소의 너비와 높이는 아래와 같이 계산됩니다.

너비 + 패딩 + 보더 = 요소의 실제 너비
높이 + 패딩 + 보더 = 요소의 실제 높이

요소의 너비/높이를 설정할 경우, 해당 요소의 지정 너비와 높이에 보더와 패딩이 추가되기 때문에 해당 요소가 설정보다 더 크게 표시될 때가 있다는 것을 의미합니다.

예제

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Difference</title>
    <style>
        .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
        }
        .div2 {
            width: 300px;
            height: 100px;
            border: 1px dashed red;
            padding: 50px;
        }
    </style>
</head>
<body>
    <div class="div1">
        This div is smaller (width is 300px and height is 100px).
    </div>
    <br>
    <div class="div2">
        This div is bigger (width ks also 300px and height is 100px).
    </div>
</body>
</html>

상기 예제에서 동일한 지정 너비와 높이를 가진 두 개의 div 요소들(div1, div2)을 확인할 수 있습니다.
하지만 div2가 지정 패딩 값을 가지고 있기 때문에 이 두 개의 div 요소들은 결과적으로는 다른 크기로 표시됩니다.

이 문제를 box-sizing속성을 사용하여 해결할 수 있습니다.

With the CSS box-sizing Property

box-sizing 속성을 사용하여 요소의 전체 너비와 높이에 패딩과 보더를 포함시킬 수 있습니다.

요소에 box-sizing: border-box을 설정하면, 패딩과 보더가 해당 요소의 너비와 높이에 포함됩니다.

예제

오션,, CSS, box-sizing,

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

목차

CSS Box Sizing

Source of the article

CSS Box Sizing

Without the CSS box-sizing Property

예제

With the CSS box-sizing Property

예제

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

목차

CSS Box Sizing

Source of the article

CSS Box Sizing

Without the CSS box-sizing Property

예제

With the CSS box-sizing Property

예제

문서 도구