지금부터 웹 사이트 레이아웃에 영향을 미치는 CSS 주요 요소를 알아보겠습니다.
개인적으로 웹사이트를 구성할 때 까다로우문 부분이 '마진 병합 현상'이라는 개념인데 이 부분을 알아보겠습니다.
1. 박스 모델
HTML 태그는 우리 눈에는 안 보이지만 여려 개의 박스가 겹쳐 있는 박스 모델 형식입니다.
박스 모델에는 박스의 크기와 반스 간격을 정의하는 네 가지 요소(margin, border, padding, content)가 있다.
그러면 예제를 통해서 박스 모델이 어떻게 구성되는지 좀 더 확실하게 알아보자.
아래 그림과 같이 width, margin, padding 등의 값을 설정해보고 웹페이지에서 실행해 본다.
2. 박스 모델의 4가지 요소
박스 모델에서 간격을 정의하는 요소를 이제 대충 슬슬 아실 거 같습니다. 바로 margin, border, padding, content입니다.
2-1. margin 속성
margin 속성은 border 속성을 기준으로 바깥쪽 영역을 의미합니다.
간격을 정의할 때 각각 방향에 따라 다른 크기를 한 줄로 설정해줄 수 있습니다.
속성은 왼쪽부터 top - right - bottom - left를 나타내고, background 속성 또한 이런 형식으로 나타낼 수 있습니다.
2-2. border 속성
border 속성은 공간의 테투리를 생성합니다.
그림 2 부분에서 border: solid 20px red; 부분에서 solid, double(2줄), dotte(점선) 등에 따라 선에 모양이 달라집니다.
2-3. padding 속성
padding 속성은 border 속성을 기준으로 border 속성과 content 속성의 간격을 뜻합니다.
padding 속성 역시 margin 속성가 같이 한 줄로 표현이 가능합니다.
2-3. content 요소
content 요소는 태그에 포함되어 있는 내용물을 뜻합니다.
위에 예제에서는 <div> 태그의 content는 <span> hi box! </span>이고, <span> 태그의 content는 hi box!입니다.
즉, content는 태그 또는 태그 안에 포함되어 있는 내용물을 뜻합니다.
3. 마진 병합 현상
웹 사이트 레이아웃 작업을 해보면 margin-top와 margin-bottom 속성이 제대로 적용되지 않을 때가 있습니다.
이러한 현상을 마진 병합(collapsing margin)이라고 합니다.
다시 설명하면, 인접한 공간에 margin-bottom과 margin-top 속성을 적용할 경우에 두 속성 중 큰 속성 값이 작은 속성 값을 병합하는 현상으로, 자주 발생하는 현상은 형제간에 발생하는 마진 병합 현상, 부모 자식 간에 발생하는 마진 병합 현상이 있습니다.
3-1. 형제간에 발생하는 마진 병합 현상
형제간에 발생하는 마진 병합 현상은 형제 HTML 태그에 margin-bottom과 margin-top속성을 적용했을 경우 공백이 큰 속성값을 기준으로 설정되는 것을 말합니다.
각각 one과 two태그는 마진 바텀 100, 마진 바텀 100을 주었으므로 그 합으로 200의 간격이 유지돼야 된다고 생각이 된다.
그림과 같이 100px 크기만의 간격이 유지되는 모습입니다. 만약 각각 100, 50을 적용하면 큰 px 크기에 맞춰 마진 병합이 일어납니다. 고로 100px 간격이 되겠죠. 웹 사이트를 구성할 때 이점을 유의하여 구성해야 합니다.
3-2. 부모 자식 간에 발생하는 마진 병합 현상
부모 자식 간에 발생하는 마진 병합 현상은 자식의 margin-top 속성이 부모에게 영향을 미치는 것을 말합니다.
그림을 보면 son에 margin - top: 50px; 를 줬으니 son만 위로 50만큼 올라가야 될 것을 예상이 됩니다.
실행 결과를 보면 부모의 파란색 부분도 같이 내려간 것을 볼 수 있습니다. 네 그렇습니다. 병합 현상이 일어난 거죠.
이런 현상이 부모에게 영향을 미치는 '부모 자식 마진 병합 현상'이라고 합니다.
후기
레이아웃에 영향을 미치는 요소중 마진 병합 현상에 대해 알아봤습니다. 이제 이후에 display 속성과 HTML 태그의 차원에 영향을 미치는 positon 속성을 살펴보겠습니다.
'HTML + CSS' 카테고리의 다른 글
| HTML + CSS 주요 개념 정리(7) - 레이아웃에 영향을 미치는 요소 Ⅲ (0) | 2021.01.22 |
|---|---|
| HTML + CSS 주요 개념 정리(6) - 레이아웃에 영향을 미치는 요소 Ⅱ (1) | 2021.01.20 |
| HTML + CSS 주요개념 정리(4) - CSS 사용하기 (0) | 2021.01.18 |
| HTML + CSS 주요개념 정리(3) - CSS 이용 (0) | 2021.01.13 |
| HTML + CSS 주요개념 정리(2) - HTML과 레이아웃 (0) | 2021.01.12 |
