친절한효자손 취미생활

티스토리 스킨 만들기! 친효스킨2 개발 일지 - 인덱스 페이지 완성

블로그/친효스킨2
2022. 12. 25. 00:09

안녕하세요. 친절한효자손입니다. 메인화면의 한 축을 담당하는 인덱스 페이지 완성했습니다. 인덱스 페이지는 검색 결과 페이지의 리스트 형태이기도 합니다. 티스토리 커버 기능 이전에 가장 기본이 되었던 메인 화면이지요. 따라서 기본 of 기본이기에 반드시 스타일을 만들어야만 하는 과정입니다.

 

친효스킨을 완성해본 경험이 확실히 엄청나게 도움이 되고 있습니다. 처음에는 HTML의 구조 파악부터 난관의 연속이었으나 지금은 구조는 파악했으니 스타일만 만들면 됩니다. 그렇기에 시간이 그리 오래 걸리지는 않습니다. 경험의 유무는 정말이지 엄청납니다. 이래서 경력자 우대라는 말이 나오는 것 같습니다.

 

미리보기

움짤로 친효스킨 아트북의 인덱스 페이지를 살펴봅시다.

 

인덱스 페이지는 당연히 반응형으로 동작합니다. 친효스킨과 크게 차이가 있지는 않습니다. 다만 이번 테마가 아트북이어서 뭔가 동글동글한 느낌을 많이 담고 싶었습니다. 또한 깨끗한 느낌도 살리고 싶었습니다. 그래서 테두리 부분을 그림자 처리해 입체감을 표현했습니다.

 

목록에 마우스를 올리면 살짝 위로 튀어올라가는 느낌을 표현해 보았습니다. 그럭저럭 원하는대로 잘 나온 것 같습니다.

 

HTML 살펴보기

이제 HTML 뼈대를 살펴보겠습니다.

 

<!-- 본문 시작 -->
<s_article_rep>
    <div id="articleInner">

        <!-- 인덱스 페이지 (내용만) 시작 -->
        <s_index_article_rep>
            <div class="index-list-content">
                <a href="/5002" class="index-list-content-inner">
                    <div class="index-inner-left">
                        <s_article_rep_thumbnail>
                            <div class="indexThumbnail" style="background-image: url('https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F6M99d%2FbtrTt2i9hPr%2F1dQjy4UhxIvv1AYZUkxOHk%2Fimg.jpg');"></div>
                        </s_article_rep_thumbnail>
                    </div>
                    <div class="index-inner-right">
                        <div class="index-inner-right-text">
                            <h1>티스토리 스킨 만들기! 친효스킨2 개발 일지 - 인덱스 페이지 완성</h1>
                            <p>안녕하세요. 친절한효자손입니다. 메인화면의 한 축을 담당하는 인덱스 페이지 완성했습니다. 인덱스 페이지는 검색 결과 페이지의 리스트 형태이기도 합니다. 티스토리 커버 기능 이전에 가장 기본이 되었던 메인 화면이지요. 따라서 기본 of 기본이기에 반드시 스타일을 만들어야만 하는 과정입니다. 친효스킨을 완성해본 경험이 확실히 엄청나게 도움이 되고 있습니다. 처음에는 HTML의 구조 파악부터 난관의 연속이었으나 지금은 구조는 파악했으니 스타일만 만들면 됩니다. 그렇기에 시간이 그리 오래 걸리지는 않습니다. 경험의 유무는 정말이지 엄청납니다. 이래서 경력자 우대라는 말이 나오는 것 같습니다. 미리보기 움짤로 친효스킨 아트북의 인덱스 페이지를 살펴봅시다. 인덱스 페이지는 당연히 반응형으로 동작합니다. 친효스킨과 ..</p>
                        </div>
                        <div class="index-inner-right-info">
                            <span class="indexCategory">블로그/친효스킨2</span>
                            <span class="indexDate">2022. 12. 25. 00:09</span>
                        </div>
                    </div>
                </a>
            </div>
        </s_index_article_rep>
        <!-- 인덱스 페이지 끝 -->

    </div>
</s_article_rep>
<!-- 본문 끝 -->

티스토리에서 인덱스 페이지는 반드시 <s_article_rep> 그룹치환자 안에 들어있어야 합니다. 인덱스 페이지의 그룹치환자는 <s_index_article_rep> 입니다. 이 안에 여러가지 값치환자들이 들어갑니다. 티스토리 스킨 제작 공식 가이드 페이지에서는 아래와 같이 인덱스 페이지에 대해 설명되어있습니다. 제 경우는 <s_article_rep> 바로 안쪽에 articleInneer라고 하는 ID값을 가진 div 요소를 하나 더 만들어 놓았습니다. 혹시 몰라서요.

 

<s_index_article_rep>: 인덱스 페이지일 때만 표시되는 영역

[샵샵_article_rep_link_샵샵]: 블로그 글의 고유 주소

[샵샵_article_rep_title_샵샵]: 블로그 글의 제목

[샵샵_article_rep_category_link_샵샵]: 카테고리 주소

[샵샵_article_rep_category_샵샵]: 카테고리 이름

[샵샵_article_rep_date_샵샵]: 글 발행 날짜/시간 (yyyy. m. d. HH:MM)

[샵샵_article_rep_simple_date_샵샵]: 글 발행 날짜 (yyyy. m. d.)

