저번 시간에 박스모델에 대한 공부를 하면서 HTML 태그 요소들이 문서내에서 어떻게 배치되는지에 대해서 살펴보았다.
이를 결정하는 속성 다섯가지(width, height, padding, border, margin)에 대해 살펴보았었는데 오늘은 이 규칙의 기준을 바꿀 수 있는 box-sizing이라는 속성을 살펴보고, 더 나아가 태그 요소들 간에 margin이 어떻게 적용되는지에 대해서도 살펴보겠다.
저번 시간에 이어서 매우 중요한 내용이므로 반드시 이해하고 넘어가야 한다.
box-sizing 속성
크롬 브라우저의 요소검사 기능(지난 포스팅 참고)을 통해서 width와 height 속성을 가시적으로 살펴보도록 하겠다.
border(빨간 테두리)안쪽에 padding이 10px만큼 있고 그 안쪽에 파란 박스(100 x 100)의 컨텐트(content) 영역이 있다. 이 영역은 css 속성 width와 height로 정해진다.
box-sizing
코드를 보면 box-sizing이라는 속성 추가했는데 이 속성이 갖을 수 있는 속성값은 다음과 같다.
content-box
width와 height 속성이 content의 가로와 세로의 길이를 설정하도록 한다. (기본값)
border-box
width와 height 속성이 content와 padding과 border의 두께까지 합친 값으로 설정한다.
이해가 잘 안될 수 있으니 다음 설명을 보자.
box-sizing 속성의 값으로 border-box를 주었다. 따라서 width와 height는 content의 사이즈가 아닌 content + padding + border의 두께를 모두 합친 사이즈가 된다. 위 그림에서 width와 height를 각각 100으로 했지만, content의 가로 세로 사이즈가 78 x 78인 것을 확인하도록 하자.
다음은 좀 더 알기 쉽게 패딩(padding) 값을 주지 않고 content와 border 값을 동일하게 준 후에 box-sizing 속성만 다르게 해서 비교한 것이다.
레이아웃을 정할 때 box를 content에 맞출지 border에 맞출지를 먼저 결정한 후에 통일된 레이아웃을 설계하는 것이 중요하다. 그러기 위해서는 box-sizing 속성을 제대로 이해하고 있어야 한다.
마진(margin) 겹침 현상
마진(margin)은 태그 요소간의 간격을 설정하는 속성이다. 마진(margin)속성이 있는 두 태그간에 간격이 결정될 때는 마진 겹침 현상이 일어나는데 다음 그림을 통해서 마진겹친 현상을 이해해 보기로 한다.
A와 B라는 html 태그 요소가 있을 때 각 태그 요소에 파란색 막대기가 달려있다고 하자. 그리고 A와 B가 점점 가까워 질 때 어떤 순간에 멈출지 생각해보자. A태그 요소에 달린 막대기가 B 태그 요소의 막대기 보다 길기 때문에 두 태그 요소들 간의 간격은 A가 가진 막대기 길이 이상 가까워질 수 없다. 그리고 이 때 B 태그 요소가 가진 짧은 막대기의 길이만큼은 막대기 끼리 겹쳐져 있다고 생각할 수 있다.
이제 이 파란 막대기를 마진(margin) 속성으로 생각해도 별 무리가 없다. 정말 쉽지 않은가? 바로 태그 요소가 가진 막대기 중에 긴 녀석에 의해서 요소간 간격이 정해진다는 것이 마진 겹침 현상의 전부라고 할 수있다.
아래 코드와 브라우저에 나타나는 결과를 보자. 가상의 파란막대기를 그려보았다. 긴 것이 100px, 짧은 것이 70px의 길이를 갖는다. 이 것이 바로 마진이며 두 태그 요소간의 간격을 긴 막대기(margin)로 결정한다.
여기서 id가 testB인 태그 요소의 마진(margin)을 80px 또는 90px로 바꿔도 두 태그 요소간의 간격은 100px로 그대로일 것이다. 100px 이상을 설정해야 간격이 벌어질 것이다.
- 시각적 요소와 마진 겹침 현상
3개의 태그요소가 있고 각 요소들의 margin을 가상의 막대기로 대신 그려놓았다. 이 때 중간에 있는 태그 요소의 시각적인 부분만 제거했다고 해보자.(태그는 그대로 있다.)
그러면 오른쪽 그림과 같이 마진들이 모두 겹쳐지는 현상이 발생한다. 재밋는 것은 시각적으로 보이지 않게된 태그의 top과 bottom 마진조차 서로 겹쳐진다는 것이다. 이렇게 시각적인 요소를 제거한 태그는 실체는 없으니 margin만 남게 되는 것이다. 그리고 오른쪽 그림처럼 4개의 margin값 중에 가장 큰 margin 값에 따라서 A와 C의 간격이 결정된다.
다음은 이에 대한 실제 코드와 실행 결과다.
이제 id값이 testB인 태그요소의 시각적인 요소를 제거해 보겠다.
중간에 있는 태그요소의 시각적인 요소를 모두 주석처리한 결과를 보여준다. 이렇게 두 태그 요소간의 간격을 보이지 않는 요소를 중간에 두어서 결정할 수도 있을 것이다. 어쨌든 이런 현상들에 대해서 이해하는 것이 웹 페이지의 정교한 레이아웃을 만드는데 필요한 기초가 된다.