CSS의 margin(마진) 속성은 요소 바깥쪽 여백, 즉 요소와 다른 요소 사이의 간격을 지정하는 속성입니다. 이 속성은 margin-top, margin-right, margin-bottom, margin-left 네 가지 개별 속성을 한 번에 설정할 수 있는 축약형(shorthand)이며, 물론 특정 면만 따로 지정하는 것도 가능합니다.
기본 문법
CSS margin 속성의 기본 문법은 다음과 같습니다.
Selector {
margin: /*값*/;
}
margin 값 작성 규칙
margin은 값의 개수에 따라 적용되는 방향이 달라지므로, 아래 규칙을 알아두면 코드를 훨씬 직관적으로 작성할 수 있습니다.
- 값 1개 : 네 방향(상·우·하·좌) 모두 동일하게 적용
- 값 2개 : 첫 번째 값은 상하, 두 번째 값은 좌우에 적용
- 값 3개 : 순서대로 상, 좌우, 하에 적용
- 값 4개 : 시계 방향으로 상, 우, 하, 좌에 각각 적용
또한 margin에는 음수 값도 허용됩니다. 음수 마진을 사용하면 요소를 겹치거나 원하는 방향으로 끌어당기는 레이아웃 효과를 만들 수 있습니다.
예제 1 : 기본 마진과 음수 마진 활용
다음 예제는 margin 속성의 다양한 사용법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10px 50px 20px;
padding: 1rem;
border: dashed;
}
p {
text-align: center;
}
#demo {
margin-left: -80px;
box-shadow: inset 0 0 10px brown;
}
</style>
</head>
<body>
<div></div>
<p>This is demo text.</p>
<p id="demo">Another demo text.</p>
<p>This is new demo text.</p>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제에서 #demo 문단에 margin-left: -80px가 적용된 것을 확인할 수 있습니다. 이처럼 음수 마진을 사용하면 요소를 왼쪽으로 당겨 다른 콘텐츠와 겹치는 효과를 낼 수 있습니다.
예제 2 : 리스트 항목에 마진 적용하기
다음 예제는 목록(list) 항목에 개별 마진 속성을 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: auto;
background-image: linear-gradient(to right, khaki, aliceblue, skyblue, rebeccapurple);
width: 20em;
}
li {
margin-top: 3px;
}
li + li {
margin-left: -20px;
}
li:last-child {
margin-left: 75px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<ul>
<li>This is demo list item.</li>
<li>This is another list item with different style.</li>
<li>This is our third demo text with another style.
</li>
</ul>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
여기서 눈여겨볼 점은 ul에 적용된 margin: auto입니다. 가로 폭(width)이 지정된 블록 요소에 좌우 마진을 auto로 설정하면 요소가 화면 중앙에 자동으로 배치되는데, 이는 실무에서 매우 자주 쓰이는 중앙 정렬 기법입니다.
정리
margin 속성은 웹 페이지 레이아웃에서 요소 간 간격을 조절하는 가장 기본적이면서도 강력한 도구입니다. 축약형 문법과 값의 개수별 적용 규칙을 익혀두면 CSS 코드를 더 간결하게 유지할 수 있고, 음수 값과 auto 값을 함께 활용하면 겹침 효과나 중앙 정렬처럼 다양한 레이아웃 연출도 손쉽게 구현할 수 있습니다.