F12 개발자 도구, 블로그 스킨 편집 CSS 위치 찾기

 

이전 포스팅에서 티스토리 블로그 WHATEVER 스킨 편집, 블로그 이름(타이틀) 글꼴 폰트 변경하기, 섬네일 리스트 2 글 '더보기' 색상 변경에 대해서 알아봤었는데요. 스킨을 수정할 때 색상, 글꼴 크기, 굵기, 여백 조정 등은 CSS 코드를 잘 알지 못해도 위치만 찾아내면 비교적 쉽게 할 수 있어요.

 

처음에는 이 코드들이 복잡하게 보여도 보면 볼수록 단순한 구조라는 걸 알 수 있어요. 개발자 도구를 이용해서 스킨 편집 CSS 코드를 쉽게 찾을 수 있는데, 이게 습관이 안 되어 있어서 알면서도 이때까지 별로 활용은 하지 않았어요. 이 부분 꼭 수정은 하고 싶은데, 대체 CSS에서 코드 위치가 어딘지 몰라서 한참을 헤매고 헤맨 적 있으실 거예요.

 

 

 

 

F12 개발자도구 이용해서 쉽게 CSS 코드 위치를 찾아 스킨을 편집하는 방법에 대해서 지금부터 알아보도록 하겠습니다. 저는 크롬(Chrome) 개발자 도구 기준으로 설명드릴게요. 우선 수정하고 싶은 블로그의 화면이 바로 보이게 크롬에서 열어놓고, 키보드의 F12 키를 누릅니다. 그러면 블로그 화면 우측에 개발자도구 창이 뜹니다.

 

 

이전 글에서 수정했던 부분을 예시로 들어볼게요. 티스토리 블로그 WHATEVER 스킨 편집, 섬네일 리스트 2 글 '더보기' 색상 변경, 블로그 이름(타이틀) 글꼴 폰트 변경을 했었죠. 더 보기 글자와 블로그 이름의 CSS 코드가 어디 있는지 찾아보겠습니다.

 

 

customizing, WHATEVER 스킨,블로그, 블로그 스킨, 커스터마이징, 코딩, 티스토리 whatever 스킨, 티스토리 반응형 스킨

 

 

표시된 1, 2번을 차례대로 클릭하고 3번의 결과값을 확인해 주면 됩니다. 1번 아이콘에 마우스 커서를 대면 페이지에서 검사할 부분을 선택하라고 나옵니다. (Select an element in the page to inspect it. Ctrl+Shift+C)  

 

이 1번 아이콘을 클릭해서 색상이 파란색으로 바뀌는 걸 확인하고 내 블로그 화면에서 수정하고 싶은 부분 2번 더보기 클릭합니다. 더보기 글자의 색상, 폰트 사이즈, 글꼴 이름 등을 확인할 수 있고요. 우측의 3번 표시된 883번이 바로 CSS 코드가 몇 번째 줄에 위치하고 있는지를 알려주는 부분입니다. 

 

블로그 관리 홈 > 꾸미기 > 스킨 편집 > html 편집 > CSS 883번째 줄에서 더보기 수정을 할 수 있습니다. 883번째 줄 아래로 폰트 사이즈(font-size), 색상(color) 값들이 나열되어 있으니 그 부분을 수정하거나 없는 값은 추가 입력해주면 됩니다. 위치만 찾으면 수정은 그다지 어렵지 않아요.

 

 

티스토리 스킨, 티스토리 스킨 수정, F12, 개발자도구, 크롬 개발자도구, 블로그 스킨 수정, CSS위치찾기

 

 

같은 방법으로 블로그명의 위치도 금방 찾을 수 있어요. 1번 선택 키를 파란색으로 활성화시키고 2번 블로그 이름을 클릭, 3번 위치값을 확인했습니다. 블로그 관리 홈 > 꾸미기 > 스킨 편집 > html 편집 > CSS 107번째 줄에 있군요. 어때요? 정말 쉽죠? ^^

 

 

이걸 모르면 위치 찾느라 눈알이 빠지는데, 이렇게 쉬운 방법이 있으니 앞으로는 그러지 않기로 해요! ㅎㅎ WHATEVER 스킨으로 교체하고 한 달 정도 써보고 결정하기로 했는데, 한 달이 훌쩍 지났네요~ 스킨 수정 후에 여러 가지 타격이 있어서 며칠 동안 고민이 좀 많았는데요. 

 

무료 스킨 중에 마음에 드는 게 몇 개 있어서 다시 교체할지, 유료 스킨을 사용해 볼지, 이전 스퀘어 스킨으로 다시 돌아갈지, 이 WHATEVER 스킨으로 그대로 갈지 고민하다 보니 넘 머리가 아프더라고요. 공들여서 수정한 부분이 아깝기도 하지만, 아쉬운 부분도 많은 스킨이라 결정이 쉽진 않네요. 

 

심플하고 깔끔한 느낌은 그대로 살리고, 필요한 부분은 적절한 위치에 빠뜨리지 않고 모두 배치하고 싶은데 두 가지를 모두 만족시키려니 쉽지 않네요. 어쨌든 분명한 것은 스킨 교체 및 수정은 자주 하지 않는 게 좋습니다. 스킨 교체 및 수정의 영향이 별로 없다고 하시는 분들도 있지만, 저는 확실히 영향을 받고 있어서 말이죠.

 

그럼 WHATEVER 스킨 수정은 여기까지 하겠습니다. 필요한 분들께 유용한 정보가 되길 바랍니다~ 

 

읽어주셔서 감사합니다 :)