CSS 요소를 숨기는 5가지 방법

CSS 요소를 숨기는 5가지 방법

요소를 숨기는 방법이 5가지가 있습니다. 각각 방법이 조금씩 다르고 특징이 있습니다.

---

1. display: none; (애니메이션 X, 영역X)

*{
    display: none;
}
    /*전체 요소를 표시하지 않습니다.*/  

---

2. opacity: 0; (애니메이션 O 영역 O)

*{
    opaccity: 0;
}     
/*전체 요소의 투명도를 0으로 설정합니다.  애니메이션으로 사용하여 나타낼 수도 있습니다. */

3. visible: hidden; (애니메이션 X, 영역X)

*{
    visibility: hidden;
}     
/*전체 요소를 표시하지 않습니다. 애니메이션으로 사용하여 나타낼 수도 있습니다. */
   

4. transform: scale(0); (애니메이션 O, 영역X)

*{
    transform: scale(0);
}     
/*전체 요소를 표시하지 않습니다. 애니메이션으로 사용하여 나타낼 수도 있습니다. */

4. transform: scale(0); (애니메이션 O, 영역X)

*{
    transform: scale(0);
}     
/*transform 효과의 scale(0)은 크기를 0배 한다는 뜻입니다. */

5. width: 0; height: 0; (애니메이션 X, 영역X) :blind

*{
    width: 0; 
    height: 0;
}     
/*전체 요소의 넓이를 0으로 만들어 표시하지 않습니다.*/