CSS 박스 모델 (box model) #1

우리는 흔히 CSS를 적용하면서 머릿속에 어떤 형태의 박스로 보여질지 구상하곤 합니다. 그 형태를 올바로 그릴수 있도록 관련된 사항들을 정리합니다.

박스 모델은 CSS에서 기본이 되는 디자인 패턴으로 요소를 어떤 방식의 박스 형태로 렌더링할지 정의한다. 박스 모델은 인라인(inline), 인라인 블록(inline-block), 블록(block), 테이블(table), 절대위치(absolute), 플로트(float) 이다.

width와 height 속성은 요소의 내부 박스 크기를 설정한다. 내부 박스 둘레에는 패딩이 있고, 패딩 둘레에는 테두리가 있고, 테두리 둘레에 마진이 있다. 마진 둘레의 박스가 바로 외부 박스다.

패딩, 테두리, 마진으로 인해 외부 박스는 커지지만 내부 박스의 너비와 높이는 변하지 않는다. margin에 음수 값을 지정하면 인접한 요소가 겹칠 수도 있지만 너비와 높이는 변하지 않는다.

인라인(inline) 박스

인라인 박스를 인라인, 인라인 요소, 정적 인라인 박스등으로 부른다. 인라인 박스는 부모 요소의 너비를 초과하면 새 행으로 자동 줄바꿈된다.

인라인 박스 스타일 속성

• width, height, overflow : 인라인 요소에는 이 속성들이 적용되지 않는다. 너비와 높이가 그 안의 내용에 맞춰 자동으로 줄어들기 때문이다.
• margin, line-height : 마진 속성의 가로 마진들은 작동하고, margin-top, margin-bottom은 적용되지 않는다. 위 아래 간격을 위해서는 line-height를 이용해야 한다.
• border, padding : 상단과 하단 테두리를 지정하면, 줄 간격이 늘어나거나 인라인 요소의 세로 위치는 변하지 않고 패딩 영역 위와 아래에 테두리가 표시된다. 테두리는 줄 간격에 영향을 주지 않으므로 , line-height에 더 큰 값을 지정하지 않으면 테두리가 앞뒤 줄의 테두리와 겹칠 수도 있다. padding 속성도 이와 같다.
• 인라인 요소는 부모 요소 외부에 정렬할 수 없다. 정적(static) 블록 요소나 플로트 요소는 부모 요소의 외부 상단/하단에 정렬할 수 없다. IE6는 정적 블록 요소와 플로트 요소를 외부 정렬하는 기능이 없고, IE7 이상 버전에는 있다.
• 인라인 요소에 장식을 넣을때 <span class="deco">&nbsp;</span>과 같이 span 요소안에 공백을 넣어야 하며 종료태그가 반드시 있어야 한다.
• 블록 요소를 인라인 요소처럼 렌더링되게 하려면 display: inline 을 지정한다. 어느 요소든 이 규칙을 지정하면 인라인 요소로 표시되지만 margin 값과 padding 값은 인라인 요소에서 서로 다르게 적용되므로 이를 조정해야한다. 리스트 항목을 인라인 처럼 표시하면 불릿과 번호가 표시되지 않는다. Chrome 브라우저 8 이상 버전은 테이블에 display: inline-table 값을 지정해야 그 테이블이 인라인 요소처럼 렌더링된다.

인라인 블록 (inline-block) 박스

인라인 블록 박스는 인라인 흐름에 따르되 블록 박스처럼 마진, 테두리, 패딩, 너비, 높이 속성이 적용된다. 줄이 서로 겹치지 않고 자동 축소, 지정 크기, 자동 확대가 가능하다.

인라인 블록 박스 스타일 속성

• width, height : 요소의 너비, 높이를 지정한다. 인라인 요소에 display: inline-block을 지정하면 원하는 width와 height를 설정할 수 있으며, 내용에 맞춰 자동 축소되게 하려면 width: auto와 height: auto를 지정하면 된다. 부모 요소에 맞춰 자동 확대되게 하려면 width: 100%를 지정한다. 인라인 블록 요소를 자동 확대 시키면 블록 요소와 같아진다.
• margin : margin 속성이 인라인 블록 요소에는 다르게 적용된다. margin-top 속성에 양수 값을 지정하면 줄 간격이 늘어나고 음수 값을 지정하면 줄 간격이 줄어든다. margin-bottom 속성에 양수 값을 지정하면 요소가 올라가고 음수 값을 지정하면 요소가 내려진다. 물론, margin-bottom 속성으로도 줄 간격을 늘이거나 줄일 수 있다. margin-left 속성에 양수 값을 지정하면 앞 요소와 떨어지고 음수 값을 지정하면 앞 요소에 가까워진다. margin-right 속성에 양수 값을 지정하면 다음 요소가 멀리 밀려나고 음수 값을 지정하면 다음 요소가 가까이 당겨진다.
• border, padding : 테두리와 패딩을 지정하면 인라인 요소 외부의 크기가 늘어난다. 요소 자체와 그 뒤의 내용이 오른쪽으로 밀리며, 요소가 위로 올라가고 그 요소가 들어 있는 줄 간격이 늘어난다.
• vertical-align : inline-block 요소는 vertical-align 속성의 영향을 받는다.(아마 이 속성은 top으로 설정하고 싶을 것이다.)

