2024-10-10
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
background-color: lightgray;
}
.box1 {
width: 300px; /* 가로 너비 300px */
height: 200px; /* 세로 너비 200px */
background-color: tomato;
margin: 10px 20px 30px 40px;
}
.box2 {
width: 300px; /* 가로 너비 300px */
height: 200px; /* 세로 너비 200px */
background-color: yellowgreen;
padding: 10px 30px 30px;
box-sizing: border-box;
/*
box-sizing: border-box; : padding 시 늘어나는 요소의 크기를 기존에 설정한
크기로 자동 맞춤 하는 속성
*/
}
</style>
</head>
<body>
<!--
CSS의 여백
1. margin(요소의 바깥쪽 여백)
- 요소의 바깥쪽 여백을 지정하는 속성.
- 단위 : px, em, cm 등의 단위로 지정.
- 바깥쪽 여백은 요소와 요소 사이의 간격(거리, 공간)을
생성할 때 사용함.
- 속성에는 상단, 오른쪽, 하단, 왼쪽 달게 지정할 수 있음.
- 사용법
margin : 10px 20px 30px 40px
==> 상단, 오른쪽, 하단, 왼쪽(시계 방향으로 설정)
margin : 10px 20px 30px
==> 상단, [오른쪽, 왼쪽], 하단
margin : 10ps 20ps
==> [상단, 하단} [오른쪽, 왼쪽]
margin : 10px
==> [상단, 오른쪽, 하단, 왼쪽]
2. padding(요소의 안쪽 여백)
- 요소의 안쪽 여백을 지정하는 속성.
- 단위 : px, em, cm 등의 단위로 지정.
- % : 너비를 백분율로 지정도 가능함.
- 사용법
padding : 10px 20px 30px 40px
==> 상단, 오른쪽, 하단, 왼쪽(시계 방향으로 설정)
padding : 10px 20px 30px
==> 상단, [오른쪽, 왼쪽], 하단
padding : 10ps 20ps
==> [상단, 하단} [오른쪽, 왼쪽]
padding : 10px
==> [상단, 오른쪽, 하단, 왼쪽]
-->
<div class="box1">1</div>
<div class="box2">2</div>
</body>
</html>
