🎨 CSS 요소 숨김 처리 속성에 따른 특성 차이

숨김 처리 속성에 따른 특성 차이

요소를 숨길때 사용하는 CSS 속성은 여러 가지가 있다. 그러나 이들 방법 마다 제각기 고유의 특성을 지니고 있다. 이번 글에서는 이러한 방법들의 차이점에 대해 살펴보겠다.

숨김 css 속성	공간 점유	이벤트	탭 접근
opacity : 0	점유	활성	가능
visibility : hidden	점유	비활성	불가능
visibility : collapse	점유 (테이블 안에서만 비점유)	비활성	불가능
display : none	비점유	비활성	불가능

 

opacity: 0

• 투명도 처리
• 그러나 요소는 여전히 공간을 차지하게 되므로, 다른 요소들과의 간격이 유지된다.
• 요소가 보이지 않는 것뿐이지, 여전히 이벤트를 받을 수 있음

visibility: hidden

• 요소를 숨김
• 이 경우에도 요소는 여전히 공간을 차지하게 되지만, 다른 요소들과의 간격은 유지되지 않는다.
• 요소가 완전히 숨겨졌기 때문에 이벤트를 받을 수 없음

visibility: collapse

• 테이블 셀에서만 사용할 수 있다.
• 이 속성을 사용하면 테이블 셀의 내용이 보이지 않게 된다.
• 다른 요소들과의 간격도 유지되지 않음
• 이벤트를 받을 수 없음

display: none

• 요소를 없앰
• 요소는 더 이상 공간을 차지하지 않으며, 다른 요소들과의 간격도 유지되지 않는다.
• 요소를 없앴기 때문에 이벤트도 받을 수 없음

 

정리하자면 요소를 숨기는 방법을 선택할 때, 요소의 공간 점유 여부, 다른 요소들과의 간격 유지 여부, 이벤트 처리 여부 등을 고려하여 적절한 CSS 속성을을 선택해야 한다.