스마트폰 주소창 상단바 배경색 바꾸기
width="1000"
height="500"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvIO81aE2xp1_pgsZpiB3yA8fdMUEHylgxQdQXlzLIHWS2xNNBBa-gwXKy6Bp899Xi8sUTLobY2B13ozlzBbkFEE2Qs6yaZpjfT8tj9idr18au_o_cCfDROgE8O6gbgbmc1Y1BMCj_c_o/s0/status-bar-color-01.png"
/>
모바일 안드로이드(Android)와 아이폰(iOS) 에서 브라우저 주소창이 나오는
상단바의 배경색을 설정할 수 있습니다.
>meta 태그 >를 이용해서 자신의 웹 사이트의 테마 색상과 일치시키면 방문자에게 만족스러운
모바일 서비스를 제공할 수 있습니다. 취향에 따라 색상을 마음대로 설정할 수
있습니다. 블로그에 적용하고 싶다면 아래 단계를 따라 적용해보세요.
Blogger 대시보드에서 테마를 클릭하고 아래와 같이 HTML 편집을
클릭하십시오. 다른 플랫폼의 경우 HTML 편집 모드에서 편집하시면 됩니다.
alt="Blogger 테마 메뉴에서 HTML 편집으로 이동합니다."
width="750"
height="238"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVviNQLgMAEWx_TxJhZUYFvwEO_DxKFLhMqzQL0p10ELIsek7OW4jnnj7uIWSvB4fY_OznZLfmlC0ngqPv_WnO4YJGgVJWpYJ8Td_3qL_TW-KwiFDXTTMryZssFsT7HyGDcKXWa3Dt6s0/s0/edit-html-blogger-kr.png"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
HTML 편집 모드에서 <head> 코드를 찾습니다.
그 다음 <head> 코드의 아래쪽에 다음 코드를 붙여 넣으십시오.
<!-- Chrome, Firefox, Opera -->
<meta content='#232323' name='theme-color'/>
<!-- Windows Phone -->
<meta 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'/>
Header의 배경색과 어울리도록 위의 코드에서 표시된
>HEX 코드 >를 적절하게 변경해주세요! 그리고 테마를 저장합니다.
이제 스마트폰에서 크롬 또는 사파리 브라우저를 사용하여 블로그를 열어보세요.
변경된 사항을 확인 할 수 있습니다.
alt="black"
title="black"
width="320"
height="658"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIxTUataEZ2OTW1O7PPFdUSzKnm2w6rpXekTMVVd2YB_ZSB_LvNLUsZlSonxpNbOzsryxiTN6TQAxQNHrlGgGu4CzBsZJutyqPwDodiCK6EMzZjY6gmXeBaU9mNWSQJJ4SP4-vdXNuGb8/s0/black.png"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
alt="blue"
title="blue"
width="320"
height="658"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGofs2iPp8N_v_lnn9j_xPXbwCiwHhQGASYpMuf-j0LdyuXXwRzFIwPxjWVhgTjMqeu6DYbZVbMQ-L1oepNFTbCFkgTJL8Nw1YHTdPKsKvP01cfRwOqPKDDa4YVXonoX6HOzeSBjlmYDg/s0/blue.png"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
alt="red"
title="red"
width="320"
height="658"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglNTYJb3kfxd2DZdltL6aENU0_QgTDd5R6a3cJ1XdKIITHg2HbP-l7Ic-LCgoFGJE0cJmEjW9-dxThZHREIHsgF9p-eVRZIyTWYvqCjk8Etxy64ZAjs-Pfuj8d0l80M0jRTK5NRZYIUG4/s0/red.png
"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
주소창과 상단바의 색상이 헤더 메뉴의 색상이 변경되었습니다. 또한 브라우저의 탭
테두리 색상도 함께 변경되며 화면 아래로 스크롤을 내리면 상태바의 색깔이
유지됩니다.
alt="브라우저의 탭 전환 창의 테두리 색상도 함께 변경되는 모습"
width="241"
height="502"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZPTSTsuOCxi_8NKJ82vgT9j2ljY4Usl8FRFMUdVyplJIplGUpXVcGAWhpJtPfnb5s74ijze52sFB6NloOHEawMZH1_YJOauNnv88LcyPxmKT3Nt9-vzUG2nQAOznB7IbMHDtWziROlU8/s0/status-bar-color-03-small.gif"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
nav color.txt
2kb
aria-label="Download"
title="다운로드"
href="https://drive.google.com/uc?export=download&id=12pTC2Riz2nWnME2J1M1e324xbADroRwK"
rel="noreferrer"
target="_blank"
> >