CSS와 박스 모델

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

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

인라인 레벨(inline-level)요소는 줄을 차지하지 않는 요소.

 

 

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

 

 

박스 모델

스타일 시트에서 하나의 박스 형태를 가지는 요소를 박스 모델 요소라고 한다.

 

width, height => 콘텐츠 영역의 크기

 

display속성 -> 화면 배치 방법 결정하기

display 속성값들

속성 값	설명
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	표의 열 그룹으로 만듭니다(<colorgoupt> 태그 사용한 것처럼)
table-cell	표에서 하나의 셀로 만듭니다(<td>나 <th> 태그 사용한 것처럼)
table-caption	표의 캡션을 만듭니다(<caption> 태그 사용한 것처럼)
list-item	목록의 항목을 표시할 수 있도록 기본적인 블록 박스와 표시자 박스를 만듭니다(<li> 태그 사용한 것처럼) => '기본적인 블록 박스'란 항목의 내용이 표시되는 부분이며 ' 표시자 박스'란 불릿이 표시되는 부분입니다.