여백(Margin)
CSS에서 margin
은 요소의 외부 여백을 의미합니다. margin 요소와 그 주변의 다른 요소들 사이의 공간을 생성합니다.
margin은 요소의 실제 크기에 영향을 주지 않습니다.
개별 여백 설정
margin
은 4개의 하위 속성으로 나뉩니다.
-
margin-top : HTML 요소의 상단 여백 설정
-
margin-right : HTML 요소의 오른쪽 여백 설정
-
margin-bottom : HTML 요소의 하단 여백 설정
-
margin-left : HTML 요소의 왼쪽 여백 설정
margin 속성 사용 예시
div { margin-top: 10px; /* 상단 여백: 10px */ margin-right: 20px; /* 오른쪽 여백: 20px */ margin-bottom: 10px; /* 하단 여백: 10px */ margin-left: 20px; /* 왼쪽 여백: 20px */ }
상하좌우 여백 한 번에 지정
margin
속성만으로 모든 방향의 여백을 한 번에 설정할 수 있습니다.
한 방향 설정
한 방향만 설정하려면, margin
속성에 숫자 하나만 입력합니다.
한 방향 설정 예시
div { /* 모든 방향에 10px의 여백 설정 */ margin: 10px; }
수직 및 수평 설정
수직 및 수평 여백을 설정하려면, margin
속성에 2개의 숫자를 입력합니다.
수직 및 수평 설정 예시
div { /* 위/아래 여백: 10px, 좌/우 여백: 20px */ margin: 10px 20px; }
개별 방향 설정
모든 방향을 개별적으로 설정하려면, margin
속성에 4개의 숫자를 입력합니다.
CSS
div { /* 위쪽, 오른쪽, 아래쪽, 왼쪽 여백: 10px, 20px, 30px, 40px */ margin: 10px 20px 30px 40px; }
margin: auto와 중앙 배치
margin: auto
는 HTML 요소를 가로 방향으로 중앙에 배치합니다.
가로 중앙 배치
블록 수준 요소(예: div
)를 가로축으로 중앙 정렬하려면, 해당 요소에 너비(width
)를 지정하고 margin
속성을 0 auto
로 설정합니다.
CSS
div { width: 100px; /* 너비 지정 */ margin: 0 auto; /* 가로축으로 중앙 정렬 */ }
세로 중앙 배치
margin: auto
만으로는 HTML 요소를 세로축으로 중앙 정렬할 수 없습니다. 세로 중앙 정렬은 뒤에 설명할 Flexbox나 Grid와 같은 레이아웃을 활용해야 합니다.
Mission
0 / 1
빈칸에 가장 알맞은 CSS 속성은 무엇일까요?
CSS에서 여백을 설정하기 위해서는 속성을 사용합니다.
padding
border
margin
width
학습 자료
AI 튜터
디자인
업로드
수업 노트
즐겨찾기
도움말