유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

Everything you need to know about the Popover API

Coding in Public

2024. 12. 27.

0

#frontend
  • HTML에서 CSS만으로 팝업 창 (Popover)을 구현할 수 있는 새로운 API가 제공됩니다.✨
  • 팝업 창은 popover 속성, popover Target, popover Target action 세 가지 속성을 사용하여 제어됩니다.🚀
  • 팝업 창은 기본적으로 키보드 접근성과 클릭 이벤트를 통해 닫히도록 설정되어 있습니다.🗝️
  • 팝업 창은 popover-open pseudo-class를 활용하여, backdrop pseudo-element를 활용하여 스타일링할 수 있습니다.🎨
  • 팝업 창은 문서 상호 작용을 차단하지 않습니다.🚫
  • 팝업 창의 위치는 margin: auto를 기반으로 중앙에 위치하나, 절대 위치 조정도 가능합니다.📍

Recommanded Videos