[CSS] 20. Visibility ( 가시성 )

이번에는 CSS를 이용해서 특정 요소를 화면에서 안보이도록 설정하는 것을 해보겠습니다.  

화면을 구성하다보면 화면에 그리기는 그려야 하는데 사용자에게 보여주면 안되는 것들이 있을 수도 있겠죠?

 

visibility 속성이 바로 그것을 위한 속성입니다. 사용자가 원할 때만 보여주면 되는 그런 요소들을 위해서 사용하시면 되는 속성입니다.

NOTE: 중요한 정보들을 단순히 안보이게끔 하는데는 사용하시면 안됩니다. 화면에 정보가 뿌려는 지지만 사람 눈에만 안보이도록 속여놓은 것이기 때문에 언제든지 사용자가 볼 수 있다는 것을 명심하세요.

 

이 속성은 다음과 같은 속성값들을 가질 수 있습니다.

Value	Description
visible	The box and its contents are shown to the user.
hidden	The box and its content are made invisible, although they still affect the layout of the page.
collapse	This is for use only with dynamic table columns and row effects.

 

다음 예제를 한번 보시죠. 

<p> This paragraph should be visible in normal way. </p> <p style="visibility:hidden;"> This paragraph should not be visible. </p>

 

결과는 아래와 같습니다. 

This paragraph should be visible in normal way.

 

 

 

두개의 문단을 출력하는데 두번째 문단은 visibility속성값이 hidden이라서 눈에 보이지는 않겠지만 저기 위에 분명 있습니다.

 

 

 

 

 

 

Reference : http://www.tutorialspoint.com/css/css_visibility.htm