처음 css에 대해 배울 때 많이 헷갈리는 요소중에 하나가
border, padding 값이 포함된 영역의 너비, 높이 값을 정하는 작업이다.
1. 너비, 높이 값에 포함되는 속성
내가 원하는 너비와 높이 값을 지정을 했지만 개발자 도구나
실제 너비, 높이 값을 측정했을 때, 내가 지정한 값보다 너 크게 잡히는 경우가 있을 것이다.
이 경우 border, padding 값을 확인해봐야 한다.
<style>
.box{width:200px; height:200px; background:skyblue;}
</style>
<body>
<div class="box"></div>
</body>위와 같은 코드인 경우 너비 200px, 높이 200px의 네모난 상자가 만들어 진다.
<style>
.box{border:4px solid blue; padding:0 20px; width:200px; height:200px; background:skyblue;}
</style>
<body>
<div class="box"></div>
</body>하지만 위의 소스와 같이 border, padding 값이 들어간다면 값은 달라진다.
위의 이미지와 같이 기본 200px의 너비에 양쪽 border값 8px + 양쪽 padding 값 40px이 포함되어
너비는 248px이 된다.
높이 또한 기본 200px에 위 아래 border 8px 을 포함해 208px이 된다.
2. box-sizing의 사용
위와 같이 border, padding 값이 들어가게 되면 높이와 너비를 내가 원하는대로 맞추기가 어려워 진다.
실제로 너비 200px을 만들기 위해서는 padding, border 값을 뺀 기본 너비값을 입력을 해야한다.
예시와 같은 경우 200px - 8px(양쪽 border) - 40px(양쪽 padding) = 152px의 너비를 기본 너비값으로
css에서 정의를 해야한다.
하지만 box-sizing 속성을 사용하게 되면 border, paddding 값을 통해 일일이 너비 값을 계산하지 않아도 된다.
<style>
.box{
border:4px solid blue;
padding:0 20px;
width:200px;
height:200px;
background:skyblue;
box-sizing:border-box;
}
</style>
<body>
<div class="box"></div>
</body>위와 같이 box-sizing:border-box 라는 값을 입력하면
내가 굳이 계산하지 않아도 200px을 width값으로 적용하면 border, padding 값을 계산해서
기본 너비값을 152px로 계산해준다.
3. box-sizing 속성
- content-box
box-sizing의 기본 값으로 너비나 높이 값에 border, padding의 값을 더해서 포함해 계산한다.
(width:100px; height:100px; padding:10px; box-sizing:content-box → width:120px, height:120px)
- border-box
너비나 높이 값에 border, padding값을 포함시키지 않고 기본 너비 값을 적용한다.
(width:100px; height:100px; padding:10px; box-sizing:boder-box → width:100px, height:100px)
'Frontend > CSS' 카테고리의 다른 글
| [css 속성] padding (0) | 2020.08.22 |
|---|---|
| [css 속성] margin (0) | 2020.08.22 |
| [css 응용] 이미지 세로 중앙 정렬 (0) | 2020.05.23 |
| [css 단위] vw, vh, vmin, vmax (Viewport 단위) (0) | 2020.04.22 |
| [css 속성] transition (0) | 2020.04.21 |