[CSS 입문] CSS와 박스 모델

1. 블록 레벨 요소와 인라인 레벨 요소

블록 레벨(block-level) 요소 - 태그를 사용해 요소를 삽입했을 때 혼자 한줄을 차지하는 요소

인라인 레벨(inline-level) 요소 - 화면에 표시되는 콘텐츠만큼 영역을 차지하는 요소

종류	해당 태그
블록 레벨 태그	<p>, <h1>~<h6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>
인라인 레벨 태그	<img>, <object>, <br>, <suv>, <sup>, <span>, <input>, <textarea>, <label>, <button>

2. 박스 모델(box model)

박스모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(boder), 그리고 여러 박스 모델 사이의 여백인 마진(margin)등의 요소로 구성됩니다.

3. width, height 속성 - 콘텐츠 영역의 크기

width: <크기> | <백분율> | auto

height: <크기> | <백분율> | auto

- 모던 브라우저에서 박스 모델의 전체 너비 = width 값 + 좌우 패딩 + 좌우 테두리

- 인터넷 익스플로러 6에서 박스 모델의 width 값 = 콘텐츠 너비 + 좌우 패딩 + 좌우 테두리

4. display 속성 - 화면 배치 방법 결정

display 속성을 사용하면 블록 레벨 요소를 인라인 요소로 바꾸거나 인라인 레벨 요소를 블록 레벨 요소로 바꿀 수 있습니다.

속성 값	설명
block	해당 요소를 블록 레벨로 지정한다.
inline	해당 요소를 인라인 레벨로 지정한다.
inline-block	해당 요소를 인라인 레벨로 지정하면서 블록 레벨 속성을 갖도록 한다.
none	해당 요소를 화면에 표시하지 않는다.
inherit	상위 요소의 display 속성을 상속받는다.
table	블록 레벨의 표로 만든다.
inline-table	인라인 레벨의 표로 만든다. (<table> 태그를 사용한 것처럼)
table-row	표의 행으로 만든다. (<tr> 태그를 사용한 것처럼>
table-row-group	표의 행 그룹으로 만든다. (<tbody> 태그를 사용한 것처럼)
table-header-group	표의 제목 영역(header) 그룹으로 만든다. (<thead> 태그를 사용한 것처럼)
table-footer-group	표의 요약 영역(footer) 그룹으로 만든다. (<tfoot> 태그를 사용한 것처럼)
table-column	표의 열로 만든다. (<col> 태그를 사용한 것처럼)
table-column-group	표의 열 그룹으로 만든다. (<colgroup> 태그를 사용한 것처럼)
table-cell	표에서 하나의 셀로 만든다. (<td>나 <th> 태그를 사용한 것처럼)
table-caption	표의 캡션을 만든다. (<caption> 태그를 사용한 것처럼)
list-item	목록의 항목을 표시할 수 있도록 기본적인 블록 박스와 표시자 박스를 만든다. (<li> 태그를 사용한 것처럼)

visibility: hidden;도 display:none;과 같은 비슷한 역할을 하는데 visibility 속성은 화면에서 감추기만 할 뿐 원래 요쇼가 있는 공간은 그대로 차지하지만 none 속성은 아예 공간조차 차지하지 않습니다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석