📌 Negative Margin 이란?
컨텐츠에는 시작 지점과 끝 지점이 있다.
negative margin 즉, 마진값을 음수로 주는것은 쉽게 말해 시작 지점과 끝 지점을 '속인다' 라고 생각하면 쉽다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrapper {
width: 200px;
height: 400px;
border: 5px solid blue;
margin: 100px auto;
}
.box {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
color: white;
font-weight: bold;
font-size: 2rem;
}
.one {
background-color: lightpink;
}
.two {
background-color: dodgerblue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box one">one</div>
<div class="box two">two</div>
</div>
</body>
</html>
현재 박스 2개가 있다. 시작지점과 끝 지점을 속인다는 것은 무엇을 의미할까?
여러 예제를 통해 이해를 해보겠다!
📌 1. one 박스에 margin-left: -50px;
현재 one 박스의 시작지점은 left 즉 왼쪽에 있다. 이 시작지점을 왼쪽으로 50px만큼 속이게 되는 것이므로 박스는 부모요소를 빠져나간것처럼 보이게된다.
하지만, 여기서 margin-right: -50px; 즉, 종료지점을 속인다고 해서 상자가 다시 오른쪽으로 가지는 않는다. 여기서 많이 헷갈리지만, 시작지점이 우선이 되고 끝 지점은 다음 컨텐츠의 시작지점에 영향을 준다고 생각하면 이해가 쉽다. 다음 예로 설명해보자
📌 2. one 박스에 margin-top / bottom -50px;
.one {
background-color: lightpink;
margin-top: -50px;
margin-bottom: -30px;
opacity: 0.8;
}
아까 one박스에 margin-right: -50px; 을 줬을때는 아무런 변화가 없었다. 하지만 위 그림에서 보면 one박스 바로다음에 two라는 박스가 시작하게 된다. 이 박스의 시작지점이 one박스 종료지점에서 시작하게 되기 때문에 two박스가 one박스를 겹치게 되는 현상이 일어난다. 또한 one 박스의 시작지점도 50px위로 앞 당겨줬으므로 one박스는 50px위로 two박스는 30px위로 올라가게 보이는 것이다.
안녕하세요. 프론트엔드 개발자 이현섭입니다.