팝오버 API 소개

Chromium 114에 popver API가 추가되었습니다. 아래는 요약본입니다. - 팝오버 API? 팝오버 속성과 후속 기능 세트를 시작으로 팝오버를 구축하기 위한 새로운 선언적 HTML API 세트가 브라우저에 제공될 예정입니다. 팝오버는 메뉴, 토글팁, 다이얼로그 등 페이지의 나머지 부분 위에 별도의 레이어에 표시되는 구성 요소입니다. - 기능 HTML 팝업은 최상위 레이어로 끌어올리기, 라이트 디스미스 기능(팝오버 외부 영역을 클릭 시 팝오버가 닫히는 기능), 기본 포커스 관리, 접근 가능한 키보드 바인딩 및 접근 가능한 구성 요소 바인딩을 지원합니다. popovertarget 속성을 사용하여 기본 팝오버를 만들거나 popovertargetaction 속성을 사용하여 명시적 팝오버를 만들 수 있습니다. 상황에 따라 자동 팝오버와 수동 팝오버 중에서 선택할 수도 있습니다. - 스타일링 다른 HTML 요소와 마찬가지로 팝오버의 스타일을 지정할 수 있으며, ::backdrop pseudo-element를 사용하여 팝오버 아래의 레이어에 스타일을 지정할 수도 있습니다. 또한 :popover-open 및 @starting-style을 사용하여 개별 속성에 애니메이션을 적용할 수도 있습니다. 또한 anchor 속성과 anchor() 함수를 사용하여 CSS 앵커링을 사용하여 팝오버를 다른 요소에 상대적으로 배치할 수 있습니다. - 팝오버 vs 다이얼로그 팝오버와 다이얼로그는 모양은 비슷하지만 동작 방식이 다릅니다. 팝오버는 라이트 디스미스를 지원하며 페이지의 나머지 부분을 비활성화하지 않는 반면, 다이얼로그는 명시적인 사용자 상호 작용이 있어야 닫히고 페이지의 나머지 부분을 비활성화할 수 있습니다. 다이얼로그와 팝오버 속성을 사용하여 팝오버 동작이 있는 시맨틱 다이얼로그를 만들 수 있습니다. https://developer.chrome.com/blog/introducing-popover-api/

Introducing the popover API - Chrome Developers

Chrome for Developers

Introducing the popover API - Chrome Developers

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2023년 5월 24일 오전 11:40

댓글 0

    함께 읽은 게시물

    < '시간이 없다'는 세상에서 가장 흔한 거짓말 >

    1. 오랜만에 만난 사람은 늘 어색하다. 뭔가 말을 건네야 한다. 인사 없이 지나가긴 애매하다. 하지만 대화 주제는 많지 않다. 날씨, 뉴스 얘기 몇 마디는 어떻게 해본다. 하지만 가장 어려운 건 마무리다.

    ... 더 보기


    🤖 최초의 AI 브라우저, Dia 직접 써봤습니다! 🌐

    ... 더 보기

    공식적으로 뭐하는 회사인지는 모르지만 일단 100억달러 기업가치

    ... 더 보기

    무라티의 싱킹 머신즈, 20억달러 투자 유치..."실리콘 밸리 사상 최대 시드 투자"

    AI타임스

    무라티의 싱킹 머신즈, 20억달러 투자 유치..."실리콘 밸리 사상 최대 시드 투자"

    조회 366


    혹시 Cursor 채팅만 사용하시나요? Agent 쓰는 방법!

    Cursor와 함께라면, 더이상 에디터는 단순한 입력 도구가 아닌

    ... 더 보기

    코루틴 Q&A

    코루틴에 대해 알아보아요 Q. 코루틴에 대해 쉽게 설명해주세요. A. 코루틴은 실행을 일시 중지하고 상태를 잃지 않고 호출자에게 다시 제어권을 양보할 수 있는 함수입니다. 이렇게 하면 기능이 나중에 재개되어 중단된 위치에서 다시 시작할 수 있습니다. 코루틴은 단일 스레드에서 여러 작업을 동시에 수행할 수 있도록 프로그래밍에 자주 사용됩니다. Q. 스레드와 비교해서 설명해주세요. A. 스레드는 다른 스레드와 동시에 실행할 수 있는 별도의 실행 경로입니다. 프로그램이 새 스레드를 생성할 때 일반적으로 별도의 스택 및 레지스터 세트가 제공되며 운영 체제는 스레드가 하나 이상의 CPU 코어에서 실행되도록 예약합니다. 이를 통해 여러 스레드가 동시에 실행될 수 있으므로 한 번에 둘 이상의 작업을 수행할 수 있으므로 프로그램의 성능이 향상될 수 있습니다. 대조적으로, 코루틴은 실행을 일시 중지하고 상태를 잃지 않고 호출자에게 제어권을 다시 양보할 수 있는 함수입니다. 이렇게 하면 기능이 나중에 재개되어 중단된 위치에서 다시 시작할 수 있습니다. 스레드와 달리 코루틴은 일반적으로 단일 스레드에서 실행되며 동일한 스택 및 ... 더 보기

     • 

    저장 14 • 조회 1,291