Negative margins(음수 마진)

Negative margins

이 포스팅에서는 음수마진이라고 Negative margins 에 대해 알아보도록 합니다.

음수 마진은 문서 내의 정상적인 흐름(document flow) 를 건들이지 않습니다.

다시말해, 요소를 이동하기 위해 음수 마진을 사용하면, 그 뒤에 오는 모든 요소들도 같이 이동하게 됩니다.

floats 이 적용되면 다르게 동작하므로 음수 마진을 사용할 경우에 좀 더 주의를 기울여야 합니다.

먼저 일반적인 요소인 static 요소에 음수마진을 사용하는 경우에 대해 알아보도록 하겠습니다.

static 요소는 일반적으로 float 이 적용되지 않은 요소라고 정의한다면, static 요소의 top/left 에 음수 마진을 주면, 그 방향으로 원소가 이동하게 됩니다.

예컨데, 요소에 margin-top:-20px; 을 선언하면 요소가 20px 위로 이동하게 됩니다.

하지만 bottom/right 에 음수 마진을 사용하면, 원소를 오른쪽이나 아래로 이동하는 것이 아니라, 이 요소 다음에 오는 요소를 끌어당기게 됩니다.

.box1 이라는 요소에 margin-bottom:-20px; 을 선언하면 이 요소 다음에 오는 요소가 있다면 그 모든 요소들을 20px 만큼 위로 끌어 올리게 됩니다.

하지만 음수 마진 bottom 을 적용한 .box1 요소는 전혀 이동하지 않습니다.

그리고 음수 마진을 적용하는 요소에 width 를 주지 않고, left/right 에 음수 마진을 사용하게 되면 엘리먼트의 width 를 넓히게 되는 효과가 나타납니다.

마치 마진이 padding 과 같이 동작하게 됩니다.

float 과 음수 마진 기법 정리

float 이 적용된 엘리먼트 다음에 나오는 요소(element)의 행동(동작)은 다음과 같습니다.

float 이 적용된 엘리먼트 다음에 나오는 정상적인 요소(float 이 적용되지 않은 요소)는 float 이 적용된 엘리먼트의 존재를 인식하지 못하고 자신의 상자 영역을 확보합니다.

하지만 float 이 적용된 엘리먼트의 영역은 침범하지 않습니다.

이 점을 이용하여 float 된 요소에 음수 마진을 적용할 수 있는데, float 의 반대 방향으로 음수 마진을 줘서 컨텐츠를 끌어당기는 효과를 나타낼 수 있습니다.

위의 내용을 숙지한 후 아래의 실제 적용한 예제들을 살펴보도록 합니다.

Negative margins & Box model

다음은 고정 레이아웃(유동 레이아웃도 가능)에서 여러 박스를 배치하는 경우 한 방향으로만 바깥여백을 주고 마진을 상쇄시키는 방법에 대해 알아봅니다.

위 내용 중 음수 마진을 적용하는 요소에 width 를 주지 않는 방법을 사용합니다.

음수 마진을 이용한 박스 배치 #1

See the Pen 음수마진을 이용한 박스 모델 배치 #1 by jaeheekim (@jaehee) on CodePen.

음수 마진을 이용한 박스 배치 #2 (박스 너비 픽셀 단위)

See the Pen 음수마진을 이용한 박스모델 배치 #2 by jaeheekim (@jaehee) on CodePen.

음수 마진을 이용한 박스 배치 #3(박스 너비 % 단위)

See the Pen 음수마진을 이용한 박스모델 배치 #3 by jaeheekim (@jaehee) on CodePen.

음수마진을 이용한 버튼 정렬

음수 마진을 이용하여 좌측, 중앙, 우측으로 버튼 정렬하는 효과에 대해 알아봅니다.

이 방법을 이용하면 버튼이 좌측, 중앙 정렬으로 이루어져 있는 경우 그리고 중앙, 우측만 있을 경우 또는 중앙에만 버튼이 있을 경우 등등의 모든 경우의 수에 대해 유연하게 대처 가능합니다.

See the Pen 음수마진을 이용한 버튼 정렬 by jaeheekim (@jaehee) on CodePen.

음수 마진을 이용한 Fluid layout 2단 컬럼 #1

다음의 예제는 position:relative 의 특성과 Negative Margins 을 이용하여 유연한 레이아웃을 정의한 타입입니다.

See the Pen fluid layout (음수 마진 이용) #2 by jaeheekim (@jaehee) on CodePen.

음수 마진을 이용한 Fluid layout 3단 컬럼 #2

See the Pen fluid layout (음수 마진 이용) #1 by jaeheekim (@jaehee) on CodePen.

Reference URL

1. The Positive Side of Negative Margins
2. Creating Liquid Layouts with Negative Margins
3. Horizontal Negative Margins

related links

1. 모바일 및 RWD 에서 음수 마진을 이용한 박스모델 레이아웃

Jaehee's WebClub