[CSS 기본] CSS 박스 모델 (1)

블록 레벨 요소 VS 인라인 레벨 요소

블록 레벨(block-level) 요소

     - 태그를 사용해 요소를 삽입했을 때 요소의 너비가 100%

     - <div>, <p> 태그 등

 

인라인 레벨(inline-level) 요소

     - 한 줄에 여러 개의 인라인 레벨 요소를 표시

     - <img>, <strong> 태그 등

 

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

 

박스 모델

 

display     화면 배치 방법 결정

display: none | contents | block | inline | inline-block | table | table-cell

▷ block

     - 해당 요소를 블록 레벨로 지정

     - 인라인 레벨 요소를 블록 레벨로 변경

▷ inline

     - 블록 레벨 요소를 인라인 레벨로 변경

 

▷ inline-block

     - 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정하고 싶을 때 설정

 

▷ none

     - 요소를 화면에 표시하지 않는다.

 

▷ 기타 display 속성 값

속성 값	설명
inherit	상위 요소의 display 속성을 상속받는다.
table	블록 레벨의 표로 만든다.
inline-table	인라인 레벨의 표로 만든다.
table-row	표의 행으로 만든다. (tr)
table-row-group	표의 행 그룹으로 만든다. (tbody)
table-header-group	표의 제목영역 그룹으로 만든다. (thead)
table-footer-group	표의 요약 영역 그룹으로 만든다. (tfooter)
table-column	표의 열로 만든다. (col)
table-column-group	표의 열 그룹으로 만든다. (colgroup)
table-cell	표에서 하나의 셀로 만든다. (td, th)
table-caption	표의 캡션을 만든다.
list-item	목록의 항목을 표시할 수 있도록 기본적인 블록 박스와 표시자 박스를 만든다. (li)