https://bayleaf07.tistory.com/102
CSS Box Model _ 구성요소
보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.
bayleaf07.tistory.com
▷ box-sizing 속성
content-box (x) vs ♥border-box(o)♥ 비교하기
<style>
.box {
width: 200px;
border: 4px solid black;
padding: 20px;
margin: 30px;
}
.content-box {
box-sizing: content-box;
background-color: rgb(241, 102, 52);
}
.border-box {
box-sizing: border-box;
background-color: rgb(62, 241, 125);
}
</style>
| content-box(X) | ♥border-box(O)♥ |
 |
 |
| 내가 설정한 박스 사이즈는 200px이다. 그런데, 실제로 잡히는 width값은 248px ㅇㅅㅇ ! Q. 왜 그럴까? content 200px + padding 20px*2 + border4px*2 = 248px 내가 원하는 값과는 다르게 나온다 너무 불편... ㅠㅠ |
내가 설정한 박스 사이즈는 200px이다. 내가 원하는대로 width값이 잘 잡혔다. |
그렇기 때문에, 코드를 적을 때
맨 처음에 전체 선택자를 사용해서 border-box 설정을 해주자.
▷ 전체 코드
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
border: 4px solid black;
padding: 20px;
margin: 30px;
}
.content-box {
box-sizing: content-box;
background-color: rgb(241, 102, 52);
}
.border-box {
box-sizing: border-box;
background-color: rgb(62, 241, 125);
}
</style>
</head>
<body>
<div class="box content-box">content-box(X)</div>
<div class="box border-box">♥border-box(O)♥</div>
</body>
</html>
'WEB > CSS_ concepts' 카테고리의 다른 글
| [CSS] Inline box type _ 다른 요소를 수평방향으로 밀어낼 수 있지만, 위아래로는 못한다. (0) | 2024.03.10 |
|---|---|
| [CSS] Normal Flow (0) | 2024.03.10 |
| [CSS] CSS 상속 _ 일반적으로 text 관련은 상속됨/ 배치와 관련된 것 Box model, position은 안됨 (0) | 2024.03.10 |
| [CSS] 명시도 _ 선택자 우선순위 _ 퀴즈 (0) | 2024.03.10 |
| [CSS] 명시도 _ 선택자 우선순위 4. 우선순위가 같다면, 마지막 꺼 (0) | 2024.03.10 |