CSS - 여백: 초보자 가이드
안녕하세요, 미래의 CSS 마법사 여러분! 오늘 우리는 CSS 여백의 fascinante 세계로 뛰어들어 볼 것입니다. 코드를 한 줄도 작성해본 적이 없어도 걱정 마세요 - 이 여정에서 당신의 친절한 안내자가 되어드릴 테니, 마침내 프로처럼 여백을 조작할 수 있을 것입니다!
CSS 여백이란?
방에 가구를 배치할 때 각 가구와 벽 사이에 남긴 공간을 생각해보세요. 그게 바로 CSS에서 여백의 개념입니다. 여백은 요소 주위에 공간을 만들어, 다른 페이지 요소들과 분리시킵니다.
상자 모델: 새로운 최고의 친구
여백으로 넘어가기 전에 CSS 상자 모델에 대해 간단히 이야기해보겠습니다. 웹 페이지의 모든 요소는 실质적으로 상자입니다. 이 상자는 중앙에 콘텐츠를 가지고 있으며, 패딩, 경계선, 그리고 마지막으로 우리의 스타 - 여백으로 둘러싸여 있습니다.
+-------------------------------------------+
| 여백 |
| +-----------------------------------+ |
| | 경계선 | |
| | +-------------------------+ | |
| | | 패딩 | | |
| | | +--------------+ | | |
| | | | 콘텐츠 | | | |
| | | +--------------+ | | |
| | +-------------------------+ | |
| +-----------------------------------+ |
+-------------------------------------------+여백 문법: 공간의 레시피
이제 CSS로 여백을 추가하는 방법을 알아보겠습니다. 기본 문법은 간단합니다:
셀렉터 {
margin: 값;
}여기서 셀렉터는 스타일을 적용하고 싶은 HTML 요소이며, 값은 추가하고 싶은 여백의 양입니다.
가능한 값: 여백 도구箱
여러 가지 방법으로 여백을 설정할 수 있습니다:
| 값 유형 | 예시 | 설명 |
|---|---|---|
| 길이 | margin: 10px; |
여백을 특정 길이로 설정 |
| 백분율 | margin: 5%; |
여백을 포함 요소의 너비에 대해 설정 |
| 자동 | margin: auto; |
브라우저가 여백을 계산 |
| 상속 | margin: inherit; |
부모 요소의 여백을 상속 |
단일 값: 전천후
단일 값을 사용할 때, 모든 측면에 적용됩니다:
.box {
margin: 20px;
}이렇게 하면 요소의 모든 측면에 20픽셀의 여백이 추가됩니다. 요소 주위에 20픽셀의 '력장'을 두는 것과 같습니다!
두 가치: 상하와 좌우
이 두 가치를 사용하면 수직(상단과 하단)과 수평(좌측과 우측) 여백을 설정합니다:
.box {
margin: 10px 20px;
}이렇게 하면 상단과 하단에 10픽셀, 좌측과 우측에 20픽셀의 여백이 추가됩니다. 요소가 좀 더 공간을 가지게 만드는 것입니다.
네 가치: 시계 방향 접근
네 가치를 사용하면 각 측면을 개별적으로 설정할 수 있습니다:
.box {
margin: 10px 20px 15px 25px;
}순서는 항상 시계 방향입니다: 상단, 우측, 하단, 좌측. "TRouBLe" (Top, Right, Bottom, Left)를 생각하면 기억하기 쉬워집니다.
음수 여백: 규칙을 깨기
재미있는 사실 하나: 여백은 음수일 수 있습니다! 이는 요소를 더 가깝게 끌어당기거나 심지어 겹치게 만듭니다:
.overlap-box {
margin-top: -20px;
}이렇게 하면 요소를 20픽셀 올라가게 하여, 위의 요소와 겹치게 됩니다. 신중하게 사용하세요 - 강력한 힘에는 큰 책임이 따릅니다!
여백��합: 수직 여백의 기묘한 사례
이제 여백의 독특한 행동에 대해 이야기해보겠습니다:��합. 두 수직 여백이 만나면, 그들은 합쳐지지 않습니다 - 대신, 더 큰 여백이 이긴다. 예를 들어:
<style>
.box1 { margin-bottom: 20px; }
.box2 { margin-top: 30px; }
</style>
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>50픽셀의 간격을 기대할 수 있지만, 실제로는 30픽셀의 간격만이 남습니다. 더 큰 여백(30px)이 작은 여백을 "��합"시킨다.
여백 축약 속성: 단축키
보다 정밀한 제어를 위해 CSS는 각 측면에 대한 축약 속성을 제공합니다:
| 속성 | 설명 |
|---|---|
| margin-top | 상단 여백 설정 |
| margin-right | 우측 여백 설정 |
| margin-bottom | 하단 여백 설정 |
| margin-left | 좌측 여백 설정 |
.precise-box {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 25px;
}이렇게 하면 우리의 네 가치 예시와 같은 결과를 얻을 수 있지만, 각 측면을 개별적으로 변경할 수 있는 더 큰 유연성을 가집니다.
'auto' 값: 중앙 정렬 마법
여백의 가장 유용한 기술 중 하나는 요소를 수평으로 중앙 정렬하는 것입니다:
.center-me {
width: 300px;
margin: 0 auto;
}이렇게 하면 왼쪽과 오른쪽 여백을 auto로 설정하여 브라우저가 사용 가능한 공간을 균형 있게 분배하도록 하여 요소를 중앙에 정렬합니다.
결론: 주위의 공간 마스터링
이제 여러분은 CSS 여백의 세계로 첫 걸음을 내딛었습니다. 기억해 두세요, 웹 디자인은 아름답고 기능적인 공간을 만드는 것입니다. 여백은 이 공간을 제어하는 주요 도구입니다.
다양한 값을 연습하고, 음수 여백을 실험하고, 중앙 정렬의 마법을 잊지 마세요. 얼마 지나지 않아 페ksel-perfect 레이아웃을 손쉽게 만들 수 있을 것입니다.
기쁜 코딩을 기원하며, 여러분의 여백이 항상 적절하게 되기를 바랍니다!
Credits: Image by storyset