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

요소를 숨기는 방법에 대해 알아봅시다 !

CSS에서 요소를 숨기는 방법은 총 5가지가 있습니다. 하나씩 알아볼까요~?

---

📌 display: none;

display: block / inline-block / inline / none;

display 속성은 요소를 어떤 형태로 보이게 할건지 정하는 속성으로, display: none;을 설정하면 요소를 숨길 수 있습니다.

애니메이션 적용X, 영역X

📌 opacity: 0;

opacity: number | initial / inherit;

opacity 속성은 요소의 투명도를 설정하는 속성으로 아래와 같이 설정이 가능합니다.
number : 0(완전 투명) ~ 1(완전 불투명) 사이의 값
initial : 기본값
inherit : 부모 요소의 속성값 상속

애니메이션 적용O, 영역O

📌 visibility: hidden;

visibility: visible / hidden / collapse;

visibility 속성은 문서의 레이아웃을 변경하지 않고 요소를 보아거나 숨기는 속성으로, visibility: hidden;을 설정하면 요소를 숨길 수 있습니다.

애니메이션 적용X, 영역X

📌 width: 0; height: 0;

요소의 너비와 높이를 모두 0으로 만들어 숨기는 방법입니다.

애니메이션 적용X, 영역X

📌 transform: scale(0);

transform: matrix( ) / translate( ) / scale( ) / rotate( ) / skew( );

visibility 속성은 요소에 회전, 크기 조절, 기울기 조절, 이동 효과 등을 주는 속성으로, transform: scale(0);을 설정하면 요소를 숨길 수 있습니다.

애니메이션 적용O, 영역X