사이드바에 위젯마다 테두리 넣기

게시자: 대문 demun 카테고리: 티스토리스킨수정/사이드바 2011.03.13 11:00
이번에는 사이드바를 수정하는 방법을 알려드리겠습니다. 질문도 있고 해서 본인의 스킨에서도 수정할수 있도록 알려드리겠습니다.
사이드바에 최근글, 최근댓글, 최근트랙백, 카운터, 태그...... 등등 많은 것이 있지요.
이는 스킨을 제작할때 어느정도는 스킨에 어울리도록 만들지만 그렇지 않은경우나 , 또 본인의 스타일대로 변경하고자 할 경우 아래처럼 수정하면 됩니다.
우선 html 부터 살펴봅니다.
html 이 일정해야 css 스타일이 간단합니다.
티스토리에서 사이드바의 html 은 아래와 같습니다. 티스토리 스킨가이드에서 알려준 html 형식입니다.
최근글만 좀더 자세하게 표시하였습니다.


<div id="sidebar">
<s_sidebar><!-- 오른쪽 사이드바 -->
    <s_sidebar_element><!-- 카테고리 --> ... <s_sidebar_element>
    <s_sidebar_element><!-- 최근에 올라온 글 -->
        <div class="recentPost">
        <h3>최근에 올라온 글 </h3>
            <ul>
            <s_rctps_rep>
                <li>
                    <a href="[##_rctps_rep_link_##]"> [##_rctps_rep_title_##].</a> 
                    <span class="cnt">[##_rctps_rep_rp_cnt_##]</span>
                </li>
            </s_rctps_rep>
            </ul>
        </div>
    </s_sidebar_element>
    .
    .
    <s_sidebar_element><!-- 카운터 -->... <s_sidebar_element>
</s_sidebar>

<s_sidebar><!-- 배너 삽입 사이드바 -->
    <s_sidebar_element><!-- 배너 모듈 - 태터툴즈 --> ... <s_sidebar_element>
    <s_sidebar_element><!-- 배너모듈 - 올린 --> ... <s_sidebar_element> 
    <s_sidebar_element><!-- 배너모듈 - RSS Feed -->... <s_sidebar_element>
</s_sidebar>
</div>


여기서 좀더 들어가보면 각각의 메뉴 즉 최근글, 최근댓글, 검색, 태그, 글보관함....이 보입니다.
여기서는 class="recentPost 이렇게 나온부분이죠. 
저의 경우는 이 부분을 id 로 하고 적당한 클래스를 하나 만듭니다. 뭐 box 라고 하나 생성해보죠. 그럼 아래처럼 수정이 됩니다.
id="recentPost class="box"  이렇게 수정이 되겠지요.
각각의 메뉴부분을 id 로 수정하고 box 클래스를 추가합니다. 이것은 스타일을 설정할때 편하게 하기 위함입니다.
각 메뉴부분의 클래스를 지정해서 스타일을 지정할때는 box 라는 클래스를 추가하지 않아도 됩니다.
수정하면 아래처럼 됩니다.


<div id="sidebar">
    <s_sidebar><!-- 사이드바 -->
        <s_sidebar_element><!-- 카테고리 -->
            <div id="category" class="box">
            ...
            </div>
        </s_sidebar_element>
        <s_sidebar_element><!-- 최근에 올라온 글 -->
            <div id="recentPost" class="box">
            ...
            </div>
        </s_sidebar_element>
        <s_sidebar_element><!-- 최근에 달린 댓글 -->
            <div id="recentComment" class="box">
            ...
            </div>
        </s_sidebar_element>
        <s_sidebar_element><!-- 최근에 받은 트랙백 -->
            <div id="recentTrackback" class="box">
            ...
            </div>
        </s_sidebar_element>
        <s_sidebar_element><!-- 태그 클라우드 -->
            <div id="tagbox" class="box">
            ....
            </div>
        </s_sidebar_element>
        <s_sidebar_element><!-- 글 보관함 -->
            <div id="archive" class="box">
            ...
            </div>
        </s_sidebar_element>
        <s_sidebar_element><!-- 링크 -->
            <div id="link" class="box">
            ....
            </div>
        </s_sidebar_element>
    </s_sidebar>
</div><!-- //sidebar -->



이렇게 각 메뉴마다 id 로 수정하고  box 클래스를 추가해주면 html 은 위처럼 됩니다.
그럼 스타일을 설정해주면 공통적으로 스타일이 지정이 됩니다. 
box 마다 서로 떨어져있어야하니까 margin 값을 주고, border 를 줘서 각 메뉴마다 선으로 감싸게 했습니다. 

.box{
	border:1px solid #ccc;
	margin-bottom:20px;
}


이렇게하면 공통적으로 사이드바의 모든것이 적용이 됩니다.
그럼 어느 한 부분만 공통적인 스타일이 아니라 다른 스타일로 적용하고 싶을때는........
이때도 간단합니다.
즉 태그부분만 수정을 해보도록 하겠습니다.
스킨에서도 곧잘 써먹습니다.
box 아래의 a 링크에 공통적으로 배경스타일을 지정했다고 가정합니다.
아래처럼요.


.box a{
	background:#ccc;
}


근데 태그 부분의 a 링크에 배경스타일을 #fff 로 수정하고 싶을때는 위의 코드 아래에 다음의 코드를 넣어주면 됩니다. 그럼 위의 코드가 아래처럼 수정이 되겠죠.


.box a{
	background:#ccc;
}
#tagbox .box a{
	background:#fff;
}


즉,
#tagbox..... 등으로 따로 스타일을 지정하면 그 부분만 그 스타일이 지정이 되고 나머지는 .box a 처럼 스타일이 지정이 됩니다.
스타일의 우선순위는 앞의 선택자까지 모두 선택을 하면 우선순위가 높습니다.
스타일을 지정하고 다음에 똑같이 지정을 하면 두번째 지정한 스타일이 지정이 됩니다.

댓글

  1. 2011.03.13 13:23 신고 BlogIcon 맨웅  댓글주소  수정/삭제  댓글쓰기

    아~ 간단하군요!
    정말로 고맙습니다.
    또 질문을 하게되어 죄송하지만..

    그...보통 플러그인(위젯)보면요, 거의다 가운데 정렬되있던데..
    왼쪽정렬로 못바꾸나요? (제 블로그 같은경우 블로그 목표달성 위젯.)
    그리고 검색창보면 돋보기 그림 위치이동 어떻게하나요 ? 하나하나 수정해서 봤지만 변함이업는..
    검색창은 옮겻는데..

    • BlogIcon 맨웅 2011.03.14 18:39 신고  댓글주소  수정/삭제

      아 그리고 CSS에서 가운데정렬하는 태그좀 알려주세요.

    • BlogIcon 대문 demun 2011.03.14 19:54 신고  댓글주소  수정/삭제

      스킨수정 카테고리에 보면 검색창에 관련한 글이 있습니다. 읽어보시면 됩니다.


      가운데 정렬이라......
      뭘 정렬하는것에 따라 다릅니다.

      우선 text-align:center 해보세요. 가운데정렬 됩니다.

      그리고 목표달성위젯은 html 에보면 div style="text-align:center 이라고 되어있습니다.
      이걸 left 로 바꾸면 왼쪽 정렬됩니다.

    • BlogIcon 맨웅 2011.03.15 17:51 신고  댓글주소  수정/삭제

      저번에 저렇게 했는데요.
      그림하고 다른건 왼쪽이고
      카테고리 라는 글씨만 가운데정렬되더라구요.

    • BlogIcon 대문 demun 2011.03.15 19:29 신고  댓글주소  수정/삭제

      카테고리라고 적힌곳만 왼쪽정렬하려면 #sidebar h3{text-align:left;} 를 적용하면 됩니다.

      아니면 위젯들을 전부 왼쪽 정렬하려면 각각의 아이디를 선택하고 text-align:left 를 적용하셔야 하구요.

      즉 ,
      #searchBox, #category....{text-align:left;}

      그리고 님의 코드는 무질서하게 넣어져서 수정을 할래야 할수가 없습니다.
      차라리 스킨을 새로 만드는것과 같아요.

      html 에 스타일이 들어가있고, 코드도 일률적이지 않아서에요.

    • BlogIcon 맨웅 2011.03.15 21:28 신고  댓글주소  수정/삭제

      아쉽지만, 지금 제 수준에서는 질서를 지킬방법을 모르겟습니다. 그렇다고 하나하나 질문하기엔 너무 많은거같고, 배워야 하긴하는데 어디서 어떻게 배워야하는지 몰르겠습니다. 그냥 겉으로는 비슷하게 표현되지만 태그? 를다루는게 미숙해서 속은 엉망징창일겁니다..

      음.... 보통 처음에는 어떻게 시작하나요?