티스토리 뷰

[개발]프로그래밍/css3

[css3] box-sizing - 박스 너비 기준

좋은 블로그 2021. 5. 6. 10:09
1. 개념
box-sizing - 박스 너비 기준
css에서는 width 속성을 통해 너비를 나타내고 height를 통해 높이를 나타내고 있지만이는 콘텐츠의 너비와 높이를 나타냄
그래서 콘텐츠 영역만 너비와 높이로 지정할 것인지 패딩이나 테두리 크기 등 까지도 합쳐서 너비와 높이로 나타낼지에 대한 속성을 지정할 수 있음

속성

설명

content-box

콘텐츠 영역 너비 값으로 사용(기본값)

border-box

콘텐츠 영역에 테두리까지 포함한 전체 박스 모델 너비 값을 포함
2. 태그
box-sizing
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<style>
div
{
border : 1px solid #000 ;
margin-top : 20px ;
width : 200px ;
height : 200px ;
padding : 30px ;
}
</style>
<body>
1
<div style =' box-sizing : content-box ' > 키보드와 하루 </div>
2
<div style =' box-sizing : border-box ' > 키보드와 하루 </div>
</body>
</html>
결과 화면
box-sizing 사용 예제
코드 설명
1
box-sizing : content-box ;
content-box는 말 그대로 width,height 기준이 콘텐츠 영역에 포함이 됩니다.
1번에서 보면 크롬에서 개발자 도구를 열어서 확인해 보았을 때 파란색 영역이 200*200임을 알 수 있습니다.
즉, 키보드와 하루 라는 콘텐츠가 200*200이고 그 뒤에 padding 영역 30px과 테투리 너비 1px로 되어 있음을 알 수 잇습니다.
2
<box-sizing : border-box ;
border-box로 옵션을 주게 되면 2번에서 보시는 것처럼 파란색 영역이 138*138로 설정이 됩니다.
즉 콘텐츠 영역이 그렇게 나오는데 이는 padding 30px와 , border 1px가 200px에 너비에 포함되어 있기 때문입니다.
그래서 계산을 해보게 된다면 138 + 30 + 30 + 1 + 1 = 200px로 나오게 됩니다.
좌에서 우까지 모두 포함해서 200px이기 때문입니다.
저작자표시

'[개발]프로그래밍 > css3' 카테고리의 다른 글

[css3] position - 배치 방법 지정  (0) 2021.05.11
[css3] float - 왼쪽,오른쪽 배치  (0) 2021.05.07
[css3] padding - 내용과 테두리 사이의 여백 설정  (0) 2021.05.04
[css3] margin - 주변 여백 설정  (0) 2021.05.03
[css3] border-shadow - 그림자 효과 내기  (0) 2021.04.30
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday