모바일 크롬 탭 (주소창) 색상 변경
매번 블로그에 글을 올리고 데스크탑과 랩탑 그리고 스마트폰을 이용해 모바일 크롬으로 저의 글이 제대로 보이는지 확인을 하는데요. 그럴 때마다 매번 모바일 크롬의 탭 부분의 주소창 색상이 기본 색상으로 보여져 뭐 개인적인 느낌이겠지만 뭔가 거슬리는 것 같은 느낌이 들어 싫었거든요.
그래서 구글의 웹 업데이트 문서를 살펴보던 중에 제가 원하는 모바일 크롬 탭의 색상을 변경을 간단한 메타 태그 추가로 가능하다는 것을 알 수 있었는데요. 저도 바로 저의 블로그에 적용을 시켜 보았습니다. 방법은 아주 간단 했어요. 웹 디자인에 대한 지식이 많이 부족한 저로서는 적용해보고 안되면 말지 했는데 원하는 대로 안드로이드 모바일에서 크롬 탭 (주소창)의 색상을 변경 할 수 있었습니다.
▼ 안드로이드 모바일 크롬 브라우저에서 크롬 탭의 메타 태그를 적용 전과 후의 모습입니다. 적용 전의 모바일 크롬 탭-주소창의 색상은 기본 밝은 색상이었는데 적용은 저의 블로그 상단 부분이 블랙 색상이라 통일감을 주었는데 보기에 나쁘지 않고 전체적으로 좋은 것 같아요.
▼ 메타 태그 적용 방법은 아주 간단합니다. 오늘 적용하게 될 메타태그는 바로 <meta name="theme-color" content="#원하는색상코드"> 입니다. 여기서 #원하는색상코드" 부분을 자기 블로그 스킨 상단 색상 어울리는 색상의 rgb 코드로 변경해 주시면 됩니다. 물론 메타태그는 티스토리 블로그의 "꾸미기" 부분의 "스킨편집" 메뉴를 통해 나타나는 "html편집"을 수정해 적용이 가능합니다.
▼ "html편집"으로 오셔서 "<head>"와 "</head>" 찾으신 후 meta 태그 부분에 아래와 같이 <meta name="theme-color" content="#원하는색상코드"> 메타태그를 입력 후 원하는 색상코드 부분만 수정한 후 "적용"을 누르면 적용이 됩니다.
▼ 저는 색상 코드를 고를 때 주로 구글의 색상 코드를 이용하는데요. 전 구글이 좀 더 편하더라구요.검색은 " rgb to hex"라고 검색하시면 구글의 색상 코드 고를 수 있습니다.
▼ 다음에서도 "색상코드"로 검색하시면 원하는 색상 코드를 고를 수 있습니다.
