우수한 소프트웨어와 실용적인 튜토리얼
휴대폰으로 웹사이트를 탐색할 때, 휴대폰 브라우저 주소창과 휴대폰 상태창의 색상이 웹사이트 테마와 어떻게 일치할 수 있을까요? 다음 코드는 휴대폰 주소창과 휴대폰 상태창의 색상이 웹사이트 테마와 일치하도록 하는 데 사용됩니다.
최근 BBC나 페이스북 등 인기 웹사이트에 모바일 브라우저로 접속할 때, 모바일 브라우저 주소창과 휴대폰 시스템 상태 표시줄 색상이 해당 웹사이트의 테마 색상으로 변경되는 것을 발견했습니다. 덕분에 디스플레이 인터페이스의 색상 매칭이 매우 보기 좋게 됩니다. 이 글에서는 모바일 브라우저 주소창과 휴대폰 시스템 상태 표시줄의 테마 색상을 웹사이트 색상에 맞춰 수정하는 방법을 소개합니다.
Android 5.0과 Google Chrome 버전 39부터 Chrome 브라우저에 theme-color 메타 태그를 사용하여 테마 색상을 수정하는 기능이 추가되었습니다. 이 기능은 어떤 용도로 유용할까요?
HTML5의 발전으로 모바일 웹 애플리케이션과 적응형 웹 페이지는 점점 더 모바일 앱과 유사해지고 있습니다. 테마 색상을 변경하는 이 기능은 웹 애플리케이션을 로컬 앱처럼 보이게 합니다.
이 기능은 Google Chrome에서만 지원된다는 점에 유의하세요.구글 크롬 주소창 색상 변경하기.
방법은 매우 간단합니다. theme-color 메타 태그를 사용하면 됩니다.
다음 코드 줄과 같이 태그 중간에 name="theme-color"라는 메타 태그를 추가하고 콘텐츠 값을 지정한 색상으로 설정합니다.또한, 고해상도 파비콘을 제공하면 Google Chrome에서 더 아름다운 아이콘을 우선적으로 선택할 수 있습니다. Google Chrome은 가장 높은 해상도의 아이콘을 선택합니다. 공식적인 권장 사항은 192x192px PNG 이미지를 사용하는 것입니다. 예:
테마 색상은 Google Chrome에서만 작동합니다. iPhone Safari 및 Windows Phone IE에서 주소 표시줄 표시 방식을 변경하려면 다음 코드를 참조하세요.
Safari 15의 상단 상태 표시줄 색상은 theme-color 메타 태그를 사용하여 구현됩니다. 웹 페이지 헤더에 다음 코드 줄을 추가하기만 하면 됩니다.
웹 페이지가 다크 모드를 지원하고 두 모드의 상단 상태 색상을 다르게 설정하려면 다음 두 줄의 코드를 추가하면 됩니다.
