CSS - 음수 마진

HTML&CSS

심재철 2019. 4. 24. 20:25

B의 왼쪽에 -50 마진을 주고, 오른쪽에도 -50을 줬을때 위와 같이 배열 된다.

C의 왼쪽 마진을 -50을 줘야만 위처럼 만들어질것 같은데 B의 오른쪽에 -50을 준거랑 C의 왼쪽에 -50을 준거랑 똑같이 동작하는것이 신기하다.

또한 마크업은 항상 같은 우선순위라면 더 아래에 선언된 엘리먼트가 화면에서 위에 올라간다. 그래서 A > B > C순서대로 쌓여진걸 볼 수 있다.

위와 같은 디자인이 있을때 Map부분의 양옆을 꽉 채우고 싶을때도 네거티브 마진을 활용할 수 있다.

:hover 가상 선택자를 활용하면 마우스를 가져다 댔을때 위와 같이 확대 되는 디자인을 할 수 도 있다.

이 방법은 예전부터 존재했던 방법이고 웹 표준이기 때문에 마음 놓고 쓰면 된다.