[CSS] 요소를 숨기는 방법

CSS : 요소(element)를 안보이게 하는 방법

CSS 속성을 작업하다 보면 요소를 숨겨야 하는 속성들이 필요하게 됩니다. 이번 시간에는 CSS 기법 중 하나인 요소를 안보이게 하는 방법 5가지에 대해 알아보겠습니다!😄

---

#1. display : none;

가장 보편적으로 사용하는 속성 중 하나로 요소의 영역이 완전히 사라지게 됩니다.
또한 이 속성을 사용하게 되면 애니메이션 효과도 줄 수 없게 됩니다.

💡 코드 보기

p {display : none;}

없어집니당

뾰로롱

---

#2. opacity: 0;

opacity는 투명도를 설정하는 속성 중 하나로 요소의 투명도를 0으로 하여 요소를 안보이게 합니다.
때문에 요소는 사라져도 영역은 남게 되며 애니메이션도 적용이 가능합니다.

💡 코드 보기

p {opacity: 0;}

없어집니당

뾰로롱

#3. visibility: hidden;

visibility: hidden; 속성은 opacity: 0;과 달리 영역이 남는 속성이며 상속이 됩니다.애니메이션 적용이 불가합니다.

💡 코드 보기

p {visibility: hidden;}

없어집니당

뾰로롱

---

#4. width: 0; height: 0;

높이와 넓이 값을 0으로 하여 요소를 사라지게 만들어 줍니다. 영역은 남지 않지만 애니메이션 효과를 줄 수 있습니다.
따로 텍스트를 작성할 경우 텍스트도 함께 보이지 않도록 설정해주어야 요소와 같이 사라집니다. (ex : overflow: hidden;)

💡 코드 보기

p {
  width: 0; 
  height: 0;
}

없어집니당

뾰로롱

---

#5. transform : scale(0)

transform : scale(0); 속성은 요소의 변형에 대한 속성으로 요소의 scale 값을 0으로 지정하여 사라지게 만듭니다.
적용하게 되면 영역은 남게되며 애니메이션을 사용할 수 있습니다.

💡 코드 보기

p {transform : scale(0);}

없어집니당

뾰로롱

---

다음 시간에 뵙겠습니다! 공부하시느라 고생많으셨습니다~~! 🤩