6. 티스토리 스킨 만들기 사이드바 영역

오늘은 사이드바 부분을 만들겠습니다.

시작 하기 전에 말씀 드릴 점은 따로 디자인을 약간 손댔습니다.

단순히 색과 높이정도만 변경했으니 아래의 skin과 style을 다운 받아서 적용하시면 똑같이 되실 겁니다.

Skin.txt

Style.txt

이제 사이드바 내부의 태그를 넣어주어야 하는데요,

이 사이드바 부분이 없을 때 관리페이지의 사이드바 부분을 가보시면 이런 이미지가 나옵니다.

게다가 아무것도 표시가 되지 않게되죠.

이제 SKIN.HTML 부분을 가서 수정 해야겠죠?

<div id="sidebar">sidebar</div>

위의 #sidebar 부분을 아래 있는 sidebar.txt 내의 코드로 변경합니다.

치환자가 많아 블로그에선 정상적으로 글을 작성할 수 없어서 텍스트 파일로 올렸습니다. 

sidebar.txt

관리 - 사이드바를 가보면 이제 정상적으로 표시가 되네요.

일단 이렇게 이미지처럼 전부 사이드바1에 넣었습니다.

그런데... 문제가 있네요...

CSS가 적용이 되지 않았기 때문에 전부 이상하게 나와버립니다. ㅠㅠ

이 부분에 대해서는 차근차근 다루겠습니다.

이 글에서는 일단 사이드바 부분의 CSS만 수정 하겠습니다.

#sidebar {width:200px;background:#fc4349;float:left;height:342px;}

이게 기존의 코드입니다.

이 부분을 수정했습니다.

#sidebar {

width:190px;

background:#fc4349;

float:left;

color:#fff;

padding:5px;

}

#sidebar a {

color:#fff;

text-decoration:none;

}

#sidebar a:hover {color:#202d44;}

텍스트 색상을 검은색에서 흰색으로 바꿨구요.

padding으로 5px을 줘서 width값에서 10을 뺐습니다.

왼쪽 오른쪽 5px씩요.

#sidebar a 태그로 링크의 텍스트 색상을 흰색으로 바꾸고, 밑줄을 없앴습니다.

a:hover로 링크에 마우스를 올릴때 색상을 #202d44로 변경했습니다.

오늘은 이 정도까지인 것 같네요.

이건 전체적으로 수정 한 파일입니다.

Skin.txt

Style.txt

1. HTML Basic tag. 부분은 어두운 색이죠?

마우스를 올려둬서 그렇습니다.

디자인만 보지 말고 전체적으로 수정방법만 봐주세요 ㅠㅠ

디자인이 제가 봐도 너무하네요 ㅠㅠ

혹시라도 궁금하신 부분이 있으신 분들은 댓글에 남겨주시면 빠르게 답변 해 드리겠습니다^^