cover

[티스토리 블로그 스킨 제작 가이드 강의 11] 최근 공지사항

categoryCategory
Tistory
tagsTags
Skin
Lecture
calendarCreated
2024-02-16 오전 04:57
calendarUpdated
2024-02-16 오후 12:15

안녕하세요.

이제 사이드바의 기능은 카테고리와 공지사항, 두 개밖에 안 남았습니다. 금방이죠?

loading

이번 시간에는 최근 공지사항을 구현해보도록 하겠습니다. Book Club Skin을 보시면 이렇게 최근댓글과 유사한 형태를 가지고 있는데요.

loading
loading

여러 개 태그를 만들어주는 그룹치환자와 title, 그리고 link 치환자만 있으면 될거 같습니다. 스킨 가이드를 보시면 그렇게 많지는 않은데요.

info
      보시다시피 썸네일이나 날짜 같은것을 불러올 수 없어서 요즘에는 페이지 를 많이 사용하긴 합니다. 페이지도 최근 공지사항처럼 만들 수 있는데 이건 이후에 다뤄보시면 쉽게 감을 잡으실 수 있을거에요.
loading

우선 치환자를 사용할 수 있는 곳을 제한하는 <s_rct_notice> 치환자가 있고, 반복적으로 여러 태그를 만들게 도와주는 <s_rct_notice_rep> 치환자가 있습니다. 거기에 link와 title까지 익숙한 값 치환자들이죠? 어차피 다 사용해야하니까 바로 구현해보도록 하겠습니다.

공지사항 작성하기

코드를 작성하기 전에 잠시 해야할 일이 있습니다. 바로 공지사항에 글을 쓰는거죠! 블로그 관리 페이지로 이동해서 콘텐츠에 있는 공지관리를 클릭해주세요!

loading

그리고 우측 상단에 있는 공지 쓰기를 클릭합니다.

loading

그리고 간단하게 제목을 쓰고 발행을 해줍니다. 대표 이미지는 아무거나 넣어주시면 돼요

loading

글을 쓰셨다면 이제 최근 공지사항을 구현해보겠습니다.

loading

Book Club skin처럼 구현하기

HTML 편집 페이지로 이동해서 인기글 아래에 <sidebar_element>를 추가해볼게요. 주석은 최근 공지사항이라 넣겠습니다. 그리고 recent-notice라는 클래스를 가진 <div> 태그를 추가할게요.

html
      <s_sidebar_element>
  <!-- 최근 공지사항 -->
  <div class="recent-notice"></div>
</s_sidebar_element>

그리고 공지사항을 위한 그룹치환자를 만들어서 그 안에 제목을 넣은 다음 아래에 list 태그들을 추가할게요.

html
      <s_sidebar_element>
  <!-- 최근 공지사항 -->
  <div class="recent-notice">
    <s_rct_notice>
      <h3>최근 공지사항</h3>
      <ul>
        <li></li>
      </ul>
    </s_rct_notice>
  </div>
</s_sidebar_element>

<li> 태그를 반복해서 만들어야하는거니까 이 태그 바깥쪽에 반복을 위한 그룹치환자를 넣어주면 되겠죠?

html
      ...
<ul>
  <s_rct_notice_rep>
    <li></li>
  </s_rct_notice_rep>
</ul>
...

그리고 <li> 태그 안에는 <a> 태그를 추가해서 link와 title 치환자를 넣어보겠습니다.

html
      ...
