1. 비쥬얼스튜디오코드 프로그램으로 수업내용 복붙
2. 미리보기로 활용 복습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS - 영역 관련 스타일</title>
<style>
.div-area {
background-color: aquamarine;
width: 100px;
height: 100px;
border: 10px solid red;
}
#pd1 {
padding: 100px;
}
#pd2 {
padding-top: 100px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 10px;
}
#pd3 {
/* top right bottom left (위에서부터 시계방향)*/
padding: 100px 20px 30px 10px;
/* 위/아래 좌/우 */
padding: 50px 25px;
}
#mg1 {
margin: 50px;
}
#mg2 {
margin-top: 100px;
margin-left: 50px;
margin-bottom: 20px;
}
#mg3 {
/* top right bottom left */
/* margin: 50px 30px 20px 10px; */
margin: auto; /* 좌우 기준 가운데 정렬 */
}
</style>
</head>
<body>
<h1>여백 및 간격 관련 스타일</h1>
<h2>요소 영역 --> content(내용) + padding(여백) + border(테두리)</h2>
<h4>기준 div</h4>
<div class="div-area">내용 부분</div>
<h3>padding</h3>
<p>content(내용)영역과 border(테두리)영역 사이의 거리(여백)을 조절하는 스타일 속성</p>
<div class="div-area" id="pd1">컨텐츠영역</div> <br>
<div class="div-area" id="pd2">컨텐츠영역</div> <br>
<div class="div-area" id="pd3">컨텐츠영역</div>
<hr>
<h3>margin</h3>
<p>다른 요소와의 간격을 조정할 때 사용하는 스타일 속성</p>
<div class="div-area" id="mg1">컨텐츠영역</div> <br>
<div class="div-area" id="mg2">컨텐츠영역</div> <br>
<div class="div-area" id="mg3">컨텐츠영역</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
'##CSS' 카테고리의 다른 글
| 배경 관련 스타일 (0) | 2024.10.23 |
|---|---|
| 테두리 관련 스타일 (0) | 2024.10.22 |
| 목록 관련 스타일 (0) | 2024.10.20 |
| 텍스트 관련 스타일 (2) | 2024.10.19 |
| 글꼴 관련 스타일 (0) | 2024.10.18 |