요소 숨김 기능

요소 숨김 기능

CSS에서 사용할 수 있는 5가지의 요소 숨김 기능입니다.

CSS는 숨기고 싶은 문자나 블록 등을 화면에 안보이게 처리할 수 있습니다.
방식에 따라 영역을 인식하거나 애니메이션을 적용할 수 있는 차이점이 있습니다.

방식	설명	특징
display: none;	diplay는 요소를 화면에 어떻게 보여줄지 정해주며 none는 안보이게 처리합니다.	- 영역 인식X - 애니메이션X
opacity : 0;	opacity는 요소의 불투명도를 설정하며 0으로 갈수록 투명해집니다.	- 영역 인식O - 애니메이션O
visibility: hidden;	visibility는 요소의 가시성을 나타내며 보이거나 숨기거나 겹쳐보이게 해줍니다. hidden은 숨겨줍니다.	- 영역 인식O - 애니메이션O
width: 0; height: 0;	아무 내용이 들어가지 않은 블록을 숨기는 방식입니다. 블록 내에 문자나 이미지 등이 들어간다면 적용되지 않습니다.	- 영역 인식X - 애니메이션X
transform: scaleX(0)	transform은 요소의 형태 변형시켜주며 scale은 요소의 크기를 늘리거나 줄여줍니다. 0으로 갈수록 작아지며 0이 되면 안보이게 됩니다.	- 영역 인식X - 애니메이션O