[css] CSS 가시성 조절
CSS를 사용하면 웹 페이지의 요소들의 가시성을 쉽게 조절할 수 있습니다. 여기에는 텍스트, 이미지, 박스 등과 같은 요소들을 보이게 하거나 숨기는 방법이 포함됩니다.
1. 텍스트 가시성 조절
텍스트를 숨기고 싶을 때, visibility 속성을 사용할 수 있습니다. 해당 속성을 hidden으로 설정하면 해당 요소를 화면에서 숨길 수 있습니다.
예시:
.hidden-text {
visibility: hidden;
}
2. 이미지 가시성 조절
이미지의 가시성을 조절하기 위해서는 display 속성을 활용할 수 있습니다. 이미지를 숨기고 싶을 때, 해당 속성을 none으로 설정하면 이미지가 화면에서 사라집니다.
예시:
.hidden-image {
display: none;
}
3. 박스 가시성 조절
박스의 가시성은 display 또는 visibility 속성을 사용하여 조절할 수 있습니다. display: none으로 설정하면 해당 박스가 화면에서 완전히 사라지고, visibility: hidden으로 설정하면 공간은 유지하되 내용물이 보이지 않게 됩니다.
예시:
.hidden-box {
display: none; /* 또는 visibility: hidden; */
}
CSS를 사용하여 요소들의 가시성을 조절하는 방법은 매우 간단하고 유용합니다. 이를 통해 사용자 경험을 향상시키거나 웹 페이지의 디자인을 조정할 수 있습니다.
참고 문헌: