티스토리 카테고리 꾸미기 [html/css] 편집인데요.
제가 카테고리를 수정하려고 열심히 고민한 결과 꾸미는 방법을
소개해 드립니다.
우선은 티스토리에서 제공하는 치환자를 이용해서 카테고리를 작성하는 방법입니다.
txt.txt(복사하시기 편하게 텍스트파일 첨부했습니다.)
html편집
우선은 html에 표기하는 방법입니다. html수정 들어가셔서 다음과 같은
문구를 적어주세요.
치환자 : 티스토리에서 제공하는 html/css 묶음
클래스명 : 원하는대로 수정할 수 있는 값
<div class="category">[##_category_l##]</div>
폴더형 - 티스토리 자체 카테고리 옵션1으로 수정이 가능합니다.
따라서 상세한 설정 옵션은 list형만 다루도록 하겠습니다.
<div class="클레스명"> </div>
리스트형 - 이번에 다루게 될 카테고리 옵션입니다. css에서 직접 설정을 해주셔야 하기 때문에 이번에는 list형 카테고리 옵션 수정을 하겠습니다.
<div class="category1"><h3>카테고리</h3> </div>
카테고리 최상단에 명칭을 넣는 방법입니다. 연녹색 부분에 원하는 명칭을 쓰시면 됩니다.
예시
사이드바에 카테고리를 추가하는 방법입니다.
<s_sidebar_element>
<!-- 카테고리 모듈 -->
<div class="category2"><h3>카테고리</h3>
</div></s_sidebar_element>
여기서 보시면 class를 category로 설정했는데요. 다른 용어로 자유롭게 변경 하셔서
css편집을 진행하시면 됩니다. class를 통해서 css편집과 연결되기 때문에
만약 그냥 category로 설정하시면 스킨에 따라서 다르겠지만 기존에 있던 카테고리와
연결되서 오류나 다른 방향으로 설정될 수도 있습니다.
그래서 이번글에서는 category2로 클레스를 정했다고 가졍하고 css편집을 진행 하겠습니다.
css편집
css편집으로 들어가셔서 아무곳에나 원하는 옵션을 찾으셔서 입력한 뒤 값을 수정해주세요
아무곳이나 라고 말했지만 진짜 아무곳이 아니라 다른 css편집과 구분하기 쉬운 곳에
위치시켜주셔야 다음에 작업할때 편합니다.
아래에는 아무런 꾸밈 없이 카테고리를 삽입 했을떄 나타나는 default값2 입니다.
여기서 하나씩 꾸며나가는 방법을 설명하겠습니다 !
아래의 css변경 값을 스킨 css편집에 들어가셔서 입력하시면 됩니다. 원하는 대로 골라서 그대로 적으시면 됩니다. 앞에서 범위를 설정해 주시고 { } <-상세 변경 값을 설정하시면 됩니다.
/*(설명문)*/
-> css에 설명문을 추가합니다. 설명문이라 적힌 곳에 원하는 말을 쓰시면 되며, 프로그래밍 언어로 인식되지 않아서 오류나 애러가 발생하지 않게합니다.
.category2 { }
-> 카테고리 클레스 전체 옵션
.category2 ul { }
->카테고리 자체 전체 옵션
.category2 li { }
-> 카테고리 전체의 구분점 이외의 모든 부분 옵션
.category2 a { }
-> 모든 카테고리의 글자에 관한 옵션
.category2 span.c_cnt { }
->모든 카테고리 옆에 있는 글 수에 대한 옵션
.category2 > ul > li > a { }
->"전체"카테고리의 글자 옵션
.category2 > ul > li > a > span.c_cnt { }
-> "전체"카테고리의 글 수 옵션
.category2 > ul > li > ul > li > a { }
-> 대분류 카테고리의 글자 옵션
.category2 > ul > li > ul > li > a > span.c_cnt { }
-> 대분류 카테고리의 글 수 옵션
.category2 > ul > li > ul > li > ul > li > a { }
->소분류 카테고리 글자 옵션
.category2 > ul > li > ul > li > ul > li > a > span.c_cnt { }
->소분류 카테고리 글 수 옵션
.category a:hover { }
-> 카테고리에 마우스가 올라 갔을 때 옵션
옵션 설정 css용어
padding: 0px 0px;
padding-left: 0px;
padding-light: 0px;
-> 간격 생성, 지정한 범위로 부터의 간격
margin: 0px;
-> 최고 범위에서 부터의 간격
border: 0px;
->margin과 padding 사이의 간격
같은 방식으로 magin 이나 border도 padding처럼 범위를 따로 지정할 수 있습니다.
list-style-type:none;
->none으로 된 곳에 값을 주면 설정한 범위의 텍스트에 라인에 따라서
점이나 사각형 따위의 구분을 준다. 표기는 가능하나 인터넷 브라우져의 종류에따라서 특정한 구분을 지원하지 않는 종류도 있다.
none - 출력하지 않는다
disk - 속이 빈 원
circle -검은 원
square - 사각형
decima - 숫자 (1~)
upper-alpha - 알파벳 대문자
lower-alpha - 알파벳 소문자
upper-roma - 로마자 대문자
lower-roma - 로마자 소문자
initial - 초기화 (기본값)
..... 추가적인 정보를 원하면 list-style-type을 검색하면 아주 많이 나온다.
text-decoration:none;
->글에 꾸밈을 준다. none으로 되어있는 곳에 다른 속성값을 입력한다. 기본 값은 underline으로 잡혀 있어서 아무것도 입력하지 않으면 글 아래 줄이 생긴다.
underline - 글 아래 줄을 친다.
overline - 글 위에 줄을 친다.
line-through - 글 중간에 줄을 친다.
blink - 글자가 깜빡인다. (구글에서 지원x, 익스틀로러x)
color:#fff;
텍스트나 이미지에 색상을 삽입한다.
background-color:#fff;
적용된 범위에 색상을 삽입한다..
http://muroy.tistory.com/8 html색상표
font-size:0px;
티스토리 카테고리 만들고 꾸민다고 뒤지는 줄 알았네요! 한 10몇시간 걸린듯 ㅋㅋㅋ 저도 잘 몰라서 하나하나 알아보고 했는데 다른 분들도 빠르게 보고 적용할 수 있도록 작성했어요,
다들 카테고리 이쁘게 꾸미세요!
글이 마음에 드시면 댓글과 하트 눌러주셔용~!
'블로그 꾸미기' 카테고리의 다른 글
| 티스토리 방문자 수 통계 그래프 편집하기 (0) | 2018.07.09 |
|---|---|
| 네이버 구글 웹마스터 등록방법! <블로그 키우기> (요약) (0) | 2017.06.25 |
| 기초적인 글쓰기, 폰트 HTML / CSS 용어정리 (0) | 2017.06.22 |
| T스토리 기초적 스킨 편집 및 적용법 (기초적 꼼수) (0) | 2017.06.22 |
| 티스토리 센터설정 가이드 <기초> (0) | 2017.06.22 |
| 자주 쓰이는 색상 HTML 정보 정리글 <HTML 색상표> (0) | 2017.06.22 |
로멘
정보 및 리뷰 블로거 _(^@_