화면에서 특정 요소를 숨기려면 CSS의 visibility 속성에 hidden 값을 지정하면 됩니다. 이 속성을 적용하면 해당 요소는 화면에 표시되지 않지만, 원래 차지하던 공간은 그대로 유지된다는 점이 특징입니다.
아래 예제 코드를 직접 실행하면서 visibility 속성이 어떻게 동작하는지 확인해 보세요.
예제
<html> <head> </head> <body> <p> This paragraph should be visible. </p> <p style = "visibility:hidden;"> This paragraph should not be visible. </p> </body> </html>
위 코드를 실행하면 첫 번째 문단은 정상적으로 화면에 표시되고, 두 번째 문단은 visibility: hidden; 스타일이 적용되어 보이지 않게 됩니다.
visibility: hidden과 display: none의 차이점
요소를 숨기는 또 다른 방법으로 display: none;이 있습니다. 두 속성의 차이는 다음과 같습니다.
- visibility: hidden; — 요소가 눈에 보이지 않지만, 레이아웃에서 원래 자리와 공간을 그대로 차지합니다.
- display: none; — 요소가 문서 흐름에서 완전히 제거되어 공간조차 남지 않습니다.
따라서 페이지 레이아웃을 유지한 채 요소만 잠시 감추고 싶을 때는 visibility 속성을 사용하는 것이 적합합니다.