3. 위치 속성 정보 - display

block

새로운 라인에서 시작하며 해당라인의 모든 너비 차지.

요소의 너비 및 높이를 css로 설정 및 조정 가능.

<div>, <h1>, <p>, <ul>, <ol>, <form> 등이 기본적으로 block 요소.

inline

새로운 라인에서 시작하지 않으며 해당 요소의 크기만큼만 너비 차지.

요소의 너비 및 높이 css로 설정 및 조정 불가능.

<span>, <a>, <img> 등이 대표적인 inline 요소.

inline-block

새로운 라인에서 시작하지 않으며 해당 요소의 크기만큼만 너비 차지.(inline)

요소의 너비 및 높이 css로 설정 및 조정 가능.

table

부모요소에 사용하며 table 요소처럼 사용하고 싶을때 사용. (<table>의 개념과 동일) 

table-layout : auto/fixed는 table크기를 지정한대로 고정하고 사용하거나 유동적으로 싶을때 사용

자식요소는 다음과 같이 설정함으로서 각각의 다음과 같은 특성을 얻는다

table-column-group	<colgroup> 요소처럼 표현합니다.
table-header-group	<thead> 요소처럼 표현합니다.
table-footer-group	<tfoot> 요소처럼 표현합니다.
table-row-group	<tbody> 요소처럼 표현합니다.
table-cell	<td> 요소처럼 표현합니다.
table-column	<col> 요소처럼 표현합니다.
table-row	<tr> 요소처럼 표현합니다.

▶예시

.boxwrap {
    display:table;
    width:100%;
    table-layout: fixed;
}
.boxwrap .box {
    display:table-cell;            
    vertical-align: middle;
}

결과

(요즘엔 대부분의 브라우저에 flex가 지원되니 table대신 flex를 써도된다)