08
11월
2007

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-itemli요소와 같은 블록박스와 목록항목의 인라인박스로 만든다.
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 속성을 이제는 제대로 알고 사용하는 것은 어떨까요?

3 Responses

  1. freeism 댓글:

    사내 디자이너 교육을 하면서 display 속성에 대해 엄청 강조를 했었죠.
    저도 block 요소와 inline 요소의 개념을 못잡아서 고생을 많이 했었기 때문에요. ^^;
    잘 정리된 글 감사합니다. ^ —^)b
    p.s. 예전에 한 번 display:hidden 으로 했다가 엄청 고생한 적이 있더랬죠. 왜 안돼!!! 이러면서. ㅋㅋㅋ;;

  2. 아마티 댓글:

    ㅋㅋ 저도 뭔가 잘 안되면 우선 display부터 만져보는 (…) display와 visiblity 속성의 차이점도 헷갈렸던 기억이 납니다..

  3. shyjune 댓글:

    한 눈에 볼 수 있게끔 정리되어 있네요. 잘 보고 갑니다^^

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

%d 블로거가 이것을 좋아합니다: