구글크롬을 활용한 티스토리 스킨 수정 방법

티스토리 블로그를 이용하시는 분들 중에서는 HTML이나 CSS 등을 자유로이 다룰 줄 아시는 분들도 분명 계실 겁니다. 하지만 상당 수의 이용자들은 그렇질 못하죠! 저 또한 마찬가지 입니다. 그저께 괜히 스킨 만졌다가 몇 시간을 투자해서 겨우 정상화 시켜놨네요!

아래에 소개하고 있는 내용은 티스토리 스킨 수정시 혹시나 도움이 될까해서 올렵니다. 레이아웃 수정이나 기타 큰 부분들은 다르겠지만 배경색이나 글자색 같은 경우엔 제가 사용하는 방법도 나름 유용하리라 생각됩니다. 

우선 좌측 사이드바의 글자색을 바꾸는데 사용된 방법을 소개합니다. 이 때 아주 유용한 것이 바로 구글 크롬 브라우저입니다. 구글크롬의 "요소검사"라는 툴을 이용하면 수정하고자 하는 부분이 도대체 CSS파일의 어떤 부분에 있는 지를 쉽게 찾을 수 있게 됩니다. 그럼 시작해볼까요? !!!!

1. 요소검사 사용법

우선 구글크롬을 사용해야합니다. IE사용자라면 크롬을 다운로드 받아서 설치하면 간단하게 시작할 수 있습니다. 구글 크롬 사용자라면 간단하게 수정하고자 하는 부분에서 마우스 우클릭하면 "요소검사"라는 것이 맨 아래에 뜹니다. 요건 간단하게 실행해주면 아래 이미지와 같이 요소검사 창이 생기게 됩니다.

※ 여기서 잠깐! 티스토리 사용자 분들은 대부분 마우스 우클릭을 막아두었습니다. 먼저 자신의 블로그에 로그인을 한 다음 하셔야 합니다.

"요소검사(N)"를 클릭해주면 아래 처럼 세로로 창이 나뉘면서 HTML파일과 CSS 스타일시트파일이 각각 나오게 돕니다. 우측에 있는 부분이 해당 부분의 상세 옵션들이라고 보시면 됩니다.

2. 수정하고 싶은 부분 찾기

위의 이미지에서 하단 좌측 부분에 마우스를 아래 위로 움직여보면 상단에 실제 위치가 나타납니다. 너비와 높이도 나오지요!

제 블로그의 좌측 사이드바의 글자색이 우측부분에 나옵니다. "#7d7d7d " 부분입니다. 만일 원하는 색상으로 바꾸고자 한다면 회색박스를 클릭해서 색상상자 나오면 거기서 이리저리 움직여서 색상을 고르시면 됩니다.

이때 상단에 실제 블로그에서 해상 색상이 변경되면서 보여지기 때문에 상당히 편리합니다. 사실 이 점 때문에 크롬 요소검사가 유용한 겁니다. 즉 미리보기가 바로바로 되는 점 때문이지요! 제 (현재)블로그의 경우 위의 이미지에서 나오는 색상이 맘에 들어서 이를 선택했습니다. 그런데 위에 보시면 "#121212"이런 식으로 안 나오고 RGB로 나옵니다. 즉 rgb(141,103,103)으로 나옵니다. 물론 코드를 이렇게 해도 되겠지만 원래의 방식으로 하는게 다른 걸 수정하기에도 편할 것 같습니다.

이럴 때는 포토샵을 열어서 색상표에 위의 RGB숫자를 대입시키면 하단에 변환된 코드를 얻을 수 있습니다.(아래 이미지 참고)

rgb컬러 숫자를 대입시키면 하단 #8d6767이라는 코드를 얻을 수 있습니다. 이를 티스토리 관리화면의 HTML/CSS 편집 부분에서 수정해주면 됩니다.

3. HTML/CSS에서 수정부분 찾기

이제 티스토리 관리자 페이지에서 HTML/CSS편집 부분을 열어서 위에서 찾은 "#7d7d7d"를 찾아서 "#8d6767"로 변경해주면 됩니다.

제 블로그의 경우 맨 처음에 나오는 부분에 사이드바 글자색이 나오네요 (참고로 저는 저 코드를 변경해보고나서야 알 수 있었습니다. 그냥 코드만 봐서는 저게 사이드바 글자색을 변경할 수 있는 부분인지를 모르겠더라구요! 암튼)

4. 마무리하면서

설명이 좀 길긴 했지만 나름 도움이 되었음 합니다. 요 방법은 스킨 수정 시 다른 부분에도 충분히 적용될 수 있고 특히나 특정 부분의 폭이나 높이, 블로그 이미지의 크기 등 다양한 부분에 이용될 수 있다고 봅니다. 

## 블로그 스킨 수정 시 반드시 백업을 꼭 하세요

## 블로그 스킨 백업은 관리자화면에서 스킨 저장을 하셔도 됩니다. 저 같은 경우엔 skin.html파일 따로, style.css파일 따로 메모장에 저장해 둡니다.

그럼 모든 분들 즐거운 블로깅 되세요!!