내가 원하는 HTML 요소를 감추려면 어떻게 해야할까요?

CSS에서 요소를 감추는 5가지 방법

CSS 에서 요소를 감추는 방법은 대표적으로 5가지 방법이 있습니다. 각각의 방법마다 조금씩 특징이 다른데 지금부터 알아보시죠.

---

1. display : none

요소를 안보이게 합니다. : [애니메이션 불가능 / 영역 있음]

.box {
    display : none;
}

---

2. opacity : 0

요소의 투명도를 0으로 설정합니다. : [애니메이션 가능 / 영역 있음]

.box {
    opacity : 0;
}

---

3. visible : hidden

요소를 안보이게 합니다. : [애니메이션 불가능 / 영역 없음]

.box {
    visible : hidden;
}

---

4. width 0; height : 0;

요소의 너비값과 높이값을 0으로 만듭니다. : [애니메이션 불가능 / 영역 없음]

.box {
    width : 0;
    height : 0;
}

---

5. trasnform : scale(0)

transform 효과의 scale(0)은 크기를 0배 한다는 뜻입니다 : [애니메이션 가능 / 영역 없음]

.box {
    transform : scale(0);
}