요소를 안 보이게 하는 방법

css를 작성하다 보면 특정 요소를 보이지 않게 하거나, 보이게 하고 싶은 경우가 있습니다. 이런 경우 어떻게 하면 좋을까요?

display

우선 display속성을 떠올릴 수 있습니다. 요소에 display: none을 주게 되면 화면에서 보이지 않게 되죠.

!codepen[crowwan/embed/ZEjYNMB?default-tab=html%2Cresult]

위의 코드에서 확인해보면 element가 적힌 div요소가 보이지 않는 것을 알 수 있습니다.

visibility

display말고 다른 방법도 아래 있는데 visibility를 hidden으로 주는 것입니다. 똑같이 화면에 보이지 않죠. 그런데 위와 무엇인가 다르게 보입니다. 박스 높이가 다르죠.

여기서 display와 visibility의 차이를 알 수 있습니다. display는 영역이 사라진 것입니다. 하지만 visibility와 이따가 볼 opacity의 경우 영역은 있다는 것을 알 수 있죠.

즉, 눈에는 보이지 않지만 있긴 한다는 것입니다. 이것 말고도 차이가 있습니다.

opacity

위의 두 경우를 제외하고도 opacity속성을 0으로 만들었을 때 화면에 보이지 않게 만들 수 있습니다. 이 속성은 요소의 투명도를 나타내는 것입니다. 1부터 0의 값을 소수의 형태로 줄 수 있는데 0에 가까울수록 투명해집니다.

차이점

위에서 차이점 한 가지를 설명했습니다. 영역이 있고 없고의 차이죠. 그 외의 차이점도 있습니다.

• 영역의 존재 여부 display: 영역이 사라짐 visibility: 영역은 차지함 opacity: 영역은 차지함

• 이벤트 작동 여부 display: 이벤트 작동 안함 visibility: 이벤트 작동 안함 opacity: 이벤트 작동함

• focus 가능 여부 display: focus 작동 안함 visibility: focus 작동 안함 opacity: focus 작동함

• 겹쳐진 요소 클릭 여부 visibility: 겹쳐진 요소 요소 클릭 가능 opacity: 겹쳐진 요소 요소 클릭 불가능

이벤트의 경우 클릭이나 hover같은 경우도 포함합니다. display는 영역이 없기 때문에 작동하지 않는 것이 당연하다고 볼 수 있죠. visibility는 영역이 있지만 이벤트를 인식하지는 않습니다. 하지만 opacity의 경우 그저 투명도만 낮춘 것이기 때문에 실제로 모든 것이 동작하죠. focus의 경우도 같습니다.

display의 경우 요소의 영역이 없어지기 때문에 겹쳐져 있는 요소가 없지만 나머지의 경우는 겹쳐진 요소가 있을 수 있습니다. 이 경우 visibility는 겹쳐진 요소가 클릭되지만, opacity의 경우는 그 요소 자체가 클릭됩니다.