Properties

Properties

Editing
  • account_tree
  • bug_report

visibility

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

설명

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

사용 가능한 값 타입

<'visibility'>

DEVDIC-Specified Data Types

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

  • visible | hidden | collapse | inherit

사용되는 키워드

  • collapse

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

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

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

  • visible

    요소를 화면에 표시한다.

사용되는 전역 키워드

다음 전역 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • inherit

    부모 요소로부터 속성의 값을 상속받는다.

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

  • 〈'visibility'〉visible

    요소를 화면에 표시한다.

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

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

    Example
  • CSS Cascading and Inheritance Level 4

구문

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

버전 명세

Modules
Module NameStatusSummary
CSS Display Module Level 3

Last review date: 2022-6-11

지원 웹브라우저