[css] CSS 가시성 속성

26 Dec 2023

CSS는 웹 페이지의 요소를 디자인하고 스타일링하는 데 사용되는 강력한 도구입니다. 이 중에서 가시성 속성은 웹 요소를 화면에 어떻게 표시할지를 조절하는 데 도움을 줍니다. 가시성 속성을 제대로 활용하면 사용자 경험을 향상시킬 수 있습니다.

display 속성

display 속성은 요소의 표시 방법을 지정합니다. 다양한 값들을 사용하여 요소의 가시성을 조절할 수 있습니다.

// HTML 요소를 블록 레벨로 표시
display: block;

// HTML 요소를 인라인으로 표시
display: inline;

// HTML 요소를 숨김
display: none;

visibility 속성은 요소를 눈에 보이거나 보이지 않게 만듭니다. display 속성과는 달리 요소의 영역은 유지된 채로 표시 여부만을 조절합니다.

// HTML 요소를 보이게 함
visibility: visible;

// HTML 요소를 숨김
visibility: hidden;

opacity 속성은 요소의 투명도를 지정합니다. 0.0에서 1.0까지의 값을 갖으며, 0.0은 완전 투명을, 1.0은 완전 불투명을 나타냅니다.

// HTML 요소를 완전 투명하게 함
opacity: 0;

// HTML 요소를 완전 불투명하게 함
opacity: 1;

가시성 속성은 웹 디자인에서 중요한 역할을 합니다. 원하는 디자인과 사용자 경험을 만들기 위해 이러한 속성을 잘 활용하는 것이 중요합니다.

참고 문헌: MDN Web Docs