본문 바로가기
CSS

요소숨기기

by SyuMay 2022. 8. 29.
728x90

요소를 숨기는 법

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



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); }

728x90
반응형

'CSS' 카테고리의 다른 글

움직이는 애니메이션2  (8) 2022.08.29
움직이는 애니메이션 1  (7) 2022.08.29
색상표현  (7) 2022.08.24
단위  (4) 2022.08.24
이미지스프라이트  (4) 2022.08.22

댓글


자바스크립트 사진

JavaScript

자세히보기