티스토리 블로그 모바일 URL 입력창 및 네비게이션바 색깔 변경하기 (Fastboot)
- 블로그/FastBoot
- 2018. 9. 8. 00:30
안녕하세요. 네코망고 입니다. 오늘은 모바일 화면에서 URL 입력창의 색을 변경하는 방법에 대해 알아보도록 하겠습니다. 휴대폰으로 웹접속 시 URL을 입력하는 부분이 default로 흰색으로 표시되고 있는데 이 부분을 자신이 원하는 색으로 변경할 수 있습니다. 이를 통해서 자신의 티스토리 블로그의 테마를 변경할 수 있습니다. 자 그럼 모바일 URL 입력창의 색깔 변경하기 포스팅을 시작해보도록 하겠습니다. 꼭 티스토리 블로그만이 아니라 모든 홈페이지에서도 적용가능하기 때문에 유용하게 사용할 수 있을 거예요.그럼 시작해보도록 하겠습니다.
네코망고의 소소한 일상 꿀팁,
따라하기만 해도 득이되는 블로그~!
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.
Copyright (C) 2018 necomango all rights reserved.
1. 결과 먼저 보고가기
아래는 부트스트랩이라는 웹사이트에 적용된 예시입니다. 이 예시와 비슷하게 저도 URL입력창과 네이게이션바의 색을 보라색으로 통일해보겠습니다.
(부트스트랩 홈페이지)
2. URL 입력창 색깔 변경하기
관리자 모드 > 꾸미기 > 스킨 편집 > html 편집에 들어가셔서 아래와 같이 <head>와 </head>사이에 적당한 위치에
1 2 | <!-- 모바일 URL 컬러 --> <meta name="theme-color" content="#808080"> | cs |
을 입력해줍니다.
여기서 content 부분이 바로 색깔을 나타내는 건데 색상표는 네이버에서 'rgb 색상표'를 입력하여 자신이 원하는 색을 찾아 입력하면 됩니다.
3. 네비게이션바 색깔 변경하기
네이게이션 바는 CSS에 들어가서 .navbar-inverse를 입력하여 검색 후 아래 코드를 추가하여 줍니다.
1 2 3 | /*네비게이션바 색깔*/ background-color: #404040; border-color: #404040; | cs |
background-color는 배경색을 의미하고 border-color는 테두리 선을 의미합니다. 같은 색으로 지정하면 됩니다.
4. 적용 결과
자 저는 아래 사진과 같이 보라색을 적용해보았습니다.
오늘은 URL 입력창과 네이게이션 바 색상을 변경해보았습니다. URL 입력창과 네이게이션바 색상 변경으로 티스토리 블로그를 좀더 풍성하고 유려한 디자인으로 꾸며보세요.
그럼 오늘의 포스팅 마치도록 하겠습니다. 다음에도 좋은 글로 찾아오겠습니다. 안녕히 계세요.
