프로그래밍/CSS

생활코딩 css 정리 - 19. box-sizing

가카리 2017. 11. 19. 23:15
반응형
19. box-sizing

box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성입니다.
width와 height는 엘리먼트의 컨텐츠의 크기를 지정합니다.
따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵습니다.
box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정 할 수 있기 때문에 예측하기가 더 쉽습니다. 최근엔 모든 엘리먼트에 이 값을 지정하는 경우가 늘고 있습니다.

box_sizing.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
        div
            margin: 10px;
            width: 150px;
       
        #small
            border: 10px solid black;
       
        #large
            border: 30px solid black;
       
</style>
</head>
<body>
<div id="small">Hello</div>
<div id="large">Hello</div>
</body>
</html>

실행화면


다음과 같이 뜨지만width값을 150px로 지정했음에도 불구하고 두 개의 태그가 넓이가 다릅니다.
이유는 다음과 같이 box-sizing이라는 속성이 디폴트로 content-box로 지정되었기 때문이다.
이 값은 콘텐츠의 넓이가 150px로 지정해라는 뜻입니다.
box-sizing을border-box로 바꾸면 아래와 같이 넓이가 같아집니다.


아래와 같이style에서 * 로 지정을 하면box-sizing의 기본 디폴트를 border-box로 할 수 있습니다.

boxsizing.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
        *
            box-sizing:border-box;
       
        div
            margin: 10px;
            width: 150px;
       
        #small
            border: 10px solid black;
       
        #large
            border: 30px solid black;
       
</style>
</head>
<body>
<div id="small">Hello</div>
<div id="large">Hello</div>
</body>
</html>

실행화면




반응형