네거티브 마진
쉽게 사용하면, 마이너스 값으로 마진을 설정하는거다.
어떨 때 사용할 수 있나?
우리가 생각하는 마진은 요소와 요소 사이의 공간을 줄 때 사용한다.
이걸 반대로 동작하게 하는게 네거티브 마진인데, 공간이 마이너스로 중첩되어버린다! 그럼 어떻게 될까?
지붕을 뚫고 나간다!
아래 사진을 예시로 보자.
감자튀김 이미지에 margin-top을 줌으로써 이미지를 담고있는 부모div와 공간을 넣어주도록 하겠다.
.box img {
width: 500px;
height: auto;
margin-top: 30px;
}
위와같이 margin-top 공간이 생긴 것을 알 수 있다.
그렇다면 여기서 negative margin을 적용하여 이미지가 부모 div인 지붕을 뚫고 나가게 해보자!
.box img {
width: 500px;
height: auto;
margin-top: -200px;
}
이는 마치 -50만큼의 값이 지금 이 움직이는 요소의 시작점인것처럼 브라우저를 속이는 것이다.
다른 예시
main 컨테이너 안에 상하좌우로 패딩이 30px씩 들어가있는 상태에서,
hello world가 들어있는 h1태그만 양 옆의 패딩을 없애고싶다면?
예전에 나였다면
1. h1태그 기준으로, 아래 div박스를 또 나눠서(ㅜㅜ) 글이 시작되는 아래 div박스에만 패딩을 준다. 위 div는 따로 스타일링 한다.
2. main태그에 padding을 없애고(벌써 불행..) 안쪽 글씨들만 div로 묶어서 패딩주기..
이런 불행한 방법을 썼겠지만..
네거티브 마진을 사용하면 main태그에 적용된 양옆 패딩값을 똑같이 -마진으로 빼주면 된다...!!
h1 {
margin: 0 -30px
}
사용예시
빔캠프 종찬님이 공유해주신 사진. 디즈니 공식 홈페이지에서 네거티브 마진을 사용해서 글자들간의 vertical align을 맞춘 것을 볼 수 있다. (행복은 덤 ㅎㅎ)
CSS 초기버전부터 존재하던 개념이기 때문에 호환성문제가 없다(IE옛날버전까지 다 지원!!!)는 장점까지 있다. 앞으로 종종 사용해봐야겠다.
더 자세한 설명과 예시는 빔캠프 추천!!
https://www.youtube.com/watch?v=iP8CqsSdXT0&list=PLMv8nY90ATZWQ5fbLJIdGB6ujWlUB37qa&index=2
'Front-End Developer > CSS' 카테고리의 다른 글
background-image에 no-repeat이 안되요 - 초심자의 깜찍한 실수 (0) | 2022.04.19 |
---|---|
항상 헷갈리는 text-align, 딱 두 가지만 기억하자 (4) | 2022.04.19 |
그냥 꾸미면 되는게 아냐..? - input 체크박스 꾸미기 (2) | 2022.04.14 |
약방의 감초같은 image sprite기법으로 이모티콘 넣기 (2) | 2022.04.14 |
가운데정렬의 난 case 1 - 이미지와 텍스트 수직정렬하기 (0) | 2022.04.11 |