1. box-sizing?
박스의 너비와 높이를 어떤 기준으로 계산할지 정하는 속성이다. 속성 값은 content-box, border-box가 있다.
2. box-sizing 속성
- content-box : 너비와 높이가 콘텐츠를 기준으로 계산된다.
- border-box : 너비와 높이가 테두리를 포함해서 계산된다.
3. content-box 적용 예시
[HTML, CSS]
<head>
<style type="text/css">
/*reset*/
* {margin: 0; padding: 0; box-sizing: border-box;}
li {list-style: none;}
.wrap{padding: 50px}
.wrap div{width: 600px; padding: 10px; font-size: 13px; border: 10px solid #000; text-align: center; font-weight: bold;}
p{font-size: 15px; font-weight: bold; margin-bottom: 5px;}
.wrap div.box1{box-sizing: content-box;}
.wrap div.box2{box-sizing: border-box;}
</style>
</head>
<body>
<div class="wrap">
<p>box-sizing: content-box</p>
<div class="box1">
총 너비(640px) : width(600px) + 좌.우 padding(20px) + 좌·우 border 두께(20px)
</div>
</div>
</body>
[결과 화면]
box-sizing: content-box 인 경우 콘텐츠를 기준으로 총 너비가 나타나기 때문에 기존 width 600px에 padding값 좌, 우 각10px 씩 더해지고 border 좌,우 두께 각 10px 씩 추가되어 총 너비가 640px 된다.
4. border-box 적용 예시
[HTML, CSS]
<head>
<style type="text/css">
/*reset*/
* {margin: 0; padding: 0; box-sizing: border-box;}
li {list-style: none;}
.wrap{padding: 50px}
.wrap div{width: 600px; padding: 10px; font-size: 13px; border: 10px solid #000; text-align: center; font-weight: bold;}
p{font-size: 15px; font-weight: bold; margin-bottom: 5px;}
.wrap div.box1{box-sizing: content-box;}
.wrap div.box2{box-sizing: border-box;}
</style>
</head>
<body>
<div class="wrap">
<p>box-sizing: border-box</p>
<div class="box2">
총 너비(600px) : width(560px) + 좌·우 padding(20px) + 좌·우 border 두께(20px)
</div>
</div>
</body>
[결과 화면]
box-sizing: content-box인 경우 테두리를 포함해 계산되기 때문에 padding값 좌, 우 10px 씩 더해 20px, border 좌, 우 두께 10px씩 20px 이므로 총 너비 600px에서 40px을 제외한 나머지 560px이 콘텐츠 너비가 된다.
'개발' 카테고리의 다른 글
| 테이블 헤더와 1열 고정된 스크롤 테이블 만들기 (position: sticky) (0) | 2022.09.15 |
|---|---|
| text-decoration으로 텍스트에 선 꾸미기 (0) | 2022.09.14 |
| white-space으로 공백 처리하는 방법 알아보기 (0) | 2022.09.13 |
| word-break 으로 문장 줄바꿈 하기 (0) | 2022.09.07 |
| border 알아보기 (0) | 2022.09.06 |
댓글