티스토리 블로그 스킨 편집 수정 : 기본적인 팁 3가지

안녕하세요. 쏘쏘입니다.

 

HTML, CSS 전문가분들이라면

티스토리 스킨 편집에 어려움이 없으시겠지만,

저처럼 초보 분들께서는 HTML이 뭐지, CSS가 뭐지 하면서

자신이 원하는 스킨을 만드는데 많은 어려움이 있으실 거예요.

 

그래서 이번 포스팅에서는

티스토리 블로그 운영 초반에

스킨 편집을 보다 쉽게 할 수 있는

방법에 대해 알려드리겠습니다.

 

지극히 저 개인적인 노하우지만 도움이 되었으면 합니다.

 

 

1. Test 블로그 하나 만들기

 

티스토리에 가입하면 5개의 블로그까지 운영이 가능합니다.

5개 중에 하나는 스킨 편집 HTML, CSS 공부를 위한

테스트 블로그 하나를 만드는 걸 추천드립니다.

 

아래는 제가 만든 테스트 블로그인데 글은 몇 개만 올리고

전부 비공개로 해두었습니다.

 

 

저는 블로그 초반에

이것저것 스킨 편집을 하다 보니까

HTML, CSS 구조가 복잡해졌고 쓸데없는 코드들이 생겨났습니다.

 

그래서 테스트 블로그를 하나 만들고

거기서 수정된 HTML, CSS 코드들을

메인 블로그로 옮기는 걸 추천드립니다.

 

특히 애드센스 승인이 된 상태라면,

더더욱 테스트 블로그를 만드는 걸 추천드립니다.

 

메인 블로그에서 계속 스킨 편집을 하다 보면

무효 트래픽과 무효 클릭의 위험성이 있습니다.

(저의 경험담입니다 ㅜㅜ) 

 

 

2. HTML, CSS 주석 활용하기

 

아무것도 모르는 상태에서

이곳저곳 스킨의 많은 부분들을 손대다 보니까

예전에 바꿨던 부분을 다시 바꾸려고 할 때

어디를 손대야 하는지 까먹는 경우가 많았습니다.

 

그래서 아래와 같이 변경한 행 부분에 주석을 달아놓습니다.

그리고 주석 안에는 변경 전 초기값도 적어두구요.

 

HTML 주석 : <!-- 적고 싶은 내용 -->

CSS 주석 : /* 적고 싶은 내용 */

 

이렇게 해두면 다시 코드를 바꾸고 싶을 때

찾기 기능으로 쉽게 찾고 바꿀 수가 있습니다.

 

 

3. 크롬 브라우저 검사 기능 활용

 

내가 수정하고 싶은 스킨 부분의

HTML, CSS 코드 위치를 모를 때

크롬 브라우저의 검사 기능 활용을 추천드립니다.

예를 들어 썸네일 부분을 수정하고 싶을 때,

썸네일 위에 마우스 커서를 올려놓고

마우스 오른쪽 버튼을 누르면 나오는

“검사”를 클릭합니다.

그럼 화면 오른쪽에 썸네일에 해당되는

HTML, CSS 코드를 볼 수가 있습니다.

그리고 CSS 코드를 수정해가면서

변경 사항이 적용된 스킨을 실시간으로 볼 수 있습니다.

 

물론 CSS 코드가 수정되어 저장이 되는 건 아니고

실시간 시뮬레이션 개념입니다.

 

값을 클릭하면 원하는 값으로 변경할 수 있습니다.

그리고 코드를 추가하고 싶으시면

넣고 싶은 행의 위에 있는 행의 여백을 클릭하시면 됩니다.

제가 사용하고 있는 북클럽 스킨을

아직 조금씩 수정 중이고 HTML, CSS 공부 중인데

이렇게 하나씩 고쳐 나가는 게 많은 도움이 되더라구요.

 

저처럼 초보 분들께 도움이 되고자

스킨 편집 관련한 부분은 계속해서 포스팅하겠습니다.

 

글 읽어 주셔서 감사합니다.

 

- by 쏘쏘 -