티스토리 블로그 스킨 꾸미기 - 사이드바(sidebar) 3편 -

티스토리 블로그 스킨 꾸미기

- 사이드바(sidebar) 3편 -

무료로 제공되는 스퀘어(square) 스킨을 활용하여

코알못이 직접 수정해 보겠습니다.

2편을 못 보신분은 보고 오세요.^_^

☞ 티스토리 블로그 스킨 꾸미기 - 사이드바(sidebar) 2편 -

#sidebar .category > ul

{

margin: 0;

padding: 0;

}

margin: 0;

margin: 0; -> margin: 50px;

외부 여백이 넓어지다 보니 내부 글씨들이 찌부러졌다.

padding: 0;

padding: 0; -> padding: 50px;

#sidebar .category ul li

{

list-style: none;

}

list-style: none;

list-style: none; -> upper-roman

카테고리의 각 항목의 기호가 로마자 숫자로 바뀌었다.

#sidebar .category > ul > li > a

{

display: none;

}

display: none;

display: block;

display: inline;

display: inline-block;

none : 해당 태그를 보이지 않게 함.

block : full-width, 자동 개행.

inline : 개행 안됨, 컨텐츠 크기에 딱 맞춤, margin-top, bottom, width, height 불가.

inline-block : 개행 안됨, width, height, margin, padding 가능.

#sidebar .category ul li ul li ul

{

margin: 0 0 0 15px;

padding: 0;

}

margin: 0 0 0 15px;

margin: 0 0 0 15px; -> 50 0 0 15px

I. 자동차(30)과 II. 하드웨어(6) 등이 움직였죠?

왼쪽 마진으로 인해 밀려났습니다.

padding: 0;

padding: 0; -> 50px

내부 여백이 늘어나며 I. 공룡그룹(3) 등 리스트가 밀려났습니다.

#sidebar .category ul li ul li ul li:before

{

content: "\F0DA";

font-family: "FontAwesome";

font-size: 10px;

padding-right: 5px;

}

content: "\F0DA";

content: /* "\F0DA"; */

주석으로 해당 값을 지우니, 세모표시가 사라졌습니다.

CSS Entities를 검색하면 여러 값들을 찾으실 수 있습니다.

font-family: "FontAwesome";

폰트 패밀리는 지우면 앞의 세모가 네모가 되고

글자는 그대로 인 것 같습니다.

다른 폰트를 사용하려면 어떻게 해야는지는 좀 더 알아봐야겠습니다.

font-size: 10px;

글자가 아닌 세모의 크기가 커졌습니다;;

padding-right: 5px;

padding-right: 5px; -> 50px

음.. 세모의 오른쪽 외부 여백이 증가하여

글자가 밀린 것으로 보입니다.

content와 font-family가 중복되는 내용인지..

뭔지 잘 모르겠네요.

너무 어렵네요 ㅠㅠ

오늘은 이만

- 끝 -