디자인취미컴퓨터 및 전자기기

[HTML/CSS] 특정 요소(컨텐츠)를 없애는 방법 – display/visibility

Photo by Pexels on Pixabay

웹디자인을 하다보면 페이지에서 컨텐츠를 없애야 하는 경우가 있습니다. 이 경우 요소를 주석처리하거나 삭제하는 방법이 있지만, CSS로 간단히 해결하는 방법도 있습니다. 이 포스트에서는 CSS로 특정한 요소 또는 컨텐츠를 표시하지 않는 방법에 대해서 설명하겠습니다.

display 속성

display 속성은 요소를 어떻게 표시하는지를 지정해주는 속성입니다. display에는 네가지의 옵션이 있습니다. display 속성의 옵션을 어떻게 설정하냐에 따라서 요소의 종류가 변경됩니다. display에 대한 옵션은 아래와 같습니다.

display: inline
기본값입니다. 앞뒤로 줄바꿈이 되지 않습니다.

display:block
요소 앞뒤로 줄바꿈이 됩니다.

display: none
공간을 차지하지 않으며, 요소가 보이지 않습니다.

display: inline-block
요소는 inline, 내부는 block처럼 표시합니다.

위에서 자신이 필요한 display 속성과 옵션을 선택하여 아래와 같이 사용하면 됩니다. 이번 포스트에서와 같이 특정 요소를 보이지 않게 하려면 display:none 속성을 사용하면 됩니다. 사용하는 방법은 다음과 같습니다.

div {
   display:none;
}

visibility 속성

visibility 속성은 요소의 표시 여부만을 담당하는 속성입니다. display:none을 통하여 요소를 없앨 수 있긴 합니다만, visibility는 조금 더 다양한 설정이 가능합니다. visibility 옵션은 다음과 같습니다.

visibility: visible
기본값입니다. 요소가 표시됩니다.

visibility: hidden
요소가 보이지 않습니다. 그러나 공간은 차지합니다.

visibility: collapse
<table> 태그에서 테이블의 행과 열을 숨깁니다.

display 태그와 마찬가지로 아래와 같이 사용할 수 있습니다. 다만, display 속성과 차별되는 부분은 상속이 가능하다는 것입니다.

div {
   visibility: hidden;
}
Tags
Back to top button