html & css/개념
CSS 박스 모델과 요소의 크기
by Doo Hee
2023. 7. 4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- padding-top: 10px -->
<!-- padding-right: 10px -->
<!-- padding-bottom: 10px -->
<!-- padding-left: 10px -->
<!-- padding: 10px; 한가지 값만 기록하면 4면 모두 동일한 값을 의미 -->
<!-- padding: 10px 5px 8px 7px; 순서는 top, right, bottom, left -->
<!-- padding: 10px 5px; 두개의 값만 기록하면 첫번째 값인 10px은 top, bottom, 두번째 값인 5px은 right, left -->
<!-- padding: 10px 5px 8px; 세개의 값을 기록하면 첫번째 값인 10px은 top, 두번째 값인 5px은 right, left, 세번째 값인 8px은 bottom -->
<!-- border, margin도 동일한 원리 -->
<!-- border-top, border-right, border-bottom, border-left -->
<!-- margin-top, margin-right, margin-bottom, margin-left -->
<div style="padding: 10px; border: 10px solid green; margin: 10px">
<div style="padding: 5px; border: 5px solid red; margin: 5px">
CSS 박스모델
</div>
</div>
</body>
</html>
<!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: 300px;
height: 100px;
margin: 10px;
padding: 10px;
border: 10px solid green;
} */
/* 어떤 것을 기준으로 사이즈(너비)를 정할건지 */
/* .box-cb {
box-sizing: content-box;
content-box를 default 값으로 사용
}
.box-bb {
box-sizing: border-box;
border까지 포함한 너비가 지정한 값으로 되게 한다.
} */
/* width, height */
/* px 단위 */
/* 퍼센트(%, 백분율), 부모 요소를 기준으로 상대 값 */
</style>
</head>
<body>
<div class="box-cb">CSS 박스 모델</div>
<div class="box-bb">CSS 박스 모델</div>
<div style="width: 100%; height: 200px; background-color: green">
<!-- 부모인 body 태그를 기준으로 100% -->
<div
style="
width: 50%;
max-width: 500px;
min-width: 200px;
height: 50%;
background-color: red;
"
></div>
<!-- 부모인 div 태그를 기준으로 50% -->
<!-- min과 max를 이용하여 너비를 조절할 수 있다. -->
</div>
</body>
</html>
