HTML 브라우저 색상 바꾸기 - Meta(메타 태그)를 이용한 자동 색상 설명
페이지 정보
조회 796회 작성일 22-05-25 12:26
본문
브라우저 색상 바꾸기
Meta(메타 태그)를 이용한 자동 색상 설명
홈페이지에서 상징 색을 사용하는 것은 중요하다. 접속자가 그 사이트를 더 깊이 인식하게 되기 때문이다.
그러기 위해 메타 태그(meta)를 사용해서 간단하게 브라우저 색상을 바꾸는 방법을 설명한다.
브라우저 색상 바꾸기 - Meta(메타 태그)를 이용한 자동 색상 설명
메타 태그란 뜻과 적용 방법
메타 태그란 뜻은, 웹페이지의 구조적인 정보를 전달한다는 것이다. 즉, 그 자체로 홈페이지에 나타나지는 않지만 사이트의 전체적인 정보를 담고 있다.
대체로 mete tag는 <head> 부분에 넣는다. 홈페이지를 로딩할 때 제일 먼저 불러와야 좋기 때문이다.
접속하면, 사이트의 테마 색상(상징 색깔)로 브라우저 색상을 변경하는 방법도 같은 흐름이다.
즉, <head>에 mete tag를 넣어서 브라우저의 색을 바꿔서 사이트 색과 같게 만든다는 것이다.
단, 스마트폰 설정을 변경하는 것이기 때문에 PC 브라우저는 적용되지 않는다.
Meta 태그로 브라우저 색 바꾸기 예제
홈페이지 파일을 편집해야 하므로 head.php 같은 헤드 파일을 연다.
만약, 그누보드 같은 것을 사용하고 있다면 관리자 모드로 들어가서 환경설정 부분에 입력하면 되고, 블로그를 하고 있다면 블로그 html 수정 모드로 들어가면 된다.
[code]
<head>
<meta name="theme-color" content="색 코드">
</head>
[/code]
위에서 theme-color가 브라우저 색을 변경하는 메타 부분이다. content="색 코드"에 원하는 색 코드를 넣으면 간단하게 적용이 가능하다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
만약 브라우저 색을 오렌지 색으로 바뀌게 하고 싶다면 아래처럼 색 코드를 넣으면 된다.
[code]
<meta name="theme-color" content="#ffcc00">
[/code]
그런데, 이렇게 휴대폰 브라우저의 색을 바꾸는 것은 홈페이지와 브라우저 색을 비슷하게 만들어서 사용자에게 인상을 남기기 위한 것이므로, 사이트의 메인 빛깔을 적용하는 것이 좋다.