티스토리를 제작하는 과정을 체크리스트로 만들기

1. 전체적인 구도 잡기

    티스토리 스킨 제작시 가로 세로 픽셀 확인 스크립트 (tistory.com)

   1-1 PC버전

   1-2 태블릿 버전

   1-3 모바일 버전

2. 메뉴 및 카테고리 구성

   2-1 서치 박스는 토글 되게 만들기

           티스토리 스킨용 서치 토글(Search_Toggle) (tistory.com)   - 완료(24.04.25)

3. 사이드바 구성

4. 본문 구성

  check list

  1. 커버 -(완)

  2. 공지사항 -  (완)

  3. 검색결과  -  (완)

  4. 글본문 -  (완)

    4-1. 댓글 영역 -  (완)

    4-2. 댓글 작성폼  - 로그인 / 비로그인 -  (완)

    4-3. 게스트 영역 -  (완)

※ 댓글 영역은 본문에 있어야함. -  (완)

    4-4 . 글관리 -  (완)

※ 글관리 영역은 본문에 있어야함. -  (완)

    4-5. 글태그 -  (완)

※ 글태그 영역은 본문에 있어야함. -  (완)

  7. 글 인덱스

  8. 글 카테고리

  9. 글 리스트

  10. 보호글 처리 영역

   4-1 홈커버 만들기

       티스토리 홈 커버 디자인 1 (tistory.com)    -   완료(24.04.25)

    티스토리 스킨 제작 - 글 검색 결과 리스트 와 리스트 페이징 (tistory.com)  -  완료(24.04.26)

페이징 치환자 문제점 해결

 페이징 치환자는 글이나 목록등에서 공통되게 쓰이므로 댓글 바로위(모든 글의 아랫쪽)에 위치해야 함

  티스토리 스킨 만들기(문제점 1) (tistory.com)

   4-2 공지사항 만들기  - (24.04.27 완료)

  티스토리 스킨 내맘대로 만들기(공지사항 완료) (tistory.com)

4-3 글 본문

4-4 미디어로그

4-5 위치로그

4-5 태그

4-6 방명록

4-7 RSS

5. footer 구성

    푸터에 사이드바 요소 4가지 집어 넣기

6. 전체적인 구도 조정

7. 마무리

티스토리 상에서 검색 결과를 나타내는 코드

<s_list> <!-- 검색결과, 카테고리 등 리스트 페이지 설정 시작 -->
	<div id="searchlog">
		<h2 class="title"><span class="sl_font"></span>에 해당하는 글 <span class="sl_font"></span>건</h2>
		<div style="margin:5px 0 0 0;border-bottom:1px solid #e1e1e1"></div>			
		<div class="box">
		<ol>
			<s_list_rep>
				<li class="hover">
					<a href=""></a><span class="cnt3"></span><span class="date3"></span>
				</li>
			</s_list_rep>
		</ol>
		</div>
	</div> 
</s_list> <!-- 검색결과, 카테고리 등 리스트 페이지 설정 끝 -->

검색 결과를 페이징 하는 코드

<s_paging> <!-- 리스트 페이징설 정 시작 -->
  <div class="paging" style="text-align:center;">
    <a  class="">◀ PREV </a>
    <span class="numbox">
      <s_paging_rep>
        <a  class="num">[]</a>
      </s_paging_rep>
    </span>
    <a  class="">NEXT ▶</a>
  </div>
</s_paging>  <!-- 리스트 페이징 설정 끝 -->

두가지가 탑재되면 리스트와 페이징이 나타나게 됨

티스토리 스킨 제작중에

홈 커버를 만들면 썸네일이 생성되지 않는 텍스트에 썸네일이 생기지 않는 문제가 발생

이를 해결하기 위한 코드는 다음과 같다

<div class='featured-item'>

        <div class="thumb_view_off">  <!-- 썸네일이 없는 아이템에는 강제로 이미지를 불러옴 -->
            <a href="" class="thumbnail_post"> <img src="./images/t_img.png" /></a>

            <s_cover_item_thumbnail>
                <a href="" class="thumb_view_on" ><img src="//i1.daumcdn.net/thumb/C148x148/?fname=" ></a>
            </s_cover_item_thumbnail>

        </div>

        <div> <strong class="title"></strong></div>
        <div> <a href="" class="action">자세히 보기</a> </div>

</div>

이를 배치하기 위한 CSS는

.thumb_view_off
{
  position: relative;
  border-width: 2px;
  z-index: 0;
 
}
.thumb_view_off img{
   
  width:140px; height:140px;
  margin: 4px 4px 4px 4px;
  z-index: 0;
  /*
  border-radius: 15%;
  border:1px solid #000;
  */
}
.thumb_view_off .thumb_view_on
{
  z-index: 0;
  left:-159px;
  position: relative;
  width:148px; 
  height:148px;
}

.thumb_view_off .thumb_view_on img{
  border:1px solid #000;
  border-radius: 5%;
  z-index: 0;
}