생활코딩

Coding Everybody

코스 전체목록

닫기

display

Summary

엘리먼트의 디스플레이 속성을 지정한다.

inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
기본값 inline
적용대상 모든요소
상속 상속안됨
퍼센테이지 지정불가
미디어 all

Value

  • block : 엘리먼트를 블럭박스로 만든다. [sample]
  • inline : 엘리먼트를 인라인박스로 만든다.
  • inline-block : 엘리먼트를 블럭박스로 만들지만, 인라인요소처럼 배치한다. (CSS2.1 권고후보에 추가 됨)
  • list-item : li가 갖는 기본 속성(목록박스와 목록항목)을 적용시킨다. [sample]
  • none : 해당 엘리먼트의 박스는 물론 그 자식 박스까지 생성하지 않아 시각적으로 보이지 않게 된다.
  • run-in : 엘리먼트를 런인박스로 만든다. [sample]  

    테스트결과 FF미지원, IE10지원, safari지원, chrome지원

  • compact : CSS2.1 권고후보에서 삭제
  • marker : CSS2.1 권고후보에서 삭제
  • table : <table>과 같음
  • table-row : <tr>
  • table-cell : <td>
  • table-caption : <caption>
  • table-column : <col>
  • table-column-group : <colgroup>
  • table-row-group : <tbody>
  • table-header-group : <thead>
  • table-footer-group : <tfoot
  • inline-table : 인라인 블록 안에 테이블 생성

Tip

  1. 다음과 같이 사용할 수 있다.
    .test-display {
        display: block;
    }
    

댓글

오류나 오타 신고 환영합니다. ^^;;
(도와주세요!)

댓글 본문
  1. 크흐아하음사하아하하
    감사!
  2. 쾜쇄횁늬돵
    감사합니당~
  3. 갬새갬새
    감사합니당
  4. 감사빌런
    감사합니다.
  5. 푸른하늘
    10일차 공부 감사합니다
  6. 이주형
    감사합니다~! 리체님~!^_^
  7. 김금란
    2013년 작성으로 되어 있는데 업데이트 날짜는 어떻게 확인 할 수 있나요?
  8. 방랑자
    flex 도 넣어주세요.
  9. 지나가다
    run-in 크롬에서 지원안함

    크롬 [버전 39.0.2171.95 m] [2014.12.23 현재 최신버전]
버전 관리
리체
현재 버전
선택 버전
graphittie 자세히 보기