margin 속성 사용법
<head>
html {
background-color: blueviolet;
}
div {
height: 150px;
width: 150px;
background-color: white;
}
</head>
<body>
<div>
</div>
</body>위의 코드로 html 문서를 작성하고 웹 브라우저를 통해 실행하면 body 태그에 웹 브라우저에 추가한 css가 보인다.
사용자 에이전트 스타일시트라는 부분이 바로 내가 입력한 것이 아니라 웹 브라우저에서 html 파일을 실행할 때 스스로 추가하는 css이다. 여기서 보면 margin 이라는 속성이 8px이라는 값을 가진것으로 나온다. 이것이 실행되어 보이는 화면이 바로 아래의 이미지이다.
이미지를 보면 위쪽과 왼쪽에 일정부분의 공백이 있고 흰색의 div 영역이 있는것을 볼 수 있다. 이것이 바로 margin이 적용되었기 때문에 나타나는 현상이다. 여기서 margin은 block 요소가 가지는 속성 중 하나로 block 요소의 경계 바깥의 공간을 의미한다. margin의 값을 0으로 두면 아래와 같이 보인다.
위에서와 달리 위쪽 및 왼쪽에 보라색의 공간이 사라진 것을 확인할 수 있다.
또한 사용자 에이전트 스타일시트 부분의 margin 대신 직접 추가한 body 태그의 margin : 0이 잘 적용되어있는 것도 확인할 수 있다.
여기서 margin을 위쪽, 오른쪽, 아래쪽, 왼쪽 모두 다르게 주는 방법이 있다.
/* 첫 번째 방법 */
body {
margin: 5px 10px 15px 20px;
}
/* 두 번째 방법 */
body {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}
두 가지 방법 모두 body태그 위쪽에 5px, 오른쪽에 10px, 아래쪽에 15px, 왼쪽에 20px의 margin을 주는 방법이다. 만약 margin이라는 속성으로 5px의 값을 준다면 4방향 모두 5px의 margin을 가진다. 5px 10px 이라는 값을 주면 위아래는 5px, 좌우는 10px의 margin을 가지게 된다. 4방향 모두 다른 값을 주고싶다면 margin에 위쪽부터 시계방향으로 공백을 주고싶은 양을 적어넣으면 된다. 위쪽 오른쪽 아래쪽 왼쪽 순서이다.
body {
margin: 5px; /* 4방향 모두 5px */
margin: 5px 10px; /* 위아래 5px, 좌우 10px */
margin: 5px 10px 15px; /* 위 5px, 좌우 10px, 아래 15px */
margin: 5px 10px 15px 20px; /* 위 5px, 오른쪽 10px, 아래 15px, 왼쪽 20px */
}
collapsing margins 현상
위의 이미지에서 흰색 부분은 div태그, 하늘색 부분은 body태그로 만들어진 영역이다. 현재 div태그와 body태그의 위아래 경계가 같은 상황이다. 이 때 만약 div태그에 margin을 추가하게 되면 div 태그와 body태그의 margin은 하나로 취급된다.
body {
background-color: aqua;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}
div {
margin: 80px 10px;
height: 150px;
width: 150px;
background-color: white;
}
위의 결과는 div 태그에 상하부분 margin을 80px로 준 상황이다. 하지만 흰색 부분은 하늘색 부분과 조금도 떨어지지 않았다. 즉 위에서 설명했듯 하나로 취급되어 body 태그 자체가 html 영역의 위에서 80px 떨어지게 되었다. 이 상태에서 body의 margin을 지워도 형태는 그대로 유지된다. 이를 collapsing margins 현상이라 부르며 위, 아래쪽에서만 일어난다.
html {
background-color: blueviolet;
}
body {
background-color: aqua;
margin: 0;
}
div {
margin: 80px 20px;
height: 150px;
width: 150px;
background-color: white;
}
이번에는 body 태그의 margin을 0으로 주고 div 태그의 margin을 80px 20px 로 주었다.
그 결과 body의 좌우 부분은 html 태그와 잘 붙어있다. 하지만 위아래 부분은 80px 만큼 떨여져있는데 이것이 바로 div 태그에 주어진 margin: 80px 의 영향이다.
div의 경우 좌우 부분은 20px만큼 잘 떨어져있으나 위아래의 경우 body 태그와 하나로 합쳐져 딱 붙어있는 형태가 된다.
'TIL > CSS' 카테고리의 다른 글
| inline-block의 사용과 문제점 (0) | 2023.07.28 |
|---|---|
| inline 요소에서의 padding과 margin (0) | 2023.07.25 |
| 모든 태그에 css 속성을 적용하는 방법 (0) | 2023.07.24 |
| border와 border-style (0) | 2023.07.23 |
| padding의 개념과 id로html에 css 주입하는 방법 (0) | 2023.07.22 |
| display속성으로 block, inline 제어 (0) | 2023.07.20 |
| css 개념 정리 (0) | 2023.07.19 |
| css를 html에 적용하는 방법 (0) | 2023.07.12 |
댓글