CSS box-sizing 속성
box-sizing 속성은 요소의 크기가 계산되는 방법을 결정합니다. content-box(기본값), border-box 두 가지 값이 있습니다.
| content-box | 설정한 크기가 padding, border, margin을 제외한 순수한 요소의 크기가 됩니다. |
| border-box | 설정한 크기가 (요소 + padding + border)의 크기가 됩니다. |
그림으로 보면 아래와 같습니다.
content-box
border-box
예시
content-box
container 안에 box 두 개가 있습니다. box-sizing 속성은 따로 설정하지 않았으므로 기본값인 content-box입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>box-sizing</title>
</head>
<style>
.container {
width: 1000px;
height: 500px;
border: 1px solid black;
}
.green_box {
width: 1000px;
height: 250px;
}
.red_box {
width: 1000px;
height: 250px;
}
</style>
<body>
<div class="container">
<div class="green_box">초록</div>
<div class="red_box">빨강</div>
</div>
</body>
</html>
container안에 green_box와 red_box가 딱 맞게 들어가 있는 상태입니다.
각 크기는 다음과 같습니다
| 요소 | width | height |
| container | 1000 | 500 |
| green_box | 1000 | 250 |
| red_box | 1000 | 250 |
내부 박스에 테두리(border)를 생성해 보겠습니다.
.container {
width: 1000px;
height: 500px;
border: 1px solid black;
}
.green_box {
width: 1000px;
height: 250px;
border: 10px solid green; /* 추가 */
}
.red_box {
width: 1000px;
height: 250px;
border: 10px solid red; /* 추가 */
}
테두리를 생성했더니 내부 box들이 container 외부로 튀어나왔습니다. 현재 green_box와 red_box의 길이는 모두
1020px x 270px입니다. (왼쪽+오른쪽과 위+아래를 모두 더하므로 20px씩 커집니다)
이번엔 padding을 추가해 보겠습니다.
.container {
width: 1000px;
height: 500px;
border: 1px solid black;
}
.green_box {
width: 1000px;
height: 250px;
border: 10px solid green;
padding: 10px; /* 추가 */
}
.red_box {
width: 1000px;
height: 250px;
border: 10px solid red;
padding: 10px; /* 추가 */
}
padding까지 더해지니 박스들이 더 커졌습니다. 현재는 사이즈는 모두 1040px x 290px입니다. (마찬가지로 20px씩 증가)
border와 padding이 더해지면서 점점 의도하지 않은 듯한 모양새가 나오고 있습니다.
여기서 green_box의 box-sizing 속성을 border-box로 설정해 보겠습니다.
border-box
.container {
width: 1000px;
height: 500px;
border: 1px solid black;
}
.green_box {
width: 1000px;
height: 250px;
border: 10px solid green;
padding: 10px;
box-sizing: border-box; /* 추가 */
}
.red_box {
width: 1000px;
height: 250px;
border: 10px solid red;
padding: 10px;
}
border, padding의 크기까지 더한 green_box의 크기가 width와 height 속성에 지정한 크기(1000px, 250px)가 되면서 의도한 대로 container안에 딱 맞게 들어갔습니다.
red_box도 수정하면
이렇게 border-box를 사용하면 border, padding의 크기에 상관없이 지정한 크기가 유지되기 때문에(border, padding이 늘어나면 안쪽으로 축소됩니다) 정밀한 작업을 할 때 유용합니다.
box-sizing - CSS: Cascading Style Sheets | MDN
The box-sizing CSS property sets how the total width and height of an element is calculated.
developer.mozilla.org
'프론트엔드 HTML CSS JAVASCRIPT' 카테고리의 다른 글
| [HTML, CSS] 스크롤바 생성 overflow (auto, scroll, hidden) (2) | 2021.04.01 |
|---|---|
| [HTML, CSS] 기본적인 페이지 레이아웃(layout) 잡기 네이버 클론코딩 (2) - flex, grid 레이아웃 (2) | 2020.03.28 |
| [HTML, CSS] 기본적인 페이지 레이아웃(layout) 잡기 네이버 클론코딩 (1) (6) | 2020.03.21 |
| [HTML, CSS] input창 클릭 시 CSS적용하는 방법(focus, animation (4) | 2019.12.29 |
| [HTML, JAVASCRIPT] 웹 게임 만들기 포트리스 (2) - 미사일 (0) | 2019.10.29 |
