상자에서 벗어나다

CSS는 주로 직사각형 상자 스타일링에 사용되지만 새로운 기능은 디자인의 경계를 확장하고 있습니다. PWA의 창 제어 오버레이 기능은 개발자가 앱 창의 전체, 제목 표시줄 영역 포함하여 이를 활용할 수 있도록 합니다. 이 기능은 제목 표시줄과 창 제어의 물리적 제약을 제거하여 앱의 콘텐츠 위에 이를 오버레이할 수 있습니다. 이 기능을 사용하려면 웹 앱의 매니페스트 파일에 "window-controls-overlay"를 추가하세요. 새로운 CSS 환경 변수, 예를 들어 "titlebar-area-x" 및 "titlebar-area-width",은 제목 표시줄이 있었을 위치에 콘텐츠를 배치하면서 창 제어와 겹치지 않도록 보장합니다. 창 제어 버튼이 콘텐츠를 가리지 않도록 앱의 테마 색상을 콘텐츠 배경 색상과 일치하도록 웹 앱 매니페스트 파일 또는 "theme-color" 메타 태그를 사용할 수 있습니다. 이 기능은 데스크톱 디바이스에서 PWA가 더 몰입감 있고 통합된 경험을 생성할 수 있도록 허용합니다.