티스토리 블로그를 이용하시는 분들 중에서는 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파일 따로 메모장에 저장해 둡니다.


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


Posted by 정보헌터

댓글을 달아 주세요

  1. 알 수 없는 사용자 2013.03.04 11:54  댓글주소  수정/삭제  댓글쓰기

    저는 티스토리 블로그 보다 구글 블로그 스킨 수정할 때 이 방법 자주 사용했었습니다..ㅎㅎ
    티스토리 블로그 편집툴은 그나마 천천히 보다보면 대충 위치를 알겠던데, 구글은 처음 사용할 때 그런 것들을 알아보기가 너무 어렵더군요. 그래서 저 방법 사용했더니 참 요긴했던 것 같습니다..ㅎㅎㅎ
    좋은 내용 감사드립니다. 즐거운 하루 보내시고요~^^

    • 정보헌터 2013.03.04 20:13 신고  댓글주소  수정/삭제

      국장님 오늘도 반갑습니다.^^:
      사실 이걸 써도 어려운건 마찬가지더라구요
      그래도 이 방법이라도 쓰지 않음 저로썬 도저히
      해결 불가능이더라구요^^:

  2. 텐션 2013.03.04 15:13 신고  댓글주소  수정/삭제  댓글쓰기

    크롬이나 파폭, IE등 소스보기 기능중에서 저는 파폭의 애드온중에 FIREBUG가 제일 맘에 들더군요.
    워터팍스의 3D 디버깅도 HTML 초보들 한테는 정말 좋은거 같아요.

    • 정보헌터 2013.03.04 20:14 신고  댓글주소  수정/삭제

      저도 크롬 이전엔 파폭을 사용했었는데
      지금은 크롬만 거의 99%사용중이라 파폭기능은 모르고 있었네요~
      파폭을 쓰시는 분들에겐 도움이 되겠어요!!
      암튼 댓글 감사드립니다.!!

  3. 익명 2013.03.11 22:39  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  4. 알 수 없는 사용자 2013.03.13 19:09  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. 저 혹시 궁금한게 있는데요
    스킨 맨 밑에 prev 1 2 3 4 5 6 .. next 라고 된 부분은
    없앨 수 없나요?