CSS의 display 속성

CSS의 display 속성은 해당 엘레멘트가 화면에 어떻게 보여지는지를 결정하는 역할을 합니다.

display 속성의 값은 다 따지면 19가지나 되지만, 실제로 자주 쓰이는 것은 inline과 block, inline-block, none 값이며, 이외의 것은 브라우저에서 지원하지 않는 것도 많기 때문에 불안정해서 사용되지 않는다고 하네요.

block	블록박스로 만든다.
inline	인라인 박스로 만든다.
inline-block	블록박스로 만들어지지만, 인라인 박스처럼 배치된다. (CSS2.1 권고후보에 추가)
none	박스를 만들지 않으며 시각적으로 완전히 보이지 않는다.
inherit	상위 요소의 display속성을 상속받는다.
table	블록레벨의 표로 만든다. (table)
inline-table	인라인레벨의 표로 만든다. (table)
table-row	행으로 만든다 (tr 기본 속성)
table-row-group	본체 행 그룹으로 만든다. (tbody 기본 속성)
table-header-group	헤더 행 그룹으로 만든다. (thead 기본 속성)
table-footer-group	푸터 행 그룹으로 만든다. (tfoot 기본 속성)
table-column	열로 만든다. (col 기본 속성 – 보이지 않음)
table-column-group	열 그룹으로 만든다. (colgroup 기본 속성 – 보이지 않음)
table-cell	하나의 셀로 만든다. (td 기본 속성)
table-caption	캡션으로 만든다. (caption 기본 속성)
list-item	li요소와 같은 블록박스와 목록항목의 인라인박스로 만든다.
run-in	런인박스로 만든다.
compact	콤팩트 박스로 만든다. (CSS2.1권고후보에서 삭제)
marker	그 요소의 전후에 생성된 내용을 마커로 정의한다. (CSS2.1권고후보에서 삭제)

기본적으로 모든 요소들은 디폴트 display 속성이 지정되어 있으며 이를 자유롭게 변경할 수 있습니다. 예를 들면, 인라인 요소인 <span>요소에 display 속성을 block 으로 지정하면 <div>태그와 같은 역할을 하게 되는 것이죠.

사실 이번 기회에 책이나 인터넷을 찾아보고 조사하긴 했지만, 저도 실제로 사용하는 것은 위쪽의 다섯가지 정도밖에 안되는 것 같습니다.

display 속성 중에 주목할 만한 것은 table-cell 이라는 값인데요… 이게 테이블에서 <td>태그와 같은 속성을 가지게 해줍니다. 아시다시피 <td>태그는 기본적으로 상하 중앙 정렬이 됩니다.

레이아웃을 잡아보셨다면 아시겠지만, <div>태그는 상하 중앙정렬이 지원되지 않지요. 이럴 때 div태그에 display:table-cell; 속성을 주시면, 상하로 중앙 정렬이 가능하게 됩니다.

다만 이게 또 문제많은 IE에서 지원하지 않는다는 것이 참 아쉽습니다. -_-;;; (firefox에서는 지원됩니다.) 레이아웃에서 상하 중앙정렬에 관한 포스트는 다음 기회로 미루기로 하지요.

아무튼 float 속성과 마찬가지로 display 속성을 잘 활용하면 CSS로 더 정밀한 레이아웃을 잡을 수 있습니다. 모르고 막 쓰던 display 속성을 이제는 제대로 알고 사용하는 것은 어떨까요?