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

demun
티스토리스킨수정/사이드바
2011. 3. 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=""> .</a> 
                    <span class="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 처럼 스타일이 지정이 됩니다.
스타일의 우선순위는 앞의 선택자까지 모두 선택을 하면 우선순위가 높습니다.
스타일을 지정하고 다음에 똑같이 지정을 하면 두번째 지정한 스타일이 지정이 됩니다.

참고

2011/02/21 - [DESIGN/CSS] - 이미지 처리하는 방법(확장자)
2011/02/21 - [DESIGN/CSS] - 이미지 처리하는 방법(배경색을 입히고 이미지 그리기)
2011/02/21 - [DESIGN/CSS] - 이미지 처리하는 방법(Image Replacement , Image Sprite)

개 개

demun(대문블로그)

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

참고

티스토리툴바