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
'웹페이지' 카테고리의 다른 글
| CSS STEP 19 - Selector 3 (0) | 2023.04.18 |
|---|---|
| CSS STEP 18 - Selector 2 (0) | 2023.04.18 |
| CSS STEP 16 - 네이버 뉴스 Form 만들기 (0) | 2023.04.17 |
| CSS STEP 15 - Align (0) | 2023.04.17 |
| CSS STEP 14 - 응용 예제 (0) | 2023.04.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
'웹페이지' 카테고리의 다른 글
| CSS STEP 19 - Selector 3 (0) | 2023.04.18 |
|---|---|
| CSS STEP 18 - Selector 2 (0) | 2023.04.18 |
| CSS STEP 16 - 네이버 뉴스 Form 만들기 (0) | 2023.04.17 |
| CSS STEP 15 - Align (0) | 2023.04.17 |
| CSS STEP 14 - 응용 예제 (0) | 2023.04.17 |
