티스토리 스킨 편집 쉽게하는 팁 (F12의 마법)

 

@영덕 베르데 레스토랑 옆길

 

웹 디버깅 툴 F12 [ devtools ]

 기본적으로 웹 디자인을 디테일하게 수정하거나 할 때 자주 사용하는 기능이다. 티스토리 스킨 편집 때도 비슷하게 활용할 수 있어서 소개하려고 한다. 바로 devtools이다. 크롬이나 인터넷 익스플로러, 파이어 폭스 등 웹 브라우저랑 관계없이 F12를 누르면 devtools가 뜨게 되어 있다. 뜨는 위치는 다를 수도 있지만, 간단한 설정을 통해 위치 조정을 하거나, 새창으로 띄울 수가 있다.

 

Chrom에서 F12 눌렀을때 화면

IE에서 F12 눌렀을때 화면

 

 

엘리먼트 선택 기능

 엘리먼트 선택 기능을 이용하면 내가 수정하고자 하는 엘리먼트를 선택해서 해당 엘리먼트의 Class나 Tag 등을 알 수 있다. 원하는 Class명을 가지고 수정을 CSS편집을 통해 수정을 할 수 있다. devtools창의 오른쪽 상단에 보면 아이콘이 존재한다. 해당 아이콘을 클릭하고 원하는 엘리먼트를 클릭하면 오른쪽에 해당 엘리먼트에 적용된 스타일 정보가 뜬다.

 

아이콘을 클릭 후 본문의 한 문장을 클릭 했을때 화면

 

 

예제 - sub menu 수정해보기!!

실제 예제 참조 - 제가 사용하는 스킨은요 (feat. 서브 메뉴 여백 주기)

제가 사용하는 스킨은요 (feat. 서브 메뉴 여백 주기)

위 링크를 참조해보면 제가 설명드린 방법을 통해 Class명을 알아냈고 알아낸 Class명을 바탕으로 Style를 적용하는 방법에 대해 간단히 설명드렸습니다. 

 

sub_category_list 클래스

<ul class="sub_category_list">
  <li class="">
    <a class="link_sub_item" href="/category/%EC%83%9D%EA%B0%81/%EC%95%84%EC">
      아이디어
    </a>
  </li>
</ul>

코드를 보시면 class="link_sub_item" 이라는게 보이실 텐데 이 부분이 Class명입니다. 이 부분을 다음 Step에서 활용해 볼 예정입니다.

 

 

Class에 Style 적용하기

 Class명을 알고 있다면 Style를 어렵지 않습니다. 티스토리에서 스킨 편집에 들어가신 후 CSS 편집에 들어가셔서 아래와 같이 Style 코드를 됩니다.

 

CSS 수정

 

마치며.

 모든 엘리먼트를 위와 같은 방법으로 수정이 가능한 것은 아닙니다. CSS에서 수정했다 하더라도 최종 javascript 코드 단에서 바꿔버릴 수도 있고, 그 외 tistory에서 최종 변경하는 부분도 있을 수 있기 때문입니다. 하지만 기본적으로 위 방법을 알아 두면 세세한 Style 수정 시 많은 도움이 되리라 생각됩니다.

[ 블로그 관리 꿀 TIP 모음 ]

2020/07/28 - [정보/블로그] - 제가 사용하는 스킨은요 (feat. 서브 메뉴 여백 주기)

2020/08/01 - [정보/블로그] - 티스토리 스킨 편집 쉽게하는 팁 (F12의 마법)

2020/08/01 - [정보/블로그] - 티스토리 글 구글 검색 누락 등록 방법 (구글 노출)

2020/08/02 - [정보/블로그] - 티스토리 사진/이미지 가로로 배열하기 (2개 이상 나란히 놓기)

2020/08/03 - [정보/블로그] - 블로그 최적화 도움 사이트 모음 (last updated 20.08.04)

2020/08/04 - [정보/블로그] - 카카오 애드핏 (Kakao AdFit) 가입 신청 및 적용하기

2020/08/05 - [정보/블로그] - 카카오 애드핏 (Kakao AdFit) 심사 하루만에 결과가 나오네요

2020/08/07 - [정보/블로그] - 블로그 후원 서비스 '도네리카노' 적용하기 (티스토리에 기부/후원 버튼 만들기)

2020/08/11 - [정보/블로그] - 티스토리용 블로그 소통/품앗이 창구 - 티스토리 포럼 활용하기!

2020/08/12 - [정보/블로그] - 티스토리 '서식' 기능 활용해서 글 작성 효율 200% 높이기

2020/08/14 - [정보/블로그] - 티스토리 블로그 본문 [테이블 가운데 정렬] & [링크 새창열기] 적용 방법

2020/08/18 - [정보/블로그] - 23일만에 구글 애드센스 한번에 통과했습니다!! (8/11 신청)

2020/08/20 - [정보/블로그] - 구글 애드센스(AdSense) & 카카오 애드핏(AdFit) 한달만에 승인 후기 & 꿀팁 정리

2020/08/23 - [정보/블로그] - 티스토리 블로그 빙(Bing)에 검색 등록 / 노출 시키는 방법