CSS 요소 숨기기

CSS 요소 숨기기

CSS에서 요소를 숨기는 5가지 방법에 대해 알아보겠습니다.

---

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

가장 많이 사용되는 요소 숨김 방법입니다.
화면 상 어떤 영역을 차지하지 않고 완전히 삭제된 것처럼 보이게 합니다.

/*
<div>
	완전히 삭제
</div>
<p>
	완전히 삭제
</p>
*/
div {
	display: none;
}

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

요소의 불투명도를 설정합니다. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대입니다.

/*
<div>
	완전히 삭제
</div>
<p>
	완전히 삭제
</p>
*/
div {
	opacity: 0;
}

3. visibility: hidden; (애니메이션X, 영억X)

해당 요소가 보이지 않을 뿐 요소가 존재하는 영역은 확실히 보이게 됩니다.

/*
<div>
    완전히 삭제
</div>
<p>
    완전히 삭제
</p>
*/
div {
    visibility : hidden;
}

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

transform의 scale로 요소를 확대 또는 축소할 수 있습니다.
scale을 0배율 으로 할 경우 요소의 크기가 0이되어 숨김 처리와 같은 기능을 합니다.

/*
<div>
    완전히 삭제
</div>
<p>
    완전히 삭제
</p>
*/
div {
    transform: scale(0);
}

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

기본적으로 영역의 너비와 높이를 지정하는 속성으로, 0을 주게 되면 요소가 숨겨집니다.

/*
<div>
    완전히 삭제
</div>
<p>
    완전히 삭제
</p>
*/
div {
    width: 0;
    height: 0;
}