어떠한 사이트를 보는 중 크롬 기반 브라우저에서 위와 같이 url영역의 색상이 변경되는 부분을 가끔 목격 할 때가 있다.
실무 도중 기획자분과 디자이너 분께서 가능한지 요청하여 방법을 찾아보았고 실제로 적용해보니 특정한 컨셉의 랜딩페이지의 경우 url영역의 색상까지 컨셉에 맞춰 변경 할 수 있다면 시각적으로 유용하게 쓸 수 있을 것 으로 보였다.
css,자바스크립트로는 제어가 불가능한 영역이지만 <mete>태그와 그 속성값을 이용하면 한줄만으로 위의 영역을 간단하게 색상 변경이 가능하다.
<meta name="theme-color" content="색상코드" />
<head>태그 안에 name속성의 값이 theme-color 인 <meta>태그에 content속성에 원하는 색상코드 값을 넣으면 위의 이미지와 같이 크롬 기반 브라우저에 한정하여 간단하게 url 영역의 색상을 변경 할 수 있다.
반응형
'퍼블리셔 Note > HTML' 카테고리의 다른 글
| [HTML5] 모바일 친화적인 달력 UI를 제공하는 <input type="date"> (0) | 2023.10.31 |
|---|---|
| [HTML] 유튜브 썸네일 이미지 가져오기 (0) | 2022.05.26 |
| [HTML] 특정 요소의 범위를 표현할 때 쓰는 'meter' (0) | 2022.03.28 |
| [HTML5]작업의 진행률 표시줄을 나타내는 태그 'progress' (0) | 2022.03.18 |
| [HTML5] 스크립트 없이 동적으로 클릭시 세부 사항을 보여주는 태그 'details' (0) | 2022.03.18 |