CSS 박스모델 가시성

    2018-03-11 16:34:07 작성

    display

    display: value|initial|inherit;

    요소가 표시될때 사용할 박스 종류를 지정합니다.
    모든 HTML요소는 요소 유형에 따라 block, inline 등의 기본 값을 가집니다. HTML > 컨텐츠그룹화 페이지 참고
    display 속성을 사용하면 표시 유형을 변경할 수 있습니다.

    설명
    inline 인라인 요소로 표시합니다.
    새 줄에서 시작하지 않고 필요한 콘텐츠의 크기만큼 폭과 높이를 같습니다.
    width, height 속성을 갖을 수 없습니다.
    block 블록 요소로 표시합니다.
    새줄에서 시작하며 전체 폭을 갖습니다.
    inline-block 요소를 인라인 수준의 블록 컨테이너로 표시.
    새줄에서 시작하지 않지만 width, height값을 적용할 수 있습니다.
    none 요소를 표시하지 않습니다.
    list-item 요소를 <li> 요소와 같이 표시합니다.
    run-in 상황에 따라 인라인요소 또는 블럭요소로 표시합니다.
    flex 요소를 블록수준의 flex 컨테이너로 표시합니다.
    inline-flex 요소를 인라인수준의 flex 컨테이너로 표시합니다.
    table 요소를 <table> 요소와 같이 표시합니다.
    table-row 요소를 <tr> 요소와 같이 표시합니다.
    table-cell 요소를 <td> 요소와 같이 표시합니다.
    inline-table 요소를 인라인 수준의 테이블 컨테이너로 표시합니다.
    table-caption 요소를 <caption> 요소와 같이 표시합니다.
    table-column-group 요소를 <colgroup> 요소와 같이 표시합니다.
    table-column 요소를 <col> 요소와 같이 표시합니다.
    table-header-group 요소를 <thead> 요소와 같이 표시합니다.
    table-row-group 요소를 <tbody> 요소와 같이 표시합니다.
    table-footer-group 요소를 <tfoot> 요소와 같이 표시합니다.


    visibility

    visibility: visible|hidden|collapse|initial|inherit;

    요소가 표시되는지 여부를 지정합니다.

    설명
    visible 기본갑, 요소를 표시합니다.
    hidden 요소를 표시하지 않습니다.(공간을 차지 합니다)
    collapse table 요소 전용입니다.
    행이나 열을 표시하지 않습니다.(공간을 차지 하지 않습니다)
    다른 요소에 사용되면 hidden 값으로 적용됩니다.