728x90
- box-sizing 속성은 padding 과 border 를 content 사이즈에 포함시켜서 계산할 것인지 말 것인지 정하는 것이다.
- content-box 값을 주게 되면 순수하게 content 의 사이즈만 요소의 크기로 잡는 것이다.
border-box 값을 주게 되면 border 까지 포함하여 요소의 크기를 잡게 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
background-color: orange;
border: 4px solid red;
}
.box1 {
box-sizing: content-box;
}
.box2 {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1">content-box</div>
<div class="box2">border-box</div>
</body>
</html>
- box-sizing: border-box 로 설정을 하면 padding 과 border 가 모두 요소에 포함되면서 전체적인 사이즈는 content-box 속성 값을 사용한 박스보다 작아보인다.
즉 진짜 content가 담기는 사이즈는 작아진다는 것을 의미한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent1 {
width: 200px;
height: 150px;
background-color: royalblue;
margin: 20px;
}
.child1 {
width: 300px;
height: 100px;
background-color: orange;
}
.parent2 {
width: 200px;
height: 150px;
background-color: royalblue;
margin: 20px;
overflow: hidden;
}
.child2 {
width: 300px;
height: 100px;
background-color: orange;
}
.parent3 {
width: 200px;
height: 150px;
background-color: royalblue;
margin: 20px;
overflow: scroll;
}
.child3 {
width: 300px;
height: 100px;
background-color: orange;
}
.parent4 {
width: 200px;
height: 150px;
background-color: royalblue;
margin: 20px;
overflow: auto;
}
.child4 {
width: 300px;
height: 100px;
background-color: orange;
}
.parent5{
width: 200px;
height: 150px;
background-color: royalblue;
margin: 20px;
overflow: visible;
}
.child5 {
width: 300px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="parent1"><div class="child1">=============</div></div>
<div class="parent2"><div class="child2">=============</div></div>
<div class="parent3"><div class="child3">=============</div></div>
<div class="parent4"><div class="child4">=============</div></div>
<div class="parent5"><div class="child5">=============</div></div>
</body>
</html>
- visible, hidden, scroll 은 직관적으로 이해할 수 있는데, auto는 뭘까요?
일단 큰 차이는 없는데, scroll은 스크롤바가 무조건 표시됩니다. 그래서 화면에 보이는 부분이 적으므로 스크롤해야 하는 영역이 auto 보다 넓은 것을 볼 수 있으며, auto 는 위아래 스크롤바가 표시되지 않는 것에 비해 scroll은 표시됩니다.
'[그린컴퓨터] 클라이언트 > CSS' 카테고리의 다른 글
| CSS 핵심 문법 { font, line, color, text, letter, word } (0) | 2023.06.27 |
|---|---|
| CSS 핵심 문법 { display, opacity } (0) | 2023.06.27 |
| CSS 핵심 문법 { border 테두리 } (0) | 2023.06.27 |
| CSS 핵심 문법 { CSS 단위, 박스모델, 여백 } (0) | 2023.06.27 |
| 스타일 상속, 우선순위, 우선순위점수 (0) | 2023.06.27 |