○ margin 속성의 이해
margin은 각 요소 사이의 간격을 조절할 수 있는, 요소 주변의 여백의 크기를 의미합니다. margin은 border 관련 속성들과 마찬가지로 margin 값을 일괄로 적용하거나, margin-위치를 통해서 개별적으로 지정할 수 있습니다.
선택자 {
margin: 크기 | 백분율 | auto;
}
border 속성 값을 지정할 때와 마찬가지로, margin의 속성 값은 한 개부터 네 개까지 작성하는 개수에 따라서 적용 규칙이 달라진다. border와 동일하므로 이전의 내용도 함께 참고하시기 바랍니다.
#margin1 { margin: 50px; }
#margin2 { margin: 30px 50px; }
#margin3 { margin: 30px 20px 50px; }
#margin4 { margin: 30px 50px 30px 50px; }
위의 id 기준으로 margin1은 네 개의 방향이 모두 50px로 적용된다. margin2의 경우 top+bottom은 30px / left+right는 50px로 적용된다. margin3의 경우 top 30px, right 20px, bottom + left는 50px로 적용된다. margin4는 당연히 top 30px, right 50px, bottom 30px, left 50px가 적용됩니다.
○ margin으로 문서 위치 가운데 정렬하기
텍스트 요소를 정렬할 때는, text-align 속성을 사용해서 정렬을 진행하게 됩니다. 그런데, 어떤 HTML문서 레이아웃 전체를 '화면의 중앙'에 배치해야 하는 상황이 발생하면 어떻게 해야 할까요? 이럴 때 다름 아닌 margin 속성 값을 응용할 수 있습니다.
어떤 특정 요소를 브라우저 중앙에 배치하기 위해서는, 일단 해당 요소의 width가 정의되어 있어야 합니다. 그리고 해당 요소의 margin-left, margin-right를 auto로 설정하면 됩니다. 그럼 자연스럽게 브라우저 전체 너비에서 요소의 너비를 뺀 값을 요소의 좌우 마진으로 계산하게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background-color: black;
}
#container {
text-align: center;
border: 2px solid red;
background-color: yellowgreen;
width: 500px;
margin: 25px auto;
padding: 25px;
}
</style>
</head>
<body>
<div id="container">태그 가운데 정렬을 테스트 합니다.</div>
</body>
</html>
○ margin overlap(마진 중첩)의 이해
일단 마진 중첩 현상에 대해서 간단하게 정의를 진행해 보겠습니다. 우선 어떤 <div> 요소의 margin 값이 30px로 지정되었다고 가정해 봅시다(top, right, bottom, left). 그런데 이 <div>요소 두 개가 위아래로 딱 붙어서 배치된다면, 두 <div> 요소 사이의 거리는 어떻게 될까요?
이론적으로 위에 있는 <div> 박스는 margin-bottom이 30px이고, 아래에 있는 <div> 박스는 margin-top이 30px인 셈이 됩니다. 그럼 실제로 두 개의 <div>는 위 아래 사이에 총 60px의 거리를 두게 될 것 같습니다.
하지만, 실제로는 이렇게 두 박스 요소의 거리가 결정되지 않습니다. 30px의 거리를 위아래로 두게 됩니다. 이것이 margin overlap(마진 중첩) 또는 margin collapse(마진 상쇄) 현상이라고 합니다. 이 마진 중첩 현상은, 위와 아래 요소의 마진이 겹칠 때 더 큰 마진 값으로 적용되는 현상을 의미합니다.
하지만 주의할 점은, 이 마진 중첩 현상은 세로로 배치되는 요소에 대해서만 적용되며 좌우의 마진 값이 만나는 경우에는 발생하지 않는다는 것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
margin: 50px;
}
#box1 { background-color: red; }
#box2 { background-color: yellow; }
#box3 { background-color: blue; }
</style>
</head>
<body>
<div id="box1">box1입니다.</div>
<div id="box2">box1입니다.</div>
<div id="box3">box1입니다.</div>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 4. 레이아웃 설계(1) - display (0) | 2023.04.14 |
|---|---|
| [CSS] 3. 박스 모델(5) - 여백 속성(margin, padding) 2 (0) | 2023.04.13 |
| [CSS] 3. 박스 모델(4) - 테두리 스타일 3 (0) | 2023.04.12 |
| [CSS] 3. 박스 모델(4) - 테두리 스타일 2 (0) | 2023.04.10 |
| [CSS] 3. 박스 모델(4) - 테두리 스타일 1 (0) | 2023.04.09 |
