[css] visibility 속성

26 Dec 2023

CSS visibility 속성은 요소를 숨기거나 보이게 하는 데 사용됩니다. 이 속성은 요소의 영역을 유지하고 있지만, 보여지지 않거나 숨겨진 상태로 만듭니다.

속성값

visible: 요소를 보이게 합니다. 기본값입니다.
hidden: 요소를 숨깁니다. 하지만 요소의 영역은 여전히 유지됩니다. 그래서 숨겨진 요소가 차지하는 공간을 다른 요소가 채울 수 있습니다.

사용 예시

<!DOCTYPE html>
<html>
<head>
<style>
.hidden-element {
  visibility: hidden;
}
</style>
</head>
<body>

<h2>Visibility Example</h2>
<p>This paragraph is visible.</p>
<p class="hidden-element">This paragraph is hidden.</p>

</body>
</html>

위의 예시는 visibility 속성을 이용하여 특정 요소를 숨기는 방법을 보여줍니다.

이렇게 요소를 숨기는 경우에는 display 속성의 값을 변경하여 요소를 숨기는 것과의 차이점을 이해하는 것이 중요합니다. visibility 속성은 요소를 숨기더라도 화면에서 사라지지 않고 공간을 계속 차지하므로, 다른 요소의 레이아웃에는 영향을 끼치지 않습니다.

결론

CSS visibility 속성은 요소를 보이게 하거나 숨길 때 사용됩니다. 요소를 보이게 하거나 숨기는 데 있어 display 속성과의 차이를 잘 이해하고, 적합한 상황에 사용하는 것이 중요합니다.

더 많은 정보를 원하신다면 MDN web docs를 참조하시기 바랍니다.