내 블로그를 방문하는 분들의 브라우저 상단의 색상을 변경할 수 있다는 것을 아시는 분들이 많지 않습니다. 모바일 브라우저의 주소창 색상을 변경함으로써 블로그 운영자의 개성을 표현할 수도 있고, 방문자에게 색다른 느낌을 줄 수 있는 장점이 있습니다. 이 글에서 블로그 방문자의 모바일 브라우저 상단 색상을 변경하는 방법을 알아보겠습니다.
블로그 방문자의 모바일 브라우저 상단 색상을 변경하는 방법
아래 화면의 왼쪽과 오른쪽의 차이점이 보이시나요? 정답을 말씀드리면, 왼쪽은 상단 주소창의 색상 설정을 하지 않은 화면이고, 오른쪽은 노란색으로 설정한 화면입니다. 이렇게 스마트폰에서 크롬이나 삼성 브라우저로 인터넷을 하다 보면 주소창의 색상이 변경되는 블로그나 사이트가 있는데요. 간단한 색상 변경 하나로 색다른 느낌을 줄 수 있는 장점이 있는 것 같습니다. 이 글에서는 이처럼 블로그 방문자의 모바일 브라우저 상단 색상을 변경하는 방법을 알아보겠습니다.
먼저 색상을 변경하려면 원하는 색상의 Hex Code를 알아야 합니다. Hex Code를 제공해 주는 인터넷 사이트들이 많은데 저는 아래 사이트에서 주로 확인하고 있습니다.
color-hex 사이트에서는 아래 화면의 ①번과 같이 색상을 직접 조정해서 Hex Code를 선택할 수도 있고, ②번과 같이 사용자들이 많이 선택한 색상의 Hex Code를 선택할 수 있게 되어 있습니다.
여기서 여러분이 좋아하는 색상을 선택한 후 # 로 시작하는 Hex Code를 복사합니다. 저는 노란색 계열인 ‘#FFDB3B’ 으로 선택했습니다.
원하는 색상의 Hex Code 선택이 완료되었다면, 아래 코드의 content 값을 여러분의 Hex Code로 변경합니다.
<meta name="theme-color" content="#FFDB3B">
위의 코드를 <head> ~ </head> 사이에 삽입하면 되는데, 워드프레스에서 Head & Footer 플러그인을 사용하시는 분들이라면 아래와 같이 진행하시면 됩니다.
- 워드프레스 관리자 화면에서 → ‘도구’ → “Head & Footer Code” 를 순서대로 클릭한 후,
- ‘HEAD Code’ 에 위의 코드를 붙여넣기 한 후, 화면을 아래로 스크롤 하여 ‘변경사항 저장’ 을 클릭하면 적용됩니다.
다른 플러그인을 사용하는 경우, 해당 플러그인에서 <head> 부분을 찾아 위의 코드를 삽입하시기 바랍니다.
위와 같이 코드를 적용하면, 사용자가 모바일 브라우저로 저의 블로그를 방문하면, 첫 번째 그림의 오른쪽과 같이 상단 주소창의 색상이 변경됩니다.
오늘은 블로그 방문자의 모바일 브라우저 상단 색상을 변경하는 방법에 대해 알아보았습니다. 간단한 코드를 한 줄 추가하여 블로그 운영자의 개성을 표현할 수도 있고, 방문자에게는 색다른 느낌을 줄 수 있기 때문에 여러분도 적용해 보실 것을 추천드립니다.