[샵샵_article_rep_date_year_샵샵]: 글쓴 세부시간 - 연도 (yyyy)

[샵샵_article_rep_date_month_샵샵]: 글쓴 세부시간 - 월 (mm)

[샵샵_article_rep_date_day_샵샵]: 글쓴 세부시간 - 일 (dd)

[샵샵_article_rep_date_hour_샵샵]: 글쓴 세부시간 - 시 (HH)

[샵샵_article_rep_date_minute_샵샵]: 글쓴 세부시간 - 분 (MM)

[샵샵_article_rep_date_second_샵샵]: 글쓴 세부시간 - 초 (SS)

[샵샵_article_rep_author_샵샵]: 작성자 이름

[샵샵_article_rep_summary_샵샵]: 글 내용 요약

<s_article_rep_thumbnail>: 대표 이미지 썸네일이 표시되는 영역 (대표 이미지가 없는 경우 표시되지 않음)

[샵샵_article_rep_thumbnail_url_샵샵]: 대표 이미지 썸네일 주소

[샵샵_article_rep_thumbnail_raw_url_샵샵]: 대표 이미지 원본 주소

<s_rp_count>: 댓글의 갯수를 출력하는 영역

[샵샵_article_rep_rp_cnt_샵샵]: 답글 수

모든 옵션을 다 사용할 필요는 없습니다. 여기에서 사용하고자 하는 값 또는 그룹 치환자만 사용하면 됩니다. 즉 골라쓰면 됩니다.

 

CSS 살펴보기

다음은 스타일시트입니다.

 

/* =========== 인덱스 페이지 시작 =========== */
.index-list-content {
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
    margin: 0 0 40px;
    border-radius: 10px;
    box-shadow: 2px 2px 5px .2px #aaa;
    transition: all .2s;
}

.index-list-content:hover {
    top: -2px;
    left: -2px;
    box-shadow: 6px 6px 7px .2px #ccc;
}

.index-list-content .index-list-content-inner {
    display: flex;
    padding: 20px;
}

.index-list-content .index-list-content-inner .index-inner-left {
    display: none;
}

.index-list-content .index-list-content-inner .index-inner-left .indexThumbnail {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.index-list-content .index-list-content-inner .index-inner-right {
    padding-bottom: 20px;
    width: 100%;
}

.index-list-content .index-list-content-inner .index-inner-right .index-inner-right-text > h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    padding-bottom: 10px;
    font-size: 1.5rem;
    color: #111;
}

.index-list-content .index-list-content-inner .index-inner-right .index-inner-right-text > p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    margin-top: 20px;
    font-size: 13px;
    color: #555;
}

.index-list-content .index-list-content-inner .index-inner-right .index-inner-right-info {
    position: absolute;
    bottom: 15px;
    right: 20px;
    font-size: 10px;
}

.index-list-content .index-list-content-inner .index-inner-right .index-inner-right-info .indexCategory {
    margin-right: 10px;
    font-style: italic;
    color: #aaa;
}

.index-list-content .index-list-content-inner .index-inner-right .index-inner-right-info .indexDate {
    font-style: italic;
    color: #ccc;
}

/* =========== 인덱스 페이지 끝 =========== */

index-list-content 라는 클래스명을 가진 div 요소가 인덱스 페이지의 목록을 정의합니다. 마우스를 올렸을 때 좌측 상단으로 살짝 올라가는 효과를 주기 위해 이 선택자에 position:relative를 주었습니다. 그리고 :hover 시 절대값의 위치를 변경하는 것입니다. 그래서 top과 left의 값이 음수입니다. 이때 그림자는 반대로 조금만 움직여주면 완벽한 입체 효과를 만들 수 있습니다.

 

인덱스 페이지의 뼈대와 스타일시트는 기존 친효스킨의 코드를 거의 그대로 활용했습니다. 때문에 그리 어려운 작업은 아니었습니다. 특히 목록의 카테고리에는 별도의 링크가 걸려있었습니다. 그런데 지금까지 인덱스 페이지 (커버 포함) 내부에 있는 카테고리 링크를 활용해본적은 단 한 번도 없습니다. 무슨 소리냐면 목록에 들어있는 카테고리명을 클릭해 해당 카테고리로 들어간 경험이 단 한 번도 없다는 소리죠. 보통 카테고리의 글을 보려면 사이드바에 있는 카테고리를 방문하는 경우가 압도적으로 많습니다. 그래서 이번 인덱스 페이지 (커버 포함) 내부의 카테고리 링크는 텍스트만 출력되고 링크 기능은 없애버렸습니다. 활용도가 떨어지기 때문입니다.

 

다음 작업 계획 : 본문(article) 영역

이제 인덱스 페이지는 그럭저럭 끝이 났습니다. 다음은 목록을 누르면 확인 가능한 본문에 대한 스타일을 만들 계획입니다. 본문은 무척이나 중요한 부분입니다. 실질적으로 검색이 되어 방문자들이 가장 처음으로 마주하게 되는 페이지입니다. 스타일은 이미 생각해 두었습니다. 재밌는 과제가 될 것 같군요. 끝.

저작자표시 비영리 변경금지

공유하기

facebook twitter kakaoTalk kakaostory naver band

'블로그/친효스킨2' 의 관련글

티스토리툴바