컴퓨터/CSS
[CSS] 영역 관련 스타일
peridott
2024. 6. 27. 17:50
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>영역 관련 스타일</title>
<style>
.test {
width: 100px;
height: 100px;
background-color: darkkhaki;
border: 10px solid;
}
</style>
</head>
<body>
<h1>여백 및 간격 관련 스타일</h1>
<h2>요소선택 == content(내용) + padding(안쪽여백) + border(테두리)</h2>
<h4>div</h4>
<div class="test">기준 div</div>
<h3>padding</h3>
<p>
내용물 영역(content)과 테두리 영역(border)사이의 거리(여백)을 조절하는 스타일
</p>
<div class="test" id="test1">컨텐츠영역</div><br>
<div class="test" id="test2">컨텐츠영역</div><br>
<div class="test" id="test3">컨텐츠영역</div>
<!----------------------------------- style ----------------------------------->
<style>
#test1 {
padding: 100px; /* 모든 여백 */
}
#test2 {
padding-top: 100px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 10px;
}
#test3 {
padding: 20px 50px; /* 위 아래(20px), 좌우(50px) */
padding: 20px 50px 100px; /* 위(20px), 아래(100px), 좌우(50px) */
padding: 100px 20px 30px 10px; /* test2와 똑같음. 위에서부터 시계방향으로 돌아감 */
}
</style>
<br><br>
<h3>margin</h3>
<p>
요소들 간의 간격을 조정할 때 사용
</p>
<div class="test" id="test4">컨텐츠영역</div>
<div class="test" id="test5">컨텐츠영역</div>
<div class="test" id="test6">컨텐츠영역</div>
<!----------------------------------- style ----------------------------------->
<style>
#test4 {
margin: 50px;
}
#test5 {
margin-top: 30px;
margin-bottom: 50px;
margin-left: 10px;
}
#test6 {
margin: 30px 50px 80px 100px;
margin: auto; /* 좌우를 기준으로 창의 가운데 배치 */
}
</style>
</body>
</html>
