목차

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속성을 사용하여 요소의 전체 너비와 높이에 패딩과 보더를 포함시킬 수 있습니다.

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">
        div1 (width: 300px, height: 100px).
    </div>
    <br>
    <div class="div2">
        div2 (width: 300px, height: 100px, padding: 50px).
    </div>
</body>
</html>


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

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

With the CSS box-sizing Property

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

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

예제

<!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;
            box-sizing: border-box;
        }
        .div2 {
            width: 300px;
            height: 100px;
            border: 1px dashed red;
            padding: 50px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="div1">
        div1 (width: 300px, height: 100px).
    </div>
    <br>
    <div class="div2">
        div2 (width: 300px, height: 100px, padding: 50px).
    </div>
</body>
</html>


box-sizing: border-box; 사용한 결과가 훨씬 더 좋기 때문에, 많은 개발자들이 웹 페이지의 모든 요소들이 이런 방식으로 작동하기를 원합니다.

하기 코드는 모든 요소들이 이런 보다 직관적인 방식으로 크기가 부여되는 것을 보장합니다.
많은 브라우저에서 이미 많은 폼 요소(form elements)들에 대해 box-sizing: border-box;를 사용합니다.
(하지만, 모든 폼 요소에 대해서는 아닙니다. 이는 inputs과 텍스트 영역(text areas)이 width:100% 설정에서 크기가 다르게 보이기 때문입니다.)

이 속성을 모든 요소에 적용하는 것이 안전하고, 현명합니다.

예제

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
}
 
* {
  box-sizing: border-box;
} 
 
input, textarea {
  width: 100%;
}
</style>
</head>
<body>
 
<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br>
  Comments:<br>
  <textarea name="message" rows="5" cols="30">
  </textarea>
  <br><br>
  <input type="submit" value="Submit">
</form> 
 
<p><strong>Tip:</strong> Try to remove the box-sizing property from the style element and look what happens.
Notice that the width of input, textarea, and submit button will go outside of the screen.</p>
 
</body>
</html>

CSS Box Sizint Property

Property Description
box-sizing 요소의 너비와 높이가 계산되는 방법을 정의합니다: 패딩과 테두리의 포함 여부
, ,