반응형
현대 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에서 웹사이트에 접속하는 사용자를 위해 더 맞춤화되고 브랜드화된 경험을 제공할 수 있습니다.
반응형
'UX 개발 > HTML' 카테고리의 다른 글
| Safari에서 비디오 자동재생하기 (WeBM 파일 포함 필요) (0) | 2024.08.26 |
|---|---|
| HTML 테이블(Table)에 모서리 둥글기(border-radius) 적용하기 (0) | 2024.07.11 |
| HTML 테이블로 이메일용 반응형 레이아웃 구성하기 (No Media Query, 반응형 테이블) (0) | 2019.12.05 |
| 아이프레임(iframe) 높이 자동으로 맞추기 (0) | 2019.10.22 |
| [HTML] 숫자의 자동 링크화 현상 제거 (0) | 2019.08.04 |
