HTML5 & CSS3 배워보자 (15화 : 여백 관련 속성)
박스 모델의 여백인 마진과 패딩을 조절해 디자인 하는 법에 대해 공부해 보겠습니다. 마진과 패딩은 박스 모델에서 활용도가 높으며 웹 문서에서 이미지나 텍스트 등 여러 요소를 자유롭게 배치할 때 유용하게 사용됩니다.
1. 마진(margin) 속성
마진(margin) 속성은 HTML 요소 주위의 여백을 설정하는 데 사용됩니다. 마진은 요소 외부의 공간을 의미하며, 다른 요소들과의 간격을 조절하는 데 매우 유용합니다. 마진 속성은 네 가지 방향으로 개별 설정할 수 있으며, 간단한 단축 속성을 통해 한번에 설정할 수도 있습니다.
<기본형>
margin-top : <크기> | <백분율> | auto ;
margin-right : <크기> | <백분율> | auto ;
margin-bottom : <크기> | <백분율> | auto ;
margin-left : <크기> | <백분율> | auto ;
margin : <크기> | <백분율> | auto ;
<개별속성>
- margin-top : 요소의 상단 마진을 설정합니다.
- margin-right : 요소의 오른쪽 마진을 설정합니다.
- margin-bottom : 요소의 하단 마진을 설정합니다.
- margin-left : 요소의 왼쪽 마진을 설정합니다.
<예시>
div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
<단축속성>
- margin : 모든 방향의 마진을 한 줄로 설정할 수 있습니다.
<예시>
div {
margin: 10px; /* 모든 방향에 10px 마진 적용 */
}
div {
margin: 10px 20px; /* 상하 10px, 좌우 20px */
}
div {
margin: 10px 20px 30px; /* 상단 10px, 좌우 20px, 하단 30px */
}
div {
margin: 10px 20px 30px 40px; /* 상단 10px, 오른쪽 20px, 하단 30px, 왼쪽 40px */
}
<자동속성>
자동 마진은 주로 요소를 가운데 정렬할 때 사용됩니다. 특히 수평 중앙 정렬에 유용합니다. 예를 들어, 고정 너비를 가진 블록 요소를 부모 요소의 가운데에 배치하려면 다음과 같이 설정합니다.
<예시>
div {
width: 200px;
margin: 0 auto; /* 수평 중앙 정렬: 상하 0, 좌우 자동 */
}
<마진값의 유형>
- 픽셀(px) : 고정 크기.
- 퍼센트(%) : 부모 요소 크기에 대한 백분율.
- em : 요소의 폰트 크기에 상대적인 크기.
- rem : 루트 요소(html)의 폰트 크기에 상대적인 크기.
- vw, vh : 뷰포트 너비(viewport width)와 높이(viewport height)에 대한 백분율.
<예시>
div {
margin: 2em; /* 모든 방향에 2em 마진 적용 */
margin-top: 5%; /* 상단에 부모 요소 높이의 5% 적용 */
}
<마진병합>
인접한 블록 요소의 상하 마진이 병합(collapse)되어 더 큰 마진 값으로 결합되는 현상입니다.
<예시>
<style>
.box1 {
margin-bottom: 20px;
background-color: lightblue;
}
.box2 {
margin-top: 30px;
background-color: lightgreen;
}
</style>
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>이 경우 두 박스 사이의 마진은 20px와 30px 중 더 큰 값인 30px이 됩니다.
<상세예시>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
background-color: lightgray;
width: 80%;
margin: 20px auto; /* 수평 중앙 정렬, 상하 20px */
}
.box {
background-color: lightblue;
margin: 10px; /* 모든 방향에 10px 마진 */
padding: 20px; /* 모든 방향에 20px 패딩 */
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
<상세예시화면>
2. 패딩(Padding) 속성
padding 속성은 요소의 콘텐츠와 경계(border) 사이의 내부 여백을 설정하는 데 사용됩니다. padding 속성을 사용하여 네 방향(위, 오른쪽, 아래, 왼쪽)에 대한 여백을 각각 설정할 수 있습니다.
<기본형>
padding-top : <크기> | <백분율> | auto ;
padding-right : <크기> | <백분율> | auto ;
padding-bottom : <크기> | <백분율> | auto ;
padding-left : <크기> | <백분율> | auto ;
padding : <크기> | <백분율> | auto ;
<예시>
한 가지 값 : 모든 방향에 동일한 여백을 적용합니다.
padding: 10px;
두 가지 값 : 첫 번째 값은 위와 아래, 두 번째 값은 왼쪽과 오른쪽에 적용됩니다.
padding: 10px 20px;
세 가지 값 : 첫 번째 값은 위, 두 번째 값은 왼쪽과 오른쪽, 세 번째 값은 아래에 적용됩니다.
padding: 10px 20px 30px;
네 가지 값 : 각 값은 시계 방향으로 위, 오른쪽, 아래, 왼쪽 순서대로 적용됩니다.
padding: 10px 20px 30px 40px;
<패딩값의 유형>
- px : 픽셀 (예: 10px)
- em : 요소의 글꼴 크기 기준 (예: 2em)
- % : 부모 요소의 너비 기준 (예: 10%)
- rem : 루트 요소의 글꼴 크기 기준 (예: 1rem)
<상세예시>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Padding Example</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="box">This box has padding</div>
</body>
</html>
<상세예시화면>
예제에서, .box 클래스는 20px의 padding을 가지고 있으며, 이로 인해 내용이 박스의 경계로부터 20px 떨어져 배치됩니다.
※ 다음화에서는 "포지셔닝"에 대해서 알아보겠습니다!!
'HTML5 & CSS3' 카테고리의 다른 글
| HTML5 & CSS3 배워보자 (14화 : Border 관련 속성) (0) | 2024.06.03 |
|---|---|
| HTML5 & CSS3 배워보자 (13화 : 레이아웃을 위한 스타일) (0) | 2024.06.01 |
| HTML5 & CSS3 배워보자 (12화 : 색상 및 배경 표현) (0) | 2024.05.22 |
| HTML5 & CSS3 배워보자 (11화 : 목록 스타일) (0) | 2024.05.19 |
| HTML5 & CSS3 배워보자 (10화 : 문단 스타일) (0) | 2024.05.14 |
댓글