목차
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 | 요소의 너비와 높이가 계산되는 방법을 정의합니다: 패딩과 테두리의 포함 여부 |
