티스토리 스킨 만들기 6 - 본문 구성하기 (2)

2012. 7. 15. 00:38IT/Tistory Tips


지난번에 글 내용이 표시되는 부분을 구성했다. 이번엔 글 내용 아래 표시되는 트랙백, 댓글, 댓글 입력, 페이지 이동 부분을 만들어보자. 트랙백, 댓글, 페이지 번호 부분은 실제 글 내용은 아니지만, 블로그에서 빠지면 안 될 필수 요소들이다. 보통 글 아래에 위치하는 게 일반적이다. 이 부분은 HTML 구조 자체에 큰 차이는 없다. 기본 구조를 사용하면서 CSS를 적용해서 디자인을 변경하는 방식이 대부분이다. 먼저 티스토리 스킨 가이드의 2-8-5 ~ 2-9 부분을 읽어보자. 특별한 구성을 생각하고 있지 않다면 스킨 가이드의 것을 그대로 사용해도 좋다.

<!--트랙백 시작-->
<s_tb>
  <div class="trackback">
    <h3>Trackback Address :: [##_tb_address_##]</h3>
    <s_tb_container>
      <ol>
        <s_tb_rep>
        <li id="[##_tb_rep_id_##]">
          <h4>Subject: <a href="[##_tb_rep_url_##]" onclick="window.open(this.href); return false" rel="external nofollow">[##_tb_rep_title_##]</a></h4>
          <span class="from">Tracked from <span class="name"> [##_tb_rep_site_##] </span> </span>
          <span class="date">[##_tb_rep_date_##]</span>
          <a href="#" onclick="[##_tb_rep_onclick_delete_##]; return false" class="delete"> <span>삭제</span></a>
          <p>[##_tb_rep_desc_##]</p>
        </li>
        </s_tb_rep>
      </ol>
    </s_tb_container>
  </div>
</s_tb>
<!--트랙백 끝-->

첫 번째는 트랙백이다. 트랙백은 우리말로 엮인글이라고 하는데, 내 글과 관련 있는 다른 블로그의 글을 함께 엮어서 비슷한 주제의 글을 함께 볼 수 있도록 하는 기능이다. 위 소스 코드를 적용하면 엮인글 제목, 글쓴이, 날짜, 삭제 버튼과 함께 엮인글이 일부 표시된다.


<!--댓글 목록 시작-->
<div class="commentList">
<!--댓글 1단계 시작-->
  <s_rp_container>
    <ol>
    <s_rp_rep>
    <li id='[##_rp_rep_id_##]'>
      <div class="[##_rp_rep_class_##]">
        <span class="name">[##_rp_rep_name_##]</span>
        <span class="date"> [##_rp_rep_date_##]</span>
        <span class="control">
          <a href="[##_rp_rep_link_##]" class="address"> <span>댓글주소</span></a>
          <a href="#" onclick="[##_rp_rep_onclick_delete_##]" class="modify"> <span>수정/삭제</span></a>
          <a href="#" onclick="[##_rp_rep_onclick_reply_##]" class="write"> <span>댓글쓰기</span></a>
        </span>
        <p>[##_rp_rep_desc_##]</p>
      </div>

<!--댓글 2단계(댓글에 댓글) 시작-->
      <s_rp2_container>
      <ul>
        <s_rp2_rep>
        <li id='[##_rp_rep_id_##]'>
          <div class="[##_rp_rep_class_##]">
            <span class="name">[##_rp_rep_name_##]</span>
            <span class="date"> [##_rp_rep_date_##]</span>
            <span class="control">
              <a href="[##_rp_rep_link_##]" class="address"> <span>댓글주소</span> </a>
              <a href="#" onclick="[##_rp_rep_onclick_delete_##]" class="modify"> <span>수정/삭제</span></a>
            </span>
            <p>[##_rp_rep_desc_##]</p>
          </div>
        </li>
        </s_rp2_rep>
      </ul>
      </s_rp2_container>
<!--댓글 2단계 종료-->

    </li>
    </s_rp_rep>
  </ol>
  </s_rp_container>
<!--댓글 1단계 종료-->
</div>
<!--댓글 목록 끝-->

다음은 댓글 목록이다. 댓글은 보통 두 단계로 구분된다. 내 글을 보고 누군가가 댓글을 남기면 글쓴이나 제삼자가 다시 그 댓글에 댓글을 남긴다. 이런 방식이 반복된다. 그래서 댓글 표시 역시 두 단계로 구분한다. 댓글 표시는 댓글 남긴 사람의 정보와 댓글 작성 시간, 수정 버튼, 댓글 내용으로 구성된다. 1단계 댓글과 2단계 댓글을 시각적으로 구분하는 작업은 나중에 CSS에서 설정할 수 있다.


<!--댓글 쓰기 시작-->
<s_rp_input_form>
<div class="commentWrite">
  <s_rp_member>
    <s_rp_guest>
      <p>
      <label for="name">이름</label>
      <input type="text" name="[##_rp_input_name_##]" value="[##_guest_name_##]" />
      </p>
      <p>
      <label for="password">비밀번호</label>
      <input type="password" maxlength="8" name="[##_rp_input_password_##]" value="[##_rp_admin_check_##]" />
      </p>
      <p>
      <label for="homepage">블로그 주소</label>
      <input type="text" class="homepage" name="[##_rp_input_homepage_##]" value="[##_guest_homepage_##]"/>
      </p>
    </s_rp_guest>
    <p class="secretWrap">
    <label for="secret">비밀글</label>
    <input type="checkbox" name="[##_rp_input_is_secret_##]" class="checkbox" />
    </p>
  </s_rp_member>
  <p>
  <label for="content">내용</label>
  <textarea name="[##_rp_input_comment_##]" rows="10" cols="50"></textarea>
  </p>
  <p>
  <label for="submit">댓글 남기기</label>
  <input type="submit" value="댓글 남기기" onclick="[##_rp_onclick_submit_##]" />
  </p>
</div>
</s_rp_input_form>
<!--댓글 쓰기 끝-->

이번엔 실제 댓글을 입력하는 부분이다. 댓글을 남기는 사용자의 이름, 비밀번호, 블로그 주소, 비밀글, 내용, 댓글 남기기 버튼으로 구성된다. 지금 /'pəlp/에서 사용하는 것처럼 세로로 나열할 수도 있고 다른 방식으로 표시할 수도 있다. 이 역시 CSS에서 나중에 설정할 것이다.


<!--페이징 시작-->
<s_paging>
<div class="paging">
  <a [##_prev_page_##] class="[##_no_more_prev_##]">◀ PREV </a>
  <span class="numbox">
    <s_paging_rep>
      <a [##_paging_rep_link_##] class="num">[[##_paging_rep_link_num_##]]</a>
    </s_paging_rep>
  </span>
  <a [##_next_page_##] class="[##_no_more_next_##]">NEXT ▶</a>
</div>
</s_paging>
<!--페이징 끝-->

페이징 부분은 간단하다. 특이한 구성도 많지 않다. 왼쪽엔 [이전 페이지], 오른쪽엔 [다음 페이지], 가운데는 페이지 번호가 나오는 가장 기본적인 구성이다. 역시 디자인에 관한 것은 CSS에서 조정하자.

위 순서대로 HTML 코드를 입력하면 댓글이 모두 표시된 이후에 댓글 입력 부분이 나온다. 만약 글이 끝난 다음 댓글 입력창부터 나오고 그 아래로 댓글이 표시되게 하고 싶다면 HTML 코드를 입력할 때 댓글 입력 부분 코드를 먼저 입력하고 나중에 댓글 표시 부분을 입력한다.

이제 실제 글(포스트)과 관련된 부분은 모두 끝났다. 다음엔 본문의 마지막 부분을 구성할 차례다. 방명록, 태그, 지역 로그, 미디어 로그 등 실제 글은 아니지만, 블로그 구성이 필요한 항목들이다. 자, 그럼. 다음 시간에 만나요~★

...
  ...
  ...

 도대체 언제??

  • 프로필사진
    Favicon of https://twr3.tistory.com BlogIcon BakaD2012.08.18 12:21 신고

    여기까지 읽는다면 , 대충 스킨 제작의 어느 부분까지 온건가요 ?

    디자인 같은 부분은 여기서 이제 이미지 첨부하고 , 이런식으로 진행되나요 ?

    으으 . . 역시 머리 아프네요 ㅠ~ㅠ . . 아직도 뭐가 뭔지 감이 안오네요 .

    html은 전체적인 틀을 잡는거고 , CSS에서 디자인을 만들어 가는건가요 . . ?

    요즘 , 바쁘신가봐요 ㅎㅎ ~ ㅠㅠ

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.08.18 16:55 신고

      생각보다 진도가 너무 늦게 나가죠? ㅜㅜ
      여기까지면 스킨 제작의 2/5 정도? 40%쯤 된 것 같습니다.

      HTML과 CSS에 대한 부분은 이야기하신 대로 HTML이 큰 틀, CSS가 세부 디자인이라고 이해하시면 됩니다.

      티스토리 스킨 제작은 HTML에서는 태그, 위치로그, 방명록 등을 추가하고 사이드바, 푸터 정도만 추가하면 끝입니다.

      CSS는 간단히 만들 계획이라면 금방 끝나겠지만, 꾸미기에 따라서 얼마든지 복잡해질 수 있어서 생각하는 디자인에 따라 차이가 꽤 납니다^^

      얼른얼른 진행해야겠어요 ㅠㅠ

    • 프로필사진
      Favicon of https://twr3.tistory.com BlogIcon BakaD2012.08.18 17:09 신고

      그렇군요 .

      스킨 제작 같은건 생전 처음 해보니 ㅠㅠ

      html과 css에 역할은 어느정도 이해가 되가는대 . .

      복잡한 단어들을 보면 , 다시 멘붕이 와요 ㅎㅎ

      그럼 대쉬님도 스킨 제작 하실때 , 티스토리 기본 스킨을 수정 하시는건가요 ?

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.08.18 17:42 신고

      예, 구조가 간단한 스킨은 굳이 어렵게 HTML 코드를 바꿀 필요가 없거든요~ 지금 사용하는 스킨은 댓글에 사용자 이름 들어가는 칸, 날짜를 표시하는 칸 등이 따로 떨어져 있으니 그런 부분은 CSS 적용을 위해 영역을 따로 지정해야 하긴 하지만, 큰 틀은 거의 같다고 보시면 되요^^

      CSS는 생각하는 디자인이 사람마다 다르니 바꿀 수 밖에 없는 것 같아요~ 일단 티스토리 기본 스킨에서 CSS를 바꿔서 조금 더 원하는 모습으로 수정하는 것부터 시작하시면 될 것 같아요^^