요소...를 숨...겨보자...!

요소를 숨기는 방법

요소를 숨기기 위해서는 총 5가지 방법이 있으며 해당 부분에 대해 알아보겠습니다.

---

CSS : 예제용

간단한 예제를 만들어보기 위해 하단의 CSS를 작성하였습니다.

.example{
    background-color: #5f29d3;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    opacity: 1;
}

.example p{
    padding: 15px;
}

.example:hover p.one{
    display:none;
}

.example:hover p.two{
    visibility: hidden;
}

.example:hover p.three{
    opacity: 0;
    transition: all 0.25s;
}

.example:hover p.four{
    width: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    transition: 0.25s;
}

.example:hover p.five{
    scale: 0;
    transition: 0.25s;
}

.add_bg{
    background:#42199c;
    border-radius: 50px;
    padding: 15px;
}

.example:not(:hover) p.four,
.example:not(:hover) p.five,
.example:not(:hover) p.three{
    transition: 0.25s;
}

---

display: none

display:none 트리 자체에서 없앱니다.

나에게 마우스를 올려보세요!

나는 남아요!

---

visibility: hidden;

visibility:hidden은 사용자 눈에만 안보이게 합니다.

나에게 마우스를 올려보세요!

나는 남아요!

---

opacity: 0

투명도를 0으로 설정해 눈에만 안보이게 합니다.

나에게 마우스를 올려보세요!

나는 남아요!

---

width: 0; height: 0;

높이 또는 넓이를 0으로 설정해 눈에만 안보이게 가능합니다.

나에게 마우스를 올려보세요! (대신 텍스트는 overflow:hidden을 선언해야 안보입니다.)

나는 남아요!

---

transform: scale(0)

transform(변형) 기능으로 요소의 scale 값을 0으로 설정해 안보이게 합니다.

나에게 마우스를 올려보세요!

나는 남아요!