IE6,7에서는 지원이 되지 않아 *display: inline; zoom: 1; 이라는 핵을 함께 사용하여 인식되게 한다.

.inline-block { display:inline-block; *display:inline; zoom:1; }

블록 (block) 박스

블록, 블록요소, 정적 블록 박스 등으로 불린다. 블록은 부모 요소의 너비와 높이에 맞춰 자동 확대되게 할 수도 있고, 부모 요소보다 작거나 큰 크기를 지정할 수도 있다. 블록 요소의 크기를 부모 요소보다 크게 지정하면 부모 요소 밖으로 넘쳐서 표시된다. overflow 속성으로 넘치는 부분을 어떻게 처리할지를 지정할 수 있다.

블록 박스 스타일 속성

• width : 기본값은 width: auto이며, 이때 요소는 부모 요소의 너비에 맞춰 늘어난다.
• height : 기본값은 height: auto이며, 이때 요소는 모든 자식 블록 요소의 노피에 맞춰 줄어든다.
• margin-left, margin-right : 자동 확대 블록 요소의 좌우를 들여넣거나 내어써서 크기 지정 블록 요소의 좌우에 간격을 넣는다. 블록 박스에는 가로 자동 축소가 적용되지 않는다.
• margin-left: auto, margin-right: auto : 지정 크기 블록 요소의 가로 위치 정렬을 설정한다. width 속성에 크기를 지정해서 블록 요소의 크기를 조절할 경우, margin-right: auto를 지정하면 그 블록 요소가 부모 요소의 왼쪽에 정렬되고 margin-left: auto를 지정하면 부모 요소의 오른쪽에 정렬된다. margin-left: auto와 margin-right: auto를 함께 지정하면 블록 요소는 부모 요소의 중앙에 정렬된다.
• margin-top, margin-bottom : 양수 값을 지정하면 블록 요소 간의 거리가 멀어지고 음수 값을 지정하면 가까워지다가 겹칠 수도 있다. 브라우저는 위 블록의 하단 마진과 아래 블록의 상단 마진을 합쳐서 표시한다.
• border, padding : 박스의 바깥쪽 너비와 높이가 늘어나고, 블록 요소와 그 뒤의 블록들이 아래로 밀린다. 자동 확대 블록 요소에 좌우 테두리와 패딩을 지정하면 내부 박스의 너비가 줄어들고, 지정 크기 블록 요소에 좌우 테두리와 패딩을 지정하면 그 테두리와 패딩으로 인해 내부 박스가 있을 공간이 부족해 아래로 밀린다.
• <h1>~<h6>, <p>, <blockquote>, <dt>, <address>, <caption>은 종결 블록 요소로서, 내용이나 인라인 요소를 포함할 순 있지만 블럭요소는 포함할 수 없다.

테이블 (table) 박스

테이블은 셀로 구성된 행이 들어 있는 블록 박스다. 테이블은 블록 흐름을 따르며, 그 안의 셀은 행과 열의 테이블 흐름을 따른다. 테이블에는 마진만 있고, 패딩이 없으며, 셀에는 패딩만 있고 마진은 없다. 테이블 박스 모델에 영향을 주는 두 가지 속성은 border-collapse와 talbe-layout이다.

테이블 박스 속성

• width, height : 테이블의 너비와 높이는 패딩 안쪽의 너비와 높이가 아니라 테두리 바깥쪽의 너비와 높이를 의미한다.
• margin : 테이블에 지정 크기, 자동 축소, 자동 확대 중 어느 스타일이 지정됐는지에 따라 결과가 달라진다. 지정 크기 테이블이나 자동 축소 테이블은 마진을 양수 값으로 지정하면 그 테이블과 다음 테이블이 뒤로 밀리고 음수 값을 지정하면 테이블이 인접한 요소와 겹칠 수 있다. 자동 확대 테이블은 마진을 지정하면 테이블이 들여넣어져서 내부 크기가 줄어들고 셀 너비도 줄어든다.
• border-overflow : 테이블은 부모 요소를 넘칠 수 없으므로 이 속성은 테이블에 적용되지 않는다. 그러나 테이블의 셀은 넘칠 수도 있다. 고정 셀이 넘치는 상황에 대해 모든 브라우저에서 똑같이 표시되게 하려면 모든 셀에 overflow: hidden을 지정해야 한다.
• border-collapse : 인접한 테두리를 하나로 합쳐서 표시할지 여부를 설정한다.
• table-layout : 테이블의 크기를 고정할지 내용에 맞춰 자동으로 변하게 할지를 설정한다.
• IE9 이하 버전은 빈 셀 둘레에 테두리를 렌더링하지 않는다. 이를 방지하려면  와 같이 빈칸을 넣는 습관을 들이자.
• 테이블과 셀의 테두리를 하나로 표시할 경우, <table> 요소에 border-collapse: collapse 속성을 지정해서 table의 테두리를 셀 테두리와 합친다. table 테두리와 그 안의 셀 테두리를 합칠 때는 table 요소에 cellspacing 속성 지정 여부에 상관없이 cellspacing 속성값을 0으로 지정해야 IE7 이하 버전에서 문제가 생기지 않는다.

