22. 티스토리 스킨 만들기 본문 수정

2014.02.20 08:25
저자 : Kurien

드디어 기다리고 기다리던 본문 수정의 시간입니다!

물론 본문의 경우 HTML만으로도 무지 길기 때문에, 한번에 수정하는건 힘듭니다.

몇번 나눠서 수정하도록 하겠습니다.



오늘은 제목부분과, 본문 글 부분을 수정해보도록 합시다!


      <s_article_rep>

      <div class="entry">


        <div class="titleWrap">

          <h2><a href="[ ##_article_rep_link_##]">[ ##_article_rep_title_##]</a></h2>

          <div class="category"><a href="[ ##_article_rep_category_link_##]">[ ##_article_rep_category_##]</a> </div> 

          <div class="date">[ ##_article_rep_date_##]</div>

          <s_ad_div>

          <div class="admin">

            <a href="[ ##_s_ad_m_link_##]">수정</a> : 

            <a href="#" onclick="[ ##_s_ad_m_onclick_##]">수정(창으로)</a> | ([ ##_s_ad_s1_label_##])→

            <a href="#" onclick="[ ##_s_ad_s2_onclick_##]">[ ##_s_ad_s2_label_##]</a> | 

            <a href="#" onclick="[ ##_s_ad_t_onclick_##]">관련글(트랙백)</a> | 

            <a href="#" onclick="[ ##_s_ad_d_onclick_##]">삭제</a>

          </div>

          </s_ad_div>

        </div>

        <hr/>

        <div class="article">

          [ ##_article_rep_desc_##]

        </div>

        

        <s_tag_label>

        <div class="tagTrail">

          <span class="tagText">TAG </span> [ ##_tag_label_rep_##]

        </div> 

        </s_tag_label>

        

        <div class="actionTrail">

          <a href="#tb" onclick="[ ##_article_rep_tb_link_##]">

            <s_tb_count> 

            트랙백 <span class="cnt">[ ##_article_rep_tb_cnt_##]</span>개

            </s_tb_count>

          </a>

          <a href="#rp" onclick="[ ##_article_rep_rp_link_##]">

            <s_rp_count>

            댓글 <span class="cnt">[ ##_article_rep_rp_cnt_##]</span>개가 달렸습니다.

            </s_rp_count>

          </a>

        </div>


        <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">&nbsp;<span>삭제</span></a>

              <p>[ ##_tb_rep_desc_##]</p>

            </li>

            </s_tb_rep>

          </ol>

          </s_tb_container>

        </div>

        </s_tb>

        

        

        <s_rp>

        <div class="comment">

          <h3>댓글을 달아 주세요 </h3>

          

          <div class="commentList">

            <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">&nbsp;<span>댓글주소</span></a>

                    <a href="#" onclick="[ ##_rp_rep_onclick_delete_##]" class="modify">&nbsp;<span>수정/삭제</span></a>

                    <a href="#" onclick="[ ##_rp_rep_onclick_reply_##]" class="write">&nbsp;<span>댓글쓰기</span></a>

                  </span>

                  <p>[ ##_rp_rep_desc_##]</p>

                </div>

                <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">&nbsp;<span>댓글주소</span> </a>

                          <a href="#" onclick="[ ##_rp_rep_onclick_delete_##]" class="modify">&nbsp;<span>수정/삭제</span></a>

                        </span>

                        <p>[ ##_rp_rep_desc_##]</p>

                      </div>

                    </li>

                  </s_rp2_rep>

                </ul>

                </s_rp2_container>

              </li>

              </s_rp_rep>

            </ol>

            </s_rp_container>

          </div>


          <s_rp_input_form>

          <div class="commentWrite">

            <s_rp_member>

            <s_rp_guest>

            <p>

              <input type="text" name="[ ##_rp_input_name_##]" value="[ ##_guest_name_##]" />

              <label for="name"> : 이름 </label>

            </p>

            <p>

              <input type="password" maxlength="8" name="[ ##_rp_input_password_##]" value="[ ##_rp_admin_check_##]" />블로그 관리자일 경우 password field에 미리 비밀번호를 넣어놓기 위해 만들어 놓았던 치환자였으나, 지금은 사용되지 않음.. (현재는 블로그 관리자일 경우 password field가 나타나지 않음.)

              <label for="password"> : 패스워드 </label>

            </p>

            <p>

              <input type="text" class="homepage" name="[ ##_rp_input_homepage_##]" value="[ ##_guest_homepage_##]"/>

              <label for="homepage"> : 홈페이지 </label>

            </p>

              </s_rp_guest>

              <p class="secretWrap">

              <input type="checkbox" name="[ ##_rp_input_is_secret_##]" class="checkbox" />

              <label for="secret"> 비밀글 </label>

            </p>

            </s_rp_member>

            <p>

              <textarea name="[ ##_rp_input_comment_##]" rows="10" cols="50"></textarea>

            </p>

            <p>

              <input type="submit" value="댓글 달기" onclick="[ ##_rp_onclick_submit_##]" />

            </p>

          </div> 

          </s_rp_input_form>


        </div>

        </s_rp>

      </div>

      </s_article_rep>

      <!-- entry close -->


무지하게 길죠?

오늘은 위에 빨간색으로 표시해놓은 부분을 수정할 건데요.

먼저 파란색으로 표시해놓은 <hr/>을 적어주세요.

이번에도 이 <hr/>은 제목과 본문의 경계선으로 사용합니다.


그럼 CSS를 수정해볼까요?


.entry .titleWrap a {color:#000;text-decoration:none;}

.entry .titleWrap a:hover {color:#08C;text-decoration:none;}

.entry .titleWrap .date, 

.entry .titleWrap .admin,

.entry .titleWrap .admin a {font-size:13px;}

.entry hr {margin:5px 0 10px 0;}

.entry .article {font-size:14px;}

.entry .article a {color:#08C;text-decoration:none;;}

.entry .article a:hover {color:#333;}



먼저 .entry 영역의 .titleWrap(제목 영역)에 있는 a 태그를 #000색으로 바꾸고, text-decoration을 없애줍니다.

a:hover로 마우스를 댔을 때의 효과를 줬구요.

.entry .titleWarp .date, admin, admin a의 font-size를 13px로 적용시켰습니다.


그 다음은 새로 넣은 hr 부분, 역시 다른곳의 CSS와 같은 속성과 값을 적용했습니다.

.entry .article의 경우 본문을 가리킵니다.

제가 블로그에 포스팅하고 있는 이 부분을 가리키는거죠.

전체적인 폰트 사이즈를 14px로 해줬고,

.article 내부의 하이퍼 링크의 색상을 변경, text-decoration을 없앴습니다.

마지막으로 a:hover로 마우스를 올렸을 때의 색상을 변경했구요.


생각보다 크게 어렵지 않네요.



수정을 마친 상태입니다.

제목이 하늘색으로 변한 이유는 마우스를 가져다 댄 후 스크린 샷을 했기 때문이구요.

제목 부분에 있는 링크는 마우스를 가져다 댈 경우 모두 저 색상으로 변경됍니다.


뭐 딱히 어려운 부분은 없다고 생각하네요.

혹시 이해가 안되거나, 궁금한 점은 댓글에 남겨주세요^^

  1. 민들레~ 2014.08.11 01:16 신고  댓글주소  수정/삭제  댓글쓰기

    카테고리와 본문 제목을 한 줄로 만들려고 해요.
    본문 제목 옆으로 오게 하려면
    .entry .titleWrap a li{display:inline;} 넣으면 될가요? 안돼요ㅠㅠ

    추가로
    1.카테고리를 클릭하면 검색된 글들이 뜬 다음 맨위에 글 제목과 내용이 나오는데요. 검색된 리스트와 제목 사이에 여백을 주고 싶은데 어떻게 하면 될가요?
    2.한 페이지에 포스팅 한개만 나오게 하는 방법을 없을까요?
    http://dallante.tistory.com/category

    조언부탁드려요

    • Kurien 2014.08.11 01:25 신고  댓글주소  수정/삭제

      카테고리를 제목 옆으로 넣으시려면 HTML 부분을 바꾸셔야합니다.
      sidebar 부분은 지우시고 안에 있는 카테고리에 대한 소스만 빼셔서 제목 옆으로 옮기시면 되고, CSS 부분은 display가 inline이든 block이든 float를 사용해서 정렬하면 됩니다.

      그리고 검색된 리스트와 제목 사이에 여백 주는건 아마도 .searchList에 margin-bottom을 주시면 될껍니다.

  2. 2014.08.11 18:42  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  3. 바라크릴리언트 2014.08.14 12:45 신고  댓글주소  수정/삭제  댓글쓰기

    본문의 배경을 이미지로 하고싶은데 어떻게하면되나요?