STYLE

Editing

visibility

요소의 화면 표시 여부를 설정하며 hidden 설정시 원래 가지고 있던 요소의 영역은 그대로 유지된다.

설명

원래 레이아웃을 유지하면서 요소를 숨기거나 보이게 할 수 있다. 테이블의 행이나 열을 숨기는데에도 사용될 수 있다.

사용 가능한 값 타입

〈'visibility'〉

visibility 속성에 사용되는 타입이다.

  • visible | hidden | collapse | inherit

사용되는 키워드

  • collapse

    이 값은 요소마다 다른 결과를 갖는다.

    • <table>에 적용시 행, 열, 행 그룹, 열 그룹이 숨겨지고 차지했던 공간도 제거된다. 다른 행과 열의 크기는 기존처럼 동일하게 처리한다.
    • 접힌 플렉스 항목과 루비 주석은 숨겨지고 공간도 제거된다.
    • 그 외는 hidden과 동일하다.
  • hidden

    요소를 표시하지 않지만 원래 요소가 차지하고 있던 영역은 그대로 유지하여 레이아웃에 영향을 준다.

  • visible

    요소를 화면에 표시한다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

구문

  • visibility: hidden;
    CSS Display Module Level 3
  • element.style.visibility = "hidden";
    CSS Display Module Level 3

지원 웹브라우저