<li>
  <a href="[##_rctps_rep_link_##]">[##_rctps_rep_title_##]</a>
</li>
...

적용하고 새로고침 한 다음 이제 당연하다시피 사이드바 설정에서 최근 공지사항을 옮겨주겠습니다.

loading

다시 돌아와서 새로고침을 해보면 이렇게 최근 공지사항이 나오는데요.

loading

CSS 스타일 꾸미기

이제 CSS 탭으로가서 스타일을 꾸며보겠습니다. 최근 댓글과 유사하니까 .recent-reply 태그 스타일을 그대로 사용하면 되겠죠? 복사해서 아래에 붙여넣고 reply를 notice라고 바꿔주세요.

css
      .recent-notice {
  margin-bottom: 30px;
  font-size: 14px;
  color: gray;
  line-height:1.6;
}

.recent-notice h3 {
  font-size: 14px;
  margin-bottom: 5px;
}

새로고침하면 이렇게 간단하게 완성이 되었습니다!!

loading

지금 보니 제목들이 조금 색상이 연한거 같아서 진하게 바꿔볼게요. aside 있는 곳 아래에 이렇게 코드를 추가해주세요

css
      ...

aside {
  width: 230px;
  padding: 60px 40px;
  border-left: 1px solid #eee;
}
/* 추가 부분 */
aside h3 {
  color: #666;
}
/**********/

...

조금..? 더 낫네요!

loading

최근 공지사항 설정

최근 공지사항 개수도 마찬가지로 사이드바 설정에서 결정할 수 있습니다. 최근글, 댓글, 공지 모두 0개부터 최대 30개까지 설정할 수 있지만, 보통 4~5개면 충분하겠죠?

loading

다음 시간에는 카테고리를 다뤄보도록 하겠습니다.

감사합니다.

전체 코드

html
      <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <s_t3>
      <div class="container">
        <header>
          <div class="top">
            <a class="title" href="[##_blog_link_##]">[##_title_##]</a>
            <s_search>
              <div class="search">
                <input
                  name="[##_search_name_##]"
                  value="[##_search_text_##]"
                  placeholder="검색내용을 입력하세요."
                  onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }"
                />
                <button onclick="[##_search_onclick_submit_##]">
                  <img src="./images/search.svg" />
                </button>
              </div>
            </s_search>
            [##_blog_image_##]
          </div>
          [##_blog_menu_##]
        </header>
        <div class="wrapper">
          <main></main>
          <aside>
            <s_sidebar>
              <s_sidebar_element>
                <!-- 방문자 수 -->
                <div class="counter">
                  <div class="total">
                    <div>전체 방문자</div>
                    <div>[##_count_total_##]</div>
                  </div>
                  <div class="today">Total : [##_count_today_##]</div>
                  <div class="yesterday">
                    Yesterday : [##_count_yesterday_##]
                  </div>
                </div>
              </s_sidebar_element>
              <s_sidebar_element>
                <!-- 태그 클라우드 -->
                <div class="tagbox">
                  <h3>태그</h3>
                  <s_random_tags>
                    <a href="[##_tag_link_##]" class="[##_tag_class_##]"
                      >[##_tag_name_##]</a
                    >,
                  </s_random_tags>
                </div>
              </s_sidebar_element>
              <s_sidebar_element>
                <!-- 최근 댓글 -->
                <div class="recent-reply">
                  <h3>최근댓글</h3>
                  <ul>
                    <s_rctrp_rep>
                      <li>
                        <a href="[##_rctrp_rep_link_##]"
                          >[##_rctrp_rep_desc_##]</a
                        >
                      </li>
                    </s_rctrp_rep>
                  </ul>
                </div>
              </s_sidebar_element>
              
              <s_sidebar_element>
                <!-- 최근에 올라온 글 -->
                <div class="recent-posts">
                  <h3>최근글</h3>
                  <s_rctps_rep>
                    <a class="item" href="[##_rctps_rep_link_##]">
                      <div class="text">
                        <h4>[##_rctps_rep_title_##]</h4>
                        <p>[##_rctps_rep_simple_date_##]</p>
                      </div>
                      <s_rctps_rep_thumbnail>
                        <img src="[##_rctps_rep_thumbnail_##]" />
                      </s_rctps_rep_thumbnail>
                    </a>
                  </s_rctps_rep>
                </div>
              </s_sidebar_element>

              <s_sidebar_element>
                <!-- 인기글 -->
                <div class="recent-posts">
                  <h3>인기글</h3>
                  <s_rctps_popular_rep>
                    <a class="item" href="[##_rctps_rep_link_##]">
                      <div class="text">
                        <h4>[##_rctps_rep_title_##]</h4>
                        <p>[##_rctps_rep_simple_date_##]</p>
                      </div>
                      <s_rctps_rep_thumbnail>
                        <img src="[##_rctps_rep_thumbnail_##]" />
                      </s_rctps_rep_thumbnail>
                    </a>
                  </s_rctps_popular_rep>
                </div>
              </s_sidebar_element>

              <s_sidebar_element>
                <!-- 공지사항 -->
                <div class="recent-notice">
                  <s_rct_notice>
                    <h3>공지사항</h3>
                    <ul>
                      <s_rct_notice_rep>
                        <li>
                          <a href="[##_rctps_rep_link_##]">[##_rctps_rep_title_##]</a>
                        </li>
                      </s_rct_notice_rep>
                    </ul>
                  </s_rct_notice>
                </div>
              </s_sidebar_element>
            </s_sidebar>
          </aside>
        </div>
      </div>
    </s_t3>
  </body>
</html>
css
      a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style-type: none;
  padding: 0;
}

button {
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

header {
  max-width: 1080px;
  margin: 0 auto;
}

header .top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 15px 0;
}

header .top > img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-left: 10px;
}

header .title {
  font-size: 30px;
  margin-right: auto;
}

header ul {
  display: flex;
}

header ul li {
  padding: 0 30px;
}

header ul a {
  padding: 20px 0;
  color: #666;
  border-bottom: 5px solid transparent;
  transition: all 0.3s;
}

header ul a:hover {
  color: black;
  border-color: black;
}

.search {
  width: 200px;
  height: 30px;
  position: relative;
}

.search input {
  width: 100%;
  height: 100%;
  border: 1px solid #eee;
  border-radius: 15px;
  padding: 0 33px 0 10px;
  box-sizing: border-box;
}

.search button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  width: 20px;
  height: 20px;
}

.search img {
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.wrapper {
  display: flex;
  max-width: 1080px;
  margin: 0 auto;
}

main {
  flex: 1;
  padding-top: 60px;
  padding-right: 40px;
}

aside {
  width: 230px;
  padding: 60px 40px;
  border-left: 1px solid #eee;
}

aside h3 {
  color: #666;
}

.counter .total div:nth-child(1) {
  font-size: 16px;
}

.counter .total div:nth-child(2) {
  font-size: 26px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 2px;
}

.counter .today,
.counter .yesterday {
  color: gray;
}

.tagbox {
  margin-bottom: 30px;
  font-size: 14px;
  color: gray;
  line-height: 1.6;
}

.tagbox h3 {
  font-size: 14px;
  margin-bottom: 5px;
}

.recent-reply {
  margin-bottom: 30px;
  font-size: 14px;
  color: gray;
  line-height: 1.6;
}

.recent-reply h3 {
  font-size: 14px;
  margin-bottom: 5px;
}

.recent-posts {
  margin-bottom: 30px;
  font-size: 14px;
  color: gray;
  line-height: 1.6;
}

.recent-posts h3 {
  font-size: 14px;
  margin-bottom: 10px;
}

.recent-posts .item {
  display: flex;
  height: 60px;
  margin-bottom: 15px;
}

.recent-posts .item img {
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.recent-posts .item .text {
  margin-right: 25px;
}

.recent-posts .item h4 {
  font-size: 13px;
  font-weight: normal;
  margin-top: 3px;
  margin-bottom: 0;
}

.recent-posts .item p {
  font-size: 12px;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 0;
}

.recent-notice {
  margin-bottom: 30px;
  font-size: 14px;
  color: gray;
  line-height: 1.6;
}

.recent-notice h3 {
  font-size: 14px;
  margin-bottom: 5px;
}