여백(Margin)

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

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

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

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

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

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

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

복사
div {
  margin-top: 10px; /* 상단 여백: 10px */
  margin-right: 20px; /* 오른쪽 여백: 20px */
  margin-bottom: 10px; /* 하단 여백: 10px */
  margin-left: 20px; /* 왼쪽 여백: 20px */
}

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

1. 한 방향 설정:

복사
div {
  margin: 10px; /* 모든 방향에 10px의 여백 설정 */
}

2. 수직 및 수평 설정:

복사
div {
  margin: 10px 20px; /* 위/아래 여백: 10px, 좌/우 여백: 20px */
}

3. 개별 방향 설정:

복사
div {
  margin: 10px 20px 30px 40px; /* 위쪽, 오른쪽, 아래쪽, 왼쪽 여백: 10px, 20px, 30px, 40px */
}

margin: auto와 중앙 배치

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

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

복사
div {
  width: 100px; /* 너비 지정 */
  margin: 0 auto; /* 가로축으로 중앙 정렬 */
}

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