표준 CSS 박스모델에서 요소의 전체적인 크기는 컨텐츠 박스 + 보더 박스 + 패딩 박스의 너비와 높이 값을 모두 더해 정해진다. 하지만 박스의 실제 크기를 얻기 위해 테두리와 패딩을 추가하는 것이 불편하다.
이러한 문제를 해결하기 위해 아래의 코드를 확인 해보자
<!DOCTYPE html>
<html lang="ko">
<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></title>
<style>
div {
border: 10px black solid;
padding: 10px;
/* box-sizing: border-box가 아니고 content-box인 경우 content의 영역만을 의미한다. */
/* 전체너비 = border + padding + content */
width: 100px;
height: 100px;
/* box-sizing: border-box; */
/* border 기준으로 width와 height를 잡습니다. */
/* 우리가 지정해준 width값이 전체너비가 되면 전체너비에는 border padding이 모두 포함된다. */
/* 그래서 크기가 늘어나지 않는다. */
margin: 10px;
}
</style>
</head>
<body>
<div>hello world</div>
<div>hello world</div>
</body>
</html>'Programming > Style' 카테고리의 다른 글
| RESET CSS (0) | 2022.09.08 |
|---|---|
| CSS란? (0) | 2022.09.08 |
| CSS 스타일 적용순서 (0) | 2022.09.08 |
| CSS margin 겹침현상 (0) | 2022.09.08 |
| CSS 꼭 알아야 될 개념 (0) | 2022.09.02 |