[HTML5/CSS3] CSS 속성 #3 - box-sizing 이해

Programming/HTML&CSS
2019. 4. 2. 10:45

CSS 속성 강좌 3번째 포스팅입니다. 오늘 포스팅 할 내용은 box-sizing 속성인데요. 해당 속성은 특정 엘리먼트의 크기를 어떻게 결정 할 것인지를 선택 할 수 있도록 해주는 속성입니다.

div 태그로 정의 된 박스형태의 레이어가 있고 CSS 속성부여로 박스 영역의 width와 height 크기를 각각 200px로 지정하였다고 가정 해보겠습니다. 이 때 box 영역 사이즈에 영향을 끼칠 수 있는 border 값과 padding 값도 지정을 하였다면 border값과 padding 값도 전체 영역 크기에 포함이 되면서 의도했든 의도하지 않았든 200px 보다 더 큰 width와 height 크기를 가지는 영역이 설정이 됩니다.

box-sizing 속성은 padding이나 border 값을 전체 영역크기에 포함 시킬지 말지를 선택 할 수 있게 해줍니다. 따로 지정하지 않으면 크기를 포함시킵니다.

1. content-box 와 border-box 속성 값

box-sizing의 대표적인 속성값으로 content-box와 border-box가 있습니다.

content-box : 고정 크기 이외의 다른 요소들에 의해 전체 영역 크기 변경
border-box : 고정 크기 이외의 다른 요소들에 의해 전체 영역 크기 변경이 안됨

box-sizing 속성이 default 값은 content-box로 고정 크기 이외의 다른 요소들에 의해 전체 영역의 크기에 영향을 받습니다. border-box로 지정을 하게 되면 고정 크기 이외의 다른 요소들에 의해 고정 된 전체 영역의 크기에는 영향을 주지 않습니다. 즉, width와 padding을 200px로 지정을 하고 border 값을 지정을 한다고 해도 전체 크기는 200px로 변화가 없습니다. 아래 샘플 예제로 살펴 보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>boxsizing 속성</title>
    <style>
        div {
            background-color : red;
            margin-top : 5px;
            width : 200px;
            height : 200px;
            text-align : center;
            line-height: 200px;
            border : 10px solid black;
        }
        .contentbox {
            box-sizing : content-box;
        }
        .borderbox {
            box-sizing : border-box;
        }
 
    </style>
</head>
<body>
    <div class = "contentbox"> contentbox 영역</div>
    <div class = "borderbox">borderbox 영역</div>
</body>
</html>
Colored by Color Scripter
cs

▼ <div> 태그를 통해 두 개의 영역을 정의 하였습니다. 두 영역다 공통적으로 width와 height 그리고 border 값을 지정을 해주고 box-sizing 속성값만 다르게 하였습니다. 아래 웹 페이지에서 나오는 형태를 보겠습니다.

▼ 분명히 두 개의 영역에 같은 size를 적용했음에도 불구하고 size가 다른 것을 확인 할 수 있습니다. contentbox 영역의 경우는 border 크기가 합쳐져 전체적인 영역의 크기가 더 커지는 것을 확인 할 수 있습니다. box-sizing 속성값에 따라 border가 적용 된 형태를 알면 더 이해가 쉬운데 contentbox 영역은 고정 사이즈 box 영역 바깥으로 border가 생긴 것이고 borderbox 영역의 경우는 고정 사이즈 box 영역의 안쪽으로 border가 적용이 되면서 기존의 200px를 유지하고 있는 형태입니다.

저작자표시 비영리

'Programming > HTML&CSS' 카테고리의 다른 글

[HTML5/CSS3] CSS 속성 강좌 #4 - border 속성 (0)	2019.04.04
[HTML5/CSS3] CSS 속성 강좌 #2 - margin과 padding의 차이 (0)	2019.03.31
[HTML5/CSS3] CSS 속성 강좌 #1 - display/opacity/visibility (0)	2019.03.29
[HTML5/CSS3] CSS 선택자 #4 - 반응/상태/구조 선택자 (0)	2019.03.28
[HTML5/CSS3] CSS 선택자 #3 - 하위 선택자 / 자식 선택자 / 등위 선택자 (0)	2019.03.27

맛있는 프로그래머의 일상