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

2013.12.18 07:30
저자 : Kurien

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

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

단순히 색과 높이정도만 변경했으니 아래의 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. 부분은 어두운 색이죠?

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


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

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


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

  1. 2014.02.25 02:32  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • Kurien 2014.02.25 10:27 신고  댓글주소  수정/삭제

      차례대로 답변해드릴께요.
      먼저 HTML 부분은 제 블로그에도 여러개가 있어서, 이것만 보셔도 대부분 이해하실 수 있을꺼에요.

      그리고 제 블로그가 멋지다니... 말씀만이라도 감사합니다.
      카테고리 부분은 스크롤바가 내려가도 고정되게 하고 싶으신 것 같은데, 그 부분은 CSS를 이용해서 충분히 가능합니다.
      MYB님 블로그를 가면 프레임셋을 이용하셨는데, 그런 방법은 이미 사용되지 않고있어요.

      스킨은 공유 해드리고 싶긴 하지만, 이게 완성된게 아니라서요..
      그냥 저 필요한 부분만 필요할 때마다 수정해서 사용하고 있기 때문에 공유하기가 좀 그렇네요 ㅋ

      마지막으로 폰트는 전체적으로 나눔 고딕입니다.

  2. 2014.12.02 17:58  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • Kurien 2014.12.02 19:16 신고  댓글주소  수정/삭제

      <div class="category">[ ##_category_##]</div>
      이 부분을 찾으신 다음 <div class="category">[ ##_category_list_##]</div> 로 변경하시면 사이드 메뉴는 펼쳐져 보이게 됩니다.
      대신 아이콘 이미지 같은건 사라지게 되므로 직접 수정하셔야 합니다.
      그리고 상단의 로고의 경우는 background를 사용하셔서 지금 상태로는 로고 이동은 힘들 것 같네요.

      id=headerBox div를 작게 하나 만드셔서 그 안에 로고이미지를 넣으시고, margin이나 padding 등을 이용하셔서 정렬하시는게 더 쉬울 듯 싶네요.

  3. 야마다 나기사 2016.04.13 21:27 신고  댓글주소  수정/삭제  댓글쓰기

    글 잘 보고 있습니다^^ 사이드바를 아랫쪽에 푸터와 같은 형태로 가로로 넣고싶은데 어떻게 하나요?

  4. uncloud 2016.11.07 15:29 신고  댓글주소  수정/삭제  댓글쓰기

    사이드바를 본문과 푸터 사이에 가로로 펼쳐두고 싶은데 어떻게 해야 하나요? 일단 사이드바의 내용은 원하는 위치에 입력돼서 나오는데 어떻게 하던지 세로로 나와서 너무 길어지네요

  5. 질투는나의힘 2017.01.07 23:44 신고  댓글주소  수정/삭제  댓글쓰기

    너무 감사드립니다. 따라하면서 많이 배우고, 또 재밌게 배우고 있습니다^^