iPhone Safari 상단 영역의 색상을 변경하는 방법: theme-color 메타 태그 활용하기

아이폰 탈모 영역의 배경색을 바꿔 보자

아이폰 탈모 영역의 배경색을 바꿔 보자

현대 iPhone 기기의 Safari에서 상단 영역(주소 표시줄과 상태 표시줄 포함)의 색상을 변경하려면 HTML에서 theme-color 메타 태그를 사용하면 됩니다. 이 메타 태그를 사용하면 웹사이트가 Safari에서 표시될 때 상단 영역에 사용할 색상을 지정할 수 있습니다.

1단계: theme-color 메타 태그 추가하기

HTML 파일의 <head> 섹션에 다음 메타 태그를 추가하세요:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#ff0000"> <!-- 원하는 색상으로 #ff0000을 대체하세요 -->
</head>

#ff0000을 상단 영역에 사용하고자 하는 색상의 16진수 코드로 변경하세요.

2단계: apple-mobile-web-app-status-bar-style 메타 태그 추가하기 (선택 사항)

상태 표시줄의 스타일을 기본값, 검정색 또는 투명한 스타일로 설정하는 등 더 많은 제어를 원한다면 다음을 사용할 수 있습니다:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <!-- 또는 "black", "default" -->

apple-mobile-web-app-status-bar-style 옵션

  • default: 장치의 테마에 따라 달라지는 기본 외관.
  • black: 검정색 상태 표시줄.
  • black-translucent: 콘텐츠가 그 아래로 흐를 수 있도록 하는 반투명 검정 상태 표시줄.

두 메타 태그를 함께 사용한 예시

다음은 두 태그를 함께 사용하는 예시입니다:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#3498db"> <!-- 상단 영역 색상 변경 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <!-- 반투명 상태 표시줄 설정 -->
</head>

고려 사항

  • 이 메타 태그들은 iOS 기기의 홈 화면에 웹사이트가 저장될 때 영향을 미칩니다.
  • theme-color는 특히 장치가 다크 모드일 때 주소 표시줄 색상을 항상 변경하지 않을 수 있습니다. Safari가 가독성을 위해 색상을 덮어쓸 수 있기 때문입니다.
  • 의도한 대로 표시되는지 확인하려면 라이트 모드와 다크 모드에서 모두 테스트해 보세요.

이러한 메타 태그를 사용하면 iPhone에서 웹사이트에 접속하는 사용자를 위해 더 맞춤화되고 브랜드화된 경험을 제공할 수 있습니다.

Related