CSS를 활용하면 요소의 개별 면 주변 공간을 세밀하게 제어할 수 있습니다. CSS의 margin 속성은 margin-top(위쪽), margin-right(오른쪽), margin-bottom(아래쪽), margin-left(왼쪽) 네 가지 하위 속성을 한 번에 다룰 수 있는 축약형(shorthand) 속성입니다. 특히 마진에는 음수 값도 허용되므로, 이를 활용하면 요소를 의도적으로 겹치게 배치하는 등 다양한 레이아웃 연출이 가능합니다.
문법(Syntax)
CSS margin 관련 속성의 기본 문법은 다음과 같습니다.
Selector {
margin-top: /*값*/
margin-right: /*값*/
margin-bottom: /*값*/
margin-left: /*값*/
}
각 값에는 px, em, rem, % 등의 단위와 auto 키워드를 사용할 수 있으며, 아래 예제들을 통해 실제 적용 방법을 살펴보겠습니다.
예제 1: 방향별 마진 값 지정
다음 예제에서는 세 개의 div 요소에 서로 다른 방향의 마진 값을 적용하여, 각 요소가 화면에서 다른 위치에 배치되도록 구성했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin-left: auto;
margin-bottom: 4em;
width: 30%;
padding: 0.6rem;
box-shadow: inset 0 0 3px turquoise;
outline: thin dotted;
text-align: center;
}
div + div {
margin-right: 30%;
box-shadow: inset 0 0 6px teal;
}
div + div + div {
margin-left: 45%;
margin-top: -190px;
box-shadow: inset 0 0 6px orange;
}
</style>
</head>
<body>
<div>
This is demo text
</div>
<div>One (different margins)</div>
<div>Two (different margins)</div>
</body>
</html>
실행 결과
첫 번째 div는 margin-left: auto 덕분에 오른쪽으로 정렬되고, 두 번째 div는 왼쪽 여백이 확보된 채 배치됩니다. 세 번째 div에는 margin-top: -190px라는 음수 값이 적용되어 위쪽으로 크게 당겨지면서 앞선 요소와 겹치는 효과가 나타납니다.
예제 2: 백분율(%) 단위와 음수 마진 활용
마진 값은 부모 요소 너비를 기준으로 하는 백분율(%)로도 지정할 수 있습니다. 아래 예제는 % 단위의 마진과 음수 마진을 조합해 세 개의 빈 div를 대각선 형태로 배치한 사례입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin-top: 7%;
margin-left: 25%;
margin-bottom: -3em;
width: 40px;
height: 40px;
padding: 0.6rem;
box-shadow: inset 0 0 3px turquoise;
border-top-right-radius: 100px;
}
div + div {
margin-right: 30%;
border-top-right-radius: unset;
border-top-left-radius: 100px;
box-shadow: inset 0 0 6px teal;
}
div + div + div {
margin-left: 25%;
margin-top: -140px;
box-shadow: inset 0 0 6px orange;
border-bottom-right-radius: 100px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
실행 결과
이처럼 margin-top, margin-right, margin-bottom, margin-left를 개별적으로 조합하면 요소 하나하나의 위치를 정밀하게 조정할 수 있습니다. 반응형 레이아웃에서는 % 단위를, 고정 크기 디자인에서는 px·em·rem 단위를 상황에 맞게 선택하는 것이 좋습니다.