[CSS] cursor와 요소 숨기기

✔️ cursor

• default : 보통 화살표
• none : 커서 없음
• help : 도움말 사용 가능
• pointer : 링크를 나타내는 포인터. 보통 한 쪽을 가리키는 손입니다.
• progress : 프로그램이 백그라운드에서 작업 중이지만 사용자가 인터페이스와 상호작용 할 수 있음 (wait과 반대)
• wait : 프로그램이 백그라운드에서 작업 중이지만 사용자가 인터페이스와 상호작용 할 수 없음 (progress과 반대)
• not-allowed : 요청한 행동을 수행할 수 없음
• zoom-in : 확대/축소할 수 있음
• 커서 목록 보러가기

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

✔️ 요소를 숨기는 방법

📌 opacity

• 요소의 불투명도를 설정합니다. 불투명도는 요소 뒤쪽 컨텐츠가 숨겨지는 정도로 투명도의 반대입니다.
• 요소 뒤쪽 컨텐츠도 함께 영향을 받긴 하지만 자식 요소가 상속하진 않습니다.
• 모습만 감추기 때문에 hover나 클릭 이벤트 등은 작동합니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 visibility

• 문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨깁니다.
  • visible : 요소가 보임
  • hidden : 요소가 숨겨짐(그려지지 않음)
  • collapse : <table> 의 행, 열, 행 그룹과 열 그룹에 적용하면 요소를 숨기고 차지하던 공간도 제거합니다.
• hidden으로 설정하면 hover나 클릭 이벤트 등도 무효하게 됩니다.

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📌 display

• display 속성을 none으로 하면 요소를 숨기고 차지하던 공간도 제거합니다.

 

📄 참고

https://developer.mozilla.org/

https://www.yalco.kr/@html-css