티스토리 카테고리 원하는 위치에 추가하기

1. html 코드 편집으로 들어가 원하는 위치를 찾는다 

1) F12 또는 우클릭->검사 를 눌러 아래의 개발자 창을 연다

2) 열린창의 위에 회색바의 맨왼쪽의 아래모양의 버튼을 누른다 

3) 2의버튼을 누르고 화면에 마우스를 가져다 대면 파란박스의 선택된 영역이 생기고, 아래 창에서 코드의 위치를 알려준다. 

나는 헤더 바로 아래에 카테고리를 넣고싶어 위치를 보니 id="cMain" 을 가진 영역이였다. 

 

2. 원하는 영역의 id 나 class 를 알아냈다면 

오른쪽 HTML 코드에서 컨트롤 + F 를 눌러 아까 찾은 id 나 class로 찾는다 

 

4) 위에서 찾은 위치에 html 코드를 삽입한다.(이때 #은 양쪽에 두개씩 써줘야함.. ##_  _## 이렇게.. 티스토리 코드라 지워져버림...ㅎ)

<div class="top_ctg_list">
	[#_category_list_#]
</div>

 

 

 

5) 코드를 넣었으니 CSS 를 넣는다

.top_ctg_list{padding:10px;}
.top_ctg_list .link_tit{display:none;}
.top_ctg_list .category_list {display: flex; align-content: center; 
    justify-content: center; width:100%; max-width: 600px; margin: 0 auto;}
.top_ctg_list .category_list li { flex-basis :33.33%;}
.top_ctg_list .category_list li .link_item{font-weight: bold;}
.top_ctg_list .category_list li  .sub_category_list{display:none}

.top_ctg_list .link_tit{display:none;} ==> 전체 카테고리보기 라고 뜨는 부분을 안보이게숨김 
.top_ctg_list .category_list li  .sub_category_list{display:none} ==> 카테고리 내의 서브 카테고리 숨김 

 

 

6)결과