모바일 화면 상단을 보면 시간, 와이파이, 배터리 등과
접속중인 웹사이트의 url이 나오는 영역이 보입니다.
이를 보통 상태바 / 상단바 / 툴바 등등으로 다양하게 부르는데요
html을 작성할 때 <head> 안에 <meta> 태그를 몇 줄 추가해주면 위의 상단바 색상을 변경할 수 있습니다😊
|
1
2
3
4
5
6
7
|
<!-- Chrome, Firefox, Opera -->
<meta content="#232323" name="theme-color"/>
<!-- Windows Phone -->
<meat content="#232323" name="msapplication-navbutton-color"/>
<!-- iOS Safari -->
<meta content="#232323" name="apple-mobile-web-app-status-bar-style"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
|
cs |
상단바 색상을 지정하면 스크롤을 하더라도 통신사나 배터리, 와이파이가 나오는 최상단 부분의 색이
지정한 색깔로 유지가 됩니다.
content="" 의 값을 transparent 로 설정하면
배경색상이 투명해지면서 다른 요소들이 함께 보이지 않을까 싶네요🤔
2019년 기준 모바일 안드로이드 OS에서
Google Chrome, Firefox OS, Opera 브라우저, 삼성 브라우저만 지원하는 Meta 코드라고 합니다.
앞으로 다른 브라우저들도 해당 메타 코드를 차차 지원해나가겠죠?
'📁 Language > 🌏 HTML' 카테고리의 다른 글
| [html] alt와 title 속성 (0) | 2021.11.26 |
|---|---|
| [html]대화형 컨트롤에 대해 알아보자 (0) | 2021.07.31 |
