모바일에서 헤더 색 변경하는 방법

티스토리 뷰

신나는 언어공부/HTML

Yolo진우 2018. 7. 31. 09:55

이번에는 모바일에서 헤더 색 변경하는 방법에 대하여 알아보겠습니다.

저는 헤더 색은 기존 맨위에 있는 색에 따라 변경되는 줄 알았는데 찾아보니 직접 변경할 수 있다는 사실을 알게되었습니다.

1. Chrome, Firefox OS, Opera 색 변경

<meta name="theme-color" content="#e0e0e0">

2. IOS Safari 색 변경

위와 똑같이 <meta> 태그를 <head> 영역에 추가시켜주면 됩니다.

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="blue">

content 속성에 아래와 같은 옵션을 넣을 수 있습니다.

옵션 1 : default - 기본 스테이터스 바

옵션 2 : blue - 파랑으로 색 변경 (모든 색 가능)

옵션 3 : blue-translucent - 투명한 파랑색으로 변경 (모든 색 가능)

이상으로 오늘 포스터는 마치겠습니다

다들 즐거운 해피코딩 하세요 ~

HTML - Role 한번 사용해보실래유? (0)	2019.08.07
HTML - 문서 바깥, 주석, 페이지 정보, 문서 구조 (Wrapper, Comment, Page Information, Document Structure) (0)	2018.07.20
HTML - 텍스트 마크업 (Text markup) (0)	2018.07.20
HTML - 리스트, 폼 마크업 (List, Forms markup) (0)	2018.07.20
HTML - 테이블, 이미지, 이미지 맵 (Table, Image and Image map) (0)	2018.07.20

TAG more

최근에 올라온 글