요소를 숨기는 방법

요소를 숨기는 법

요소를 숨기는 법은 총 다섯가지가 있습니다. 한번 살펴봅시다.

01. display를 사용하는 방법

요소가 있는 블럭을 건드리는 방법입니다. 영역을 없애버리면서 애니메이션도 쓸 수 없게 만듭니다.

.원하는 영역 { display : none; }

02. opacity 사용하는 방법

투명도를 조절하는 방법 입니다. 영역도 살릴 수 있고 애니메이션도 사용할 수 있습니다.

.원하는 영역 { opacity : 0; } // 투명도를 0으로 만듬

03. visibility 사용하는 방법

레이아웃을 변경하지 않고 요소를 보이거나 숨기는 방법입니다. 영역을 없애버리면서 애니메이션도 쓸 수 없게 만듭니다.

.원하는 영역 { visibility : hidden; } //숨긴다

04. whidth와 height값을 건드는 방법

높이값과 넓이값을 없애는 방법입니다. 영역을 없애버리면서 애니메이션도 쓸 수 없게 만드는 방법입니다.

.원하는 영역 { whidth : 0; height: 0; }

05. transform을 사용하는 방법

크기를 주지 않는 방법입니다. 영역을 없애버리지만 애니메이션은 사용할 수 있습니다.

.원하는 영역 { transform: scale(0); }