[ HTML & CSS ] 레이아웃의 핵심, margin (negative margin)

 

빔캠프님 특강 내용을 바탕으로 margin에 대해서 실습해 보며 알게 된 내용들을 정리해보려 한다.

 

 

 

📍 margin

margin은 우리가 알고 있듯 요소와 요소 사이의 공간을 띄울 때 많이 사용한다.

margin을 조금 더 자세히 이해해 보자.

 

✔️ margin 이해하기

 

요소에 마진을 주면 차지하고 있는 공간만 늘어날 뿐 실제의 콘텐츠의 크기는 달라지지 않는다.

마진은 단순히 여백이라기보다는 차지하고 있는 공간과 보이는 디자인을 별개로 가져가게 할 수 있는 것이다.

 

레이어를 두 개라고 생각하면 편한데,

앞단은 보여지는 디자인이, 뒷단은 마진값을 준 실제로 차지하고 있는 공간이다.

요소가 차지하고 있는 공간이 달라진 거지 보이는 비주얼이 달라진 게 아니다.

이 두 가지를 서로 다르게 가져갈 수 있는 게 마진의 핵심이다.

 

 

 

✔️ negative margin 이해하기

 

마진값은 양수값으로만 줘야 하는 것은 아니다. 

음수값인 마진을 네거티브 마진이라고 하며,

이를 이용해 우리가 원하는 여러 디자인을 만들어 낼 수 있다.

 

1️⃣  예제

아래는 기본 상태의 고양이 카드이다.

이 상태에서 고양이 이미지 top에 -50px의 마진값을 주면,

마진을 양수값으로 준 것과 반대로 이렇게 이미지가 밖으로 튀어나간 것처럼 보이게 된다.

마찬가지로 고양이 이미지 bottom에도 -50px만큼의 네거티브 마진을 주게 되면

이렇게 다음 요소들이 위로 올라오는 것을 볼 수 있는데,

여기서 고양이 이미지는 보이는 이미지 자체를 변형한 것은 아니기 때문에

핑크박스(마진값)를 합한 전체 이미지가 그대로 보이고,

실제로 이미지는 노란 박스만큼의 공간을 차지하고 있는 것이다.

네거티브 마진을 줬기 때문에 브라우저는 마진값에 따라 이미지가 -50px 된 곳에서 끝난다고 생각해

그다음 마크업 요소들이 겹쳐 보이게 된다.

저렇게 위 바깥으로 튀어나간 이미지는 공간을 차지하고 있지 않기 때문에 카드 컨테이너에 margin-top: 0을 준다면 위로 나간 만큼 이미지가 잘리게 된다.

 

 

2️⃣ 예제

아래와 같이 콘텐츠 margin-top에 네거티브 마진값을 줘서 뒤의 이미지와 겹쳐 보이는 효과를 줄 수 있다.

2번째 단락에 너비값을 50%로 주고, margin-left에 네거티브 마진값을 줬더니

아래와 같이 단락이 마진값만큼 왼쪽으로 밀리게 된 걸 볼 수 있다.

개발자 도구를 확인해 보니 실제 크기는 주황색으로 표시되는 것과 같이 마진으로 나간 만큼을 포함하지 않고 있다. 

 

다시 단락의 width를 auto로 설정하고 양 사이드에 네거티브 마진값을 주면

아래와 같이 보여지는 것과 다르게 실제로는 주황색 박스만큼의 공간을 차지하고 있다.

* width: auto는 부모 콘텐츠 너비의 100%

---

 

이를 응용해서 호버 됐을 때 네거티브 마진값을 적용해 준다면 아래와 같은 효과를 줄 수 있다.

 

---

 

지금까지 마진을 이렇게 신경 쓰며 코드를 작성한 적이 없었는데...

내가 알고 있던 마진에 대해 보다 깊은 개념들을 이해하는데 많은 도움을 받았고,

마진을 사용해서 다양하게 응용할 수 있던 점이 너무나도 새로웠다!