8-8-2. CSS 속성 : 레이아웃-비지빌리티(visibility) {visibility: visible / hidden / collapse;}

8-8-2. CSS 속성 : 레이아웃-비지빌리티(visibility)

 

 가. visibility 속성

 

  - 요소에 대한 화면 표시 여부를 결정하는 속성

  - 요소를 화면 상 안보이게끔 숨기는 명시적인 방법의 속성

  - 기본값 : visible(보여짐)

 

 나. visibility 속성값의 종류

 

속성값	내용
visible	ㆍ화면상에 요소가 표시되어 보여짐
hidden	ㆍ속성값으로 인하여 숨김이 되어, 화면상에 표시되지 않음 ㆍ단, 스크린리더가 해당 요소를 읽음으로써, 렌더링은 됨 ㆍ그래서, 아래와 같이 해당 요소의 공간만큼 차지하는 형태로는 보여짐
collapse	ㆍ"테이블 요소"의 행과 열 요소에만 적용 가능 ㆍ이에 따라, 셀 간의 경계를 무시하고 숨겨짐 ㆍ그 외 요소에 적용시, hidden 속성값의 결과와 같음

 

다. visibility: hidden; 과 display: none; 의 차이점

 

 - visibility 속성의 hidden 속성값은 스크린리더기가 해당 요소를 읽어줌으로써(DOM에 존재), 렌더링이

   되어 화면에 해당 공간을 차지하고 있으나, 화면상 눈으로 요소가 보이지 않을뿐이지만,

 - display 속성의 none 속성값은 애초부터 스크린리더기가 해당 요소를 읽지 않음으로써(DOM에 부존재),

   랜더링이 되지 않아 화면에 해당 요소의 공간을 포함하여 아무것도 표시가 되지 않는 것