1. 문제상황
div 안에 div를 포함했는데, 내부에 있는 div가 원래 div의 영역을 벗어나서 출력되었다.
<소스코드>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
box-sizing: border-box;
width: 300px;
height: 200px;
padding: 20px;
border: 10px dotted green;
}
div div {
width: 300px;
height: 200px;
padding: 20px;
border: 10px dotted orange;
background-size: cover;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
<br>
</body>
</html><결과물>
2. 문제 원인
내부 div의 padding과 border가 차지하는 영역 때문에 생긴 문제 였다.
내부 div의 크기가 width: 300px; height: 200px; 이 되길 원했지만. 내부 div의 padding과 border 영역은 그것과 별개로 공간을 차지했기 때문에 그것을 포함하게 되면 내부 div가 외부 div을 넘어서 표시되었다.
padding과 border 영역이 차지하는 공간을 고려해서 width와 height를 수정해서 해결할 수 있었지만, 그렇게 번거로운 방법 대신 width와 height 값이 padding과 border 영역을 포함할 수 있게 하는 방법을 찾고 싶었다.
3. 문제 해결
CSS 속성 중에서 box-sizing 속성을 사용하면 된다.
box-sizing 속성은 테두리 영역의 크기를 결정주는 속성으로 content-box , border-box 속성 값이 있다.
content-box는 지정한 width와 height 값과 padding, border가 별개가 되고,
border-box는 지정한 width와 height 값에 padding과 border가 포함되게 한다.
따라서, box-sizing: border-box; 를 추가하게 되면 원하는 결과물을 얻을 수 있다.
<소스코드>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 300px;
height: 200px;
padding: 20px;
border: 10px dotted green;
}
div div {
box-sizing: border-box;
width: 300px;
height: 200px;
padding: 20px;
border: 10px dotted orange;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
<br>
</body>
</html><결과물>
'학습 정리 > 📦 기타' 카테고리의 다른 글
| [Node.js] MySQL 연결시 ER_NOT_SUPPORTED_AUTH_MODE 에러 원인과 해결법 (1) | 2022.08.04 |
|---|---|
| MySQL - 생활코딩 강의내용 정리 (0) | 2022.08.03 |
| Git 사용하기 2 - 버전관리 (0) | 2022.07.26 |
| Git 사용하기 1 - Git 설치와 Github 연동 (0) | 2022.07.26 |
| [C] 중위수식을 후위수식으로 변환하는 문제에서 단항연산자 처리 (0) | 2022.05.09 |