오늘은 CSS에서 여백(padding과 margin)에 대해 알아보겠습니다. 여백은 웹 페이지의 요소 간의 공간을 조절하는 데 중요한 역할을 합니다.
이 블로그에서는 인라인 스타일을 사용하는 방법과 auto 속성에 대해서도 설명하겠습니다.
1. 여백의 기본 개념
- Padding(패딩): 요소의 내용과 테두리 사이의 공간입니다. 내부 여백을 조절하여 텍스트와 요소 경계 간의 간격을 조절할 수 있습니다.
- Margin(마진): 요소와 다른 요소 간의 외부 공간입니다. 마진을 통해 요소 간의 간격을 조절할 수 있습니다.
2. 인라인 스타일 사용하기
인라인 스타일은 HTML 태그에 직접 CSS 스타일을 적용하는 방법입니다. 인라인 스타일은 특정 요소에만 적용되므로, 전체 스타일시트에 영향을 주지 않습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 여백 예제</title>
</head>
<body>
<div style="padding: 20px; margin: 10px; background-color: lightblue;">
패딩과 마진을 가진 박스입니다.
</div>
</body>
</html>위 예제에서 padding: 20px;은 내부 여백을 20픽셀로 설정하고, margin: 10px;은 외부 여백을 10픽셀로 설정합니다.
3. Padding과 Margin의 차이점
- Padding: 요소 내부의 내용과 경계 간의 공간입니다. 패딩이 추가되면 요소의 크기가 커집니다.
- Margin: 요소와 다른 요소 간의 공간입니다. 마진이 추가되면 요소의 위치가 이동합니다.
예제: Padding과 Margin의 효과
<div style="padding: 20px; margin: 20px; background-color: lightgreen;">
이 박스는 패딩과 마진을 사용합니다.
</div>위의 박스에서 패딩은 내용과 테두리 간의 공간을 조절하고, 마진은 박스와 다른 요소 간의 공간을 조절합니다.
4. auto 속성 사용하기
CSS에서 margin: auto; 속성은 요소를 수평 중앙 정렬하는 데 유용합니다. 이 속성을 사용하면, 여백이 자동으로 계산되어 요소가 부모 요소의 중앙에 배치됩니다.
예제: margin: auto;로 중앙 정렬하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>중앙 정렬 예제</title>
<style>
.centered-box {
width: 50%;
margin: auto; /* 수평 중앙 정렬 */
padding: 20px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="centered-box">
이 박스는 중앙에 정렬되어 있습니다.
</div>
</body>
</html>위 예제에서 .centered-box 클래스에 margin: auto;를 설정하여 박스를 수평 중앙에 정렬했습니다.
CSS에서 padding과 margin은 요소 간의 간격을 조절하는 데 매우 중요합니다. 인라인 스타일을 사용하여 쉽게 적용할 수 있으며, margin: auto; 속성을 사용하면 요소를 중앙에 정렬하는 데 유용합니다.
다양한 여백을 활용하여 웹 페이지 디자인을 더욱 매력적으로 만들어보세요!
구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.
Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.
Tester Share [테스터쉐어] - Google Play 앱
Tester Share로 Google Play 앱 등록을 단순화하세요.
play.google.com
'Web Publishing > CSS' 카테고리의 다른 글
| CSS 규칙: 초보자를 위한 쉬운 가이드 (1) | 2024.10.01 |
|---|---|
| CSS 기본 문법 및 속성 정리 - 초보자도 바로 따라 할 수 있는 가이드 (1) | 2024.09.27 |
| CSS에서 크기 조절하기 - 초보자도 바로 따라 할 수 있는 가이드 (0) | 2024.09.27 |
| CSS에서 글 정렬 방법 - 초보자도 바로 따라 할 수 있는 가이드 (0) | 2024.09.27 |
| CSS에서 글자 크기와 굵기 설정하기 - 초보자도 바로 따라 할 수 있는 가이드 (0) | 2024.09.27 |
