CSS : 요소 숨기기

CSS : 요소 숨기기

우리가 코딩을 할 때, 때때로 웹 접근성 준수, 탭 효과 등을 이유로 어떠한 요소가 화면에서 보이지 않도록 설정해야 할 필요가 있습니다. 오늘은 CSS로 요소를 숨기는 5가지 방법에 대하여 알아보겠습니다.

---

1. display로 속성 주기

display: none;

display는 요소가 화면에 보여지는 방식을 결정하는 속성입니다. display: none; 속성을 추가하면 요소를 숨길 수 있습니다. 이 방법은 애니메이션을 사용할 수 없고, 요소가 차지하는 영역이 사라집니다.

2. opacity 속성 주기

opacity: 0;

opacity는 요소의 투명도를 의미합니다. 요소의 투명도를 0으로 처리하는 이 방식은, 요소가 불투명해지는 애니메이션을 사용할 수 있습니다. 요소가 차지하는 영역은 그대로 남습니다.

3. visibility로 속성 주기

visibility: hidden;

visibility는 display 속성과 비슷하게 요소를 숨겨주지만, display와 달리 요소가 차지하는 영역이 그대로 남습니다. 애니메이션은 사용할 수 없습니다.

4. transform으로 속성 주기

transform: scale(0);

transform은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여할 수 있습니다. scale의 값을 0으로 설정해 주어, 요소를 숨길 수 있습니다. 이 방법은 요소의 크기를 변형시키는 애니메이션을 추가할 수 있고, 요소가 차지하는 영역이 사라집니다.

5. blind 효과

width: 0;
height: 0;

width와 heigh 속성을 0으로 부여함으로써 요소를 숨기는 방법입니다. 이 방법은 애니메이션을 추가할 수 없고, 요소가 차지하는 영역도 사라집니다. 권장하는 방법은 아닙니다.

---

친절한 정리

속성	애니메이션	영역
display	X	X
opacity	O	O
visibility	X	O
transform	O	X
width, height	X	X