티스토리 사이드 메뉴(최신 글, 인기 글) 만들기 #3

본 글에서는 사이드 메뉴의 공지사항, 최신 글, 인기 글 총 3개의 섹션에 대해서 만들어 보겠습니다.

(공지사항 섹션은 별거 없기 때문에 본 글에 포함해서 같이 진행하겠습니다)

 

기본 틀 구성

일단 티스토리에서 사이드바 섹션을 만들기 위해서는 s_sidebar 라는 최상위 태그를 넣어야 합니다.

<s_sidebar>
    <!-- 공지사항 -->
    <s_sidebar_element>
    <section class="notice_wrap">
        <h3>Notice</h3>
        <s_rct_notice>
        <ul>
            <s_rct_notice_rep>
            <li><a href=""></a></li>
            </s_rct_notice_rep>
        </ul>
        </s_rct_notice>
    </section>
    </s_sidebar_element>
</s_sidebar>

<s_sidebar>
    <!-- 최근에 올라온 글 -->
    <s_sidebar_element>
    <section class="post_wrap">
        <h3>Recent Post</h3>
        <ul>
            <s_rctps_rep>
            <li>
                <a class="p_category" href="">* </a>
                <a class="p_post" href="">
                    <div class="p_img_wrap">
                    <s_rctps_rep_thumbnail>
                        <img src=""/>
                    </s_rctps_rep_thumbnail>
                    </div>
                    <div>
                        <span class="p_title"></span>
                        <span class="p_cnt"></span>
                    </div>
                </a>
            </li>
            </s_rctps_rep>
        </ul>
    </section>
    </s_sidebar_element>
</s_sidebar>

<s_sidebar>
    <!-- 인기 글 -->
    <s_sidebar_element>
    <section class="post_wrap">
        <h3>Popular Post</h3>
        <ul>
            <s_rctps_popular_rep>
            <li>
                <a class="p_category" href="">* </a>
                <a class="p_post" href="">
                    <div class="p_img_wrap">
                    <s_rctps_rep_thumbnail>
                        <img src=""/>
                    </s_rctps_rep_thumbnail>
                    </div>
                    <div>
                        <span class="p_title"></span>
                        <span class="p_cnt"></span>
                    </div>
                </a>
            </li>
            </s_rctps_popular_rep>
        </ul>
    </section>
    </s_sidebar_element>
</s_sidebar>

기본 틀 구성

 

CSS

틀을 보면, 최신 글과 인기 글의 구조가 같기 때문에, 편하게 같이 디자인할 수 있습니다.

그래서, 최신 글, 인기글의 class 이름을 post_wrap으로 통일시켜서 스타일을 입힙니다.

 

색상 CSS

공지사항

/* white theme - aside - right side menu - notice (공지사항) */
.th_white_theme aside.right_side section.notice_wrap ul li a {
    color: #495057;
}
.th_white_theme aside.right_side section.notice_wrap ul li a:hover {
    background-color: #ffc9c9;
}

 

최신 글, 인기 글

/* white theme - aside - right side menu - recent, popular post */
.th_white_theme aside.right_side section.post_wrap .p_img_wrap {
    background-color: #e9ecef;
}
.th_white_theme aside.right_side section.post_wrap ul li a {
    color: #495057;
}
.th_white_theme aside.right_side section.post_wrap ul li a.p_category:hover {
    color: #ff6b6b;
}
.th_white_theme aside.right_side section.post_wrap ul li a.p_post:hover {
    background-color: #ffc9c9;
}

 

구조 CSS

공지사항

/* main - aside - right side menu - notice */
aside.right_side section.notice_wrap ul {
    padding: 0;
    margin: 0;
}
aside.right_side section.notice_wrap ul li a {
    display: block;
    padding: .75em .25em;
    font-size: 0.9em;
}

 

최신 글, 인기 글

/* main - aside - right side menu - recent, popular post */
aside.right_side section.post_wrap ul {
    padding: 0;
    margin: 0;
}
aside.right_side section.post_wrap .p_img_wrap {
    width: 50px;
    height: 50px;
    margin-right: 5px;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}
aside.right_side section.post_wrap .p_img_wrap img {
    width: 100%;
}
aside.right_side section.post_wrap ul li {
    padding: .5em 0;
}
aside.right_side section.post_wrap ul li a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.9em;
}
aside.right_side section.post_wrap ul li a.p_category {
    padding: .25em 0 .5em 0;
}
aside.right_side section.post_wrap ul li .p_cnt {
    font-size: 0.75em;
}

 

공지 사항, 마우스 올리기 전/후

글 항목, 마우스 올리기 전/후

관련 글

2019/08/24 - [Tistory Skin/작업 Log] - 티스토리, 사이드 메뉴 만들기 (html, css, js)

티스토리, 사이드 메뉴 만들기 (html, css, js)

2019/08/24 - [Tistory Skin/작업 Log] - 티스토리 사이드 메뉴(카테고리) 만들기 #2

티스토리 사이드 메뉴(카테고리) 만들기 #2