이번에는 html 영역의 크기를 어떤 것을 기준으로 계산할지 정하는 속성인 box-sizing에 대해서
알아보는 시간을 갖도록 하겠습니다.
| 속성 | 설명 |
| box-sizing: content-box | 컨텐츠(내용)을 기준으로 크기를 정합니다.(기본값) |
| box-sizing: border-box | 테두리를 기준으로 크기를 정합니다. |
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
background-color: gray;
}
.box2 {
width: 200px;
height: 100px;
border: 1px solid black;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box">
안녕하세요.
</div>
<div class="box2">
</div>
</body>
</html>
예제 코드의 .box를 보면 가로 200px, 세로 100px 크기를 주고 안에 padding값 20px과 겉의 border
크기도 5px을 주었습니다.
그럼 여기서 생각해 볼 부분은, 저렇게 하고 실행을 하면 .box의 크기는 크기값을 준 대로 가로 200px,
세로 100px만큼의 크기로 나올지 안의 padding 크기와 border 크기까지 다 계산해서 더 크게 나올지
헷갈릴 수 있습니다.
(아래 .box2는 .box가 가로200px, 세로 100px로 나올지 비교하기 위해 넣었습니다.)
결과로 보면 아래와 비교했을 때 가로 200px, 세로 100px보다 더 큰 크기로 나오게 됩니다.
이 예제 코드에서는 우리가 따로 box-sizing 값을 주지 않았는데, 그럼 box-sizing의 기본값인
content-box값의 특징대로 적용되게 됩니다.
content-box의 값으로 적용되면, 해당 영역은 원래의 가로, 세로 크기값에 안에 padding값, border값
등 여러 요소가 고려되어 원래 우리가 생각했던 영역의 크기보다 더 크게 나올 수 있습니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
background-color: gray;
box-sizing: content-box;
}
.box2 {
width: 200px;
height: 100px;
border: 1px solid black;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box">
안녕하세요.
</div>
<div class="box2">
</div>
</body>
</html>
생각대로 .box에 content-box 값을 넣어 줬지만 변화가 없는 모습을 볼 수 있습니다.
그럼 우리가 페이지를 디자인할 때 padding 요소 등에 영향받지 않고 정한 크기대로 나오게 하려면
어떻게 해야 할까요?
바로 그럴 때 box-sizing의 border-box 속성값을 이용하는 것입니다.
위의 예제에서 box-sizing에 content-box 대신 border-box값을 한 번 줘 볼까요?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
background-color: gray;
box-sizing: border-box;
}
.box2 {
width: 200px;
height: 100px;
border: 1px solid black;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box">
안녕하세요.
</div>
<div class="box2">
</div>
</body>
</html>
이제 가로 200px, 세로 100px의 우리가 정한 크기대로 나오는 것을 볼 수 있습니다.
'웹 개발 > 주요 태그, 속성들' 카테고리의 다른 글
| display table 속성 (0) | 2021.12.22 |
|---|---|
| css block, inline, inline-block 속성 (0) | 2021.12.22 |
| css opacity 속성 (0) | 2021.12.20 |
| css margin:0 auto (0) | 2021.12.20 |
| css min&max-width&height 속성 (0) | 2021.12.19 |
댓글