티스토리의 블로그 스킨을 수정하다 보면 굉장히 어렵죠. 고치고 나서 제대로 나오는지 미리보기를 눌러서 확인하고, 또 고치고 미리보기하고 이런 걸 몇 번씩 반복해야 해요. 카테고리 목록이라든지 댓글 목록처럼 미리보기로 볼 수 없는 곳은 일일이 저장해서 확인해야 하고요.

크롬의 개발자도구를 이용하면 이런 작업을 조금 간단히 할 수 있어요. 미리보기를 따로 할 필요없이 바로 적용해서 볼 수 있거든요. 개발자도구를 이용하면 현재 보고 있는 페이지의 html, css 코드를 수정할 수 있어요. 이런 기능을 이용해서 블로그의 스킨을 수정한다면 블로그 스킨 수정이 훨씬 쉬워집니다.

크롬 개발자도구로 블로그 스킨 수정하기

개발자도구는 다른 브라우저에도 있는 기능인데, 보통은 오류를 찾거나 소스 코드 분석을 할 때 사용해요. 크롬에는 현재 보이는 화면의 코드를 수정할 수 있는 기능이 있어서 더 편리하죠. (다른 브라우저는 사용해보지 않아서 이런 기능이 있는지는 모르겠어요.)

블로그 스킨을 수정하고 싶은 페이지에 접속합니다.

도구 - 개발자도구를 선택해도 되고, 아래 그림처럼 수정하고 싶은 곳에 마우스 오른쪽 클릭을 해서 요소 검사를 선택해도 됩니다. 요소 검사를 선택하면 html에서 원하는 위치로 바로 이동할 수 있어서 더 편리해요.

크롬 개발자도구로 블로그 스킨 수정하기 - 수정할 부분 선택

 

"Recent Posts"에서 "요소 검사"를 클릭했더니, 개발자도구 창에서 해당하는 html 소스가 선택되어 있어요.

크롬 개발자도구로 블로그 스킨 수정하기 - html 영역

 

html에서 고치고 싶은 곳에 마우스 커서를 놓고 F2를 누르면 편집할 수 있는 창이 나와요. Recent Posts를 최신글 목록이라고 바꿔보죠.

크롬 개발자도구로 블로그 스킨 수정하기 - html 영역 수정

 

개발자도구의 왼쪽 창에는 html 소스가 나오고 오른쪽 창에는 css가 나와요. 왼쪽의 html 창에서 소스를 하나씩 선택하면 그 소스에 해당하는 css가 오른쪽 창에 나옵니다. css는 구조와 클래스에 따라 여러 css가 함께 적용되기도 하는데, 이때, 우선순위에서 밀려서 적용되지 않는 건 가로줄이 그어져 있어요. 아래 그림에서 font-size: 1.3em이 그렇죠.

체크박스가 있는데, 여기서 선택을 해제하면 해당 css 속성을 적용되지 않도록 바뀝니다.

크롬 개발자도구로 블로그 스킨 수정하기 - css 영역

 

다음은 css를 수정해보죠. text-aling:center를 추가해봤어요. 글자를 가운데 정렬하는 css에요.

크롬 개발자도구로 블로그 스킨 수정하기 3 - css 영역 수정

 

두 부분을 수정했더니 화면에서 왼쪽 정렬이 되어있던 "Recent Posts"가 가운데 정렬의 "최신글 목록"으로 바뀌었어요.

크롬 개발자도구로 블로그 스킨 수정하기 - 수정 결과 미리보기

 

실제로 블로그 스킨의 html과 css를 수정한 게 아니라 그냥 그 화면에 보여지는 것만 임시로 바꾼 거예요. 따라서 저장되지는 않아요. 이렇게 하나씩 바꾸고 수정하면서 내 블로그에 맞는 설정을 찾을 수 있어요.

이렇게 찾은 설정들을 모아서 html, css를 한 번에 수정하는 거죠.

아래 그림은 css 편집창의 제일 아래에 있는 화면인데, 레이아웃을 보여주는 그림이에요. 파란색 300 x 16이 실제 크기, 그 주변으로 padding, border-width, margin을 상하좌우의 네 부분으로 나눠서 보여줘요. margin-top:12px, margin-bottom:10px, border-bottom:1px, padding-bottom:10px이라는 걸 알 수 있어요.

크롬 개발자도구로 블로그 스킨 수정하기 - 레이아웃

생활코딩 - 크롬 개발자도구에 동영상으로 설명된 게 있으니까 한 번 둘러보세요. 버전이 조금 다르긴 하지만 글을 읽는 것보다 훨씬 더 이해가 잘 될 거예요.

함께 보면 좋은 글

티스토리 반응형 스킨 사용할 때 문제점 한 가지
애드센스 최적화 배치 도움되는 곳
검색엔진 최적화, SEO를 위한 meta, title, desciption, keywords 사용법
검색엔진 최적화 측정 사이트 - SEOCert.net
블로그 속도 측정 - Google PageSpeed Insights