들어가기 전에
박스모델 강의에서 margin은 border 영역을 다른 요소와 구별하기 위해 쓰이는
빈 영역이라고 배웠습니다.
즉, 이 말은 다른 요소와의 간격을 만들 수 있다는 것입니다.
padding과 사용하는 방식이 매우 유사하지만 몇 가지 차이점이 있습니다.
이번 강의에서는 margin에 대해 자세히 배워보도록 하겠습니다.
핵심키워드
- margin collapse
- margin auto
학습하기
8) 속성-margin
margin 속성
기본 값 : 0
< 속성 값 >
length | 고정값으로 지정합니다. (ex. px, em ....) |
percent | 요소의 width에 상대적인 크기를 지정합니다. |
auto | 브라우저에 의해 계산된 값이 적용 됩니다. |
- margin-top border 영역의 위쪽 여백을 지정합니다.
- margin-right border 영역의 오른쪽 여백을 지정합니다.
- margin-bottom border 영역의 아래쪽 여백을 지정합니다.
- margin-left border 영역의 왼쪽 여백을 지정합니다.
syntax
margin: [-top] [-right] [-bottom] [-left];
0 10px 20px 30px /* 상, 우, 하, 좌 다름 */
0 10px 20px /* 좌, 우 같음 */
0 10px /* 상, 하 같음 & 좌, 우 같음 */
0 /* 상, 우, 하, 좌 모두 같음 */
padding과 마찬가지로 축약하여 사용할 수 있고, 상하, 좌우에 대해서 값이 같으면 하나로 합하여 사용할 수 있습니다.
margin에서는 수치 이외에 사용할 수 있는 'auto' 값이 있습니다.
- margin auto 기본적으로 브라우저에 의해 계산이 이루어지는데, 대부분의 경우 0(기본값) 또는 요소의 해당 측면에서 사용 가능한 공간과 같은 값을 가집니다. 이를 활용하여 수평 중앙 정렬을 할 수 있습니다. 아래 코드를 살펴봅시다.
margin-left: auto;
margin-right: auto;
좌우의 margin이 모두 auto로 적용 되었다면, 브라우저는 요소가 가질수 있는 가로 영역에서 자신의 width를 제외한 나머지 여백에 크기에 대해 균등 분할 하여 적용합니다. 이에 따라 요소는 수평 중앙 정렬이 됩니다. 상하의 경우 수직 중앙 정렬이 되지 않으며, 기본적인 플로우를 벗어나는 상황에 대해서 적용이됩니다. 이는 좀더 심화적인 개념이 필요하므로 기초에서는 수평 정렬에 대한 개념을 확실히 잡아두시길 바랍니다.
margin collapse(마진 병합)
마진 병합은 인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것을 의미합니다.
마진 병합이 다음 세가지의 경우에 일어납니다.
- 두 요소가 상하로 인접한 경우: 위 요소의 하단 마진과 아래 요소의 상단 마진의 병합이 일어납니다.
- 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소
- 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진 병합이 일어납니다.
- 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진 병합이 일어납니다.
- 내용이 없는 빈 요소의 경우: 해당 요소의 상단 마진과 하단 마진의 병합이 일어납니다.
마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않습니다.
마진 병합은 마진이 반드시 맞닿아야 발생하기 때문에 2,3번째의 경우 패딩 및 보더가 없어야 합니다.
- 마진 병합을 활용하여 첫 번째와 두 번째 컴포넌트의 조합이 다양한 경우 여백을 다르게 사용 할 수 있습니다.
코드실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style>
div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
/* 축약형 */
margin: 10px 20px ;
}
</style>
</head>
<body>
<div> css margin 속성 실습 </div>
</body>
</html>
생각해보기
- margin은 padding과 달리 음수 값을 지정할 수 있습니다.
- margin collapse는 절대 위치나 상대 위치가 주어진 요소들에서는 발생하지 않습니다.
참고자료
- Mastering margin collapsing
https://developer.mozilla.org
- The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.
- CSS Margin
https://www.w3schools.com
- Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
comment
요소의 바깥 여백
Padding과 달리 auto로 적용 가능. auto로 선언할 경우 브라우저가 여백을 계산하여 적용해줌
수평선(가로축)을 기준으로 정렬을 할 때 자주 사용. 이때 꼭 필요한 것이 width를 갖고있는 요소에 적용할 수 있음.(width가 없을 경우 기준이 없어서 0px로 잡힘)
margin collapse: 마진 병합
top, bottom이 겹치게 되면(수직으로 중첩된다면) margin 영역에서 더 큰 값으로 적용함
Margin
margin-left: auto;
margin-right: auto;
padding과는 달리 auto 값 설정 가능
div {
width: 200px;
margin: 0 auto;
}
width 값을 주고, margin: auto를 주면 브라우저가 계산해서
양옆(right, left) 여백을 주고 중앙 정렬이 되는 것을 볼 수 있음.
auto는 일단 가로축을 기준으로 하기 때문에 margin: 0 auto와 별 차이 없음.
margin collapse : 각 요소에 수직으로 중첩된 margin 영역에서 더 큰 값이 적용된다.
수강완료
브라우저 크기에 따라 유동적으로 설정하는 것이 필요한데,
처음 실습 할떄는 고정값이 편해 익숙해져서 계산이 좀 어려움
부모 자식 요소에 따른 % 크기 조절값을 설정하는 훈련이 필요할듯 함
마진 병합이게 좀 애매 한데스
margin은 padding과 다르게 auto 를 사용할 수 있으며
주로 중앙 정렬에 쓰인다. 단, width 값이 있어야한다. (없으면 가로 블록영역을 무한대로 채우기때문에 정렬 불가능)
padding은 collapse 로 인해 겹치는 부분은 더 큰 값만 적용된다.
21.12.07 꾸준이 해서 꼭 풀스텍 다 듣는다!
21.06.24
21.03.27
21.01.11
마진 콜렙스를 꼭 기억하자!