절대 위치 (absolute) 박스

절대 요소는 원래 위치를 벗어나 위/아래에 레이어를 만들고 가장 가깝게 배치된 부모 요소를 기준으로 배치되거나 화면에 고정 배치된다. 정해진 크기를 지정하거나, 내용에 맞춰 자동 축소되게 하거나, 가장 가까운 부모 요소에 맞춰 자동 확대되게 할 수 있다. 모든 요소에 절대 위치를 지정할 수 있으며, 다른 박스의 배치에 영향을 주지 않는다.

절대 위치 박스 속성

• z-index : 배치된 요소가 쌓이는 순서를 설정한다.
• left, right, top, bottom : 절대 요소의 위치를 지정한다.
• width : 기본 값은 width: auto이다. width가 auto이고 left와 right가 둘 다 auto이면 절대 위치 박스는 내용에 맞춰 자동 축소된다. width가 auto이고 left와 right가 둘 다 0이거나 다른 값이면 절대 위치 박스는 부모 요소에 맞춰 자동 확대된다. width, left에 값을 지정하고 right에 auto를 지정하면 절대 위치 박스는 지정한 크기로 설정되고 왼쪽에 맞춰서 간격이 설정된다. width, right에 값을 지정하고 left에 auto를 지정하면 절대 위치 박스는 지정한 크기로 설정되고 오른쪽에 맞춰서 간격이 설정된다.
• height : heigit, top, bottom 속성은 width, left, right 속성과 원리가 같다.
• margin : 양수 값을 지정하면 절대 위치 박스의 옆이 부모 요소의 정중앙에 가깝게 이동하고, 음수 값을 지정하면 부모 요소의 정중앙에서 멀어진다.
• border, padding : 테두리와 패딩을 지정하면 자동 확대 절대 위치 박스의 내부 박스 크기가 줄어든다. 지정 크기 절대 위치 박스와 자동 축소 절대 위치 박스에 테두리와 패딩을 지정하면 외부 박스 크기가 늘어나 절대 위치 박스가 부모 요소의 정중앙을 향해 이동한다.

플로트 (float) 박스

float 속성을 지정한 요소는 원래 위치를 벗어나서 인접한 블록 요소의 테두리와 배경 위를 덮는다. 따라서 플로트 요소를 포함하지 않게 된 부모 요소의 크기는 줄어들고, 만약 부모 요소의 모든 자식 요소에 float를 지정했다면 안에 내용이 없으므로 아예 사라진다.

플로트 요소는 원래 위치에서 벗어나지만 프로트 흐름으로 진입하면서 인접한 내용을 뒤로 밀어낸다. 플로트 요소는 원래 위치에서와 같은 세로 위치에 배치되며, 부모 요소의 왼쪽이나 오른쪽 패딩 영역에 가로로 배치된다. 플로토 요소는 같은 세로 지점의 다른 플로트 요소 옆에 쌓이며, 다른 플로트 요소 옆에 배치될 공간이 없으면 아래로 내려간다.

플로트 박스 속성

• width : 기본 값은 auto이며, 이렇게 지정하면 플로트 요소가 가장 넓은 행에 맞춰 줄어든다.
• height : 기본 값은 auto이며, 플로트 요소가 모든 자식 블록 요소나 행의 높이에 맞춰 줄어든다.
• margin : 플로트 요소에만 다르게 적용된다. 양수 값을 지정하면 플로트 요소가 정렬 지점에서 밀려나고 다른 플로트 요소와 인라인 내용이 그 플로트 요소에서 멀어진다. 음수 값을 지정하면 플로트 요소가 정렬 지점의 반대쪽으로 당겨지고 다른 플로트 요소와 인라인 내용이 그 플로트 요소에 가까워진다. 플로트 요소 둘레의 마진은 합쳐지지 않는다.
• border, padding : border와 padding 속성을 지정하면 플로트 요소의 외부 크기가 늘어난다.

박스 모델 변경

브라우저의 요소 렌더링 방식을 바꾸는 법이다.

p { display: inline; } /* 인라인으로 렌더링 */
strong { display: inline-block; } /* 인라인 블록으로 렌더링 */
em { display: block } /* 블록으로 렌더링 */
dfn { display: list-item; } /* 목록형식으로 렌더링 */
img { display: none } /* 요소를 아예 렌더링하지 않음 */

요소를 리스트 항목처럼 표시할때는, 반드시 부모 요소를 블록으로 렌더링해야 하고 불릿마커에 왼쪽 패딩이나 왼쪽 마진을 넣어줘야 한다. 리스트가 구조상 ol,ul,dl 같은 외부 블록과 li,dd 같은 내부 블록으로 나눠지기 때문이다.