웹페이지
CSS STEP 17 - BOX2
IT의 큰손
2023. 4. 18. 09:17
728x90
★ BOX 사이즈 측정
- 1. content-box : 상자의 실제 크기 = 너비(높이) + 패딩 + 테두리
- 2. border-box : 상자의 실제 크기 = 너비(높이)
■ HTML 코드
<body>
<!-- -->
<!-- div#box$.box{상자$}*3 -->
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
</body>
■ CSS 코드
<style>
.box {
width : 150px;
height: 150px;
}
#box1 { background-color: tomato;}
#box2 { background-color: gold;}
#box3 { background-color: cornflowerblue;}
/* 사이즈 측정 : 상자의 실제 크기 = 너비(높이) + 패딩 + 테두리*/
/* 기존 소스코드 : 박스 크기가 넘어감*/
#box1 {
border : 10px solid;
padding : 10px;
}
/* 박스크기가 넘어가지 않고 유지됨. */
#box3 {
box-sizing : border-box;
border : 10px solid;
padding : 10px;
width : 150px;
height : 150px;
}
</style>
■ 실행 결과
728x90