lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroCssChapter2Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter3Title

webIntroCssChapter4Title

webIntroCssChapter5Title

# 여백(Margin)

CSS에서 `margin`은 요소의 외부 여백을 의미합니다. margin 요소와 그 주변의 다른 요소들 사이의 공간을 생성합니다.

margin은 요소의 실제 크기에 영향을 주지 않습니다.

 

## 개별 여백 설정

`margin`은 4개의 하위 속성으로 나뉩니다.

- *margin-top* : HTML 요소의 상단 여백 설정

- *margin-right* : HTML 요소의 오른쪽 여백 설정

- *margin-bottom* : HTML 요소의 하단 여백 설정

- *margin-left* : HTML 요소의 왼쪽 여백 설정

 

```css title="margin 속성 사용 예시"
div {
 margin-top: 10px; /* 상단 여백: 10px */
 margin-right: 20px; /* 오른쪽 여백: 20px */
 margin-bottom: 10px; /* 하단 여백: 10px */
 margin-left: 20px; /* 왼쪽 여백: 20px */
}
```

 

## 상하좌우 여백 한 번에 지정

`margin` 속성만으로 모든 방향의 여백을 한 번에 설정할 수 있습니다.

 

### 한 방향 설정

한 방향만 설정하려면, `margin` 속성에 숫자 하나만 입력합니다.

```css title="한 방향 설정 예시"
div {
 /* 모든 방향에 10px의 여백 설정 */
 margin: 10px;
}
```

 

### 수직 및 수평 설정

수직 및 수평 여백을 설정하려면, `margin` 속성에 2개의 숫자를 입력합니다.

```css title="수직 및 수평 설정 예시"
div {
 /* 위/아래 여백: 10px, 좌/우 여백: 20px */
 margin: 10px 20px;
}
```

 

### 개별 방향 설정

모든 방향을 개별적으로 설정하려면, `margin` 속성에 4개의 숫자를 입력합니다.

```css title="CSS"
div {
 /* 위쪽, 오른쪽, 아래쪽, 왼쪽 여백: 10px, 20px, 30px, 40px */
 margin: 10px 20px 30px 40px;
}
```

 

## margin: auto와 중앙 배치

`margin: auto`는 HTML 요소를 가로 방향으로 중앙에 배치합니다.

 

## 가로 중앙 배치

블록 수준 요소(예: `div`)를 가로축으로 중앙 정렬하려면, 해당 요소에 너비(`width`)를 지정하고 `margin` 속성을 `0 auto`로 설정합니다.

```css title="CSS"
div {
 width: 100px; /* 너비 지정 */
 margin: 0 auto; /* 가로축으로 중앙 정렬 */
}
```

 

## 세로 중앙 배치

`margin: auto`만으로는 HTML 요소를 세로축으로 중앙 정렬할 수 없습니다. 세로 중앙 정렬은 뒤에 설명할 Flexbox나 Grid와 같은 레이아웃을 활용해야 합니다.

CSS에서 `margin` 속성은 요소의 가장자리 외부 여백을 조절하는 데 사용됩니다. 이는 요소의 실제 크기에 영향을 주지 않으며, 요소와 주변 요소들 사이의 공간을 확보하는 역할을 합니다.

### 빈칸에 가장 알맞은 CSS 속성은 무엇일까요?