티스토리 스킨 만들기 #12 글 목록

글 목록

글 목록은 티스토리 설정에서 확인할 수 있듯이 목록형, 내용형, 목록+내용형 이 있는데, 목록형과 내용형을 구성하는 치환자가 다르다. 나는 기본설정인 목록+내용형으로 해서 필요한 부분만 사용하려고한다.

 

치환자

우선 방향을 잡아보자. 해당되는 글 목록이 몇개인지 나타내고싶고(목록형), 그 목록에 해당되는 글의 욕약을 리스트로 보여주고싶다(내용형). 목록형을 만들기 위해서는 리스트 치환자들을 사용해야하고, 내용형을 만들기위해서는 본문의 index_aticle 치환자들을 사용해야한다.

 

리스트 치환자에서 사용할 치환자들은 다음과 같다.

<s_list> 리스트 그룹치환자

리스트시킨 카테고리 or 검색어 or 태그 값치환자

글 갯수 값치환자

 

index_article 에서 사용할 치환자들은 다음과 같다.

<s_article_rep> 본문영역 그룹치환자

<s_index_article_rep> 인덱스페이지 그룹치환자

/69 글 링크 값치환자

티스토리 스킨 만들기 #12 글 목록 글 제목 값치환자

/category/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC%20%EA%B4%80%EB%A6%AC/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC%20%EC%8A%A4%ED%82%A8%20%EB%A7%8C%EB%93%A4%EA%B8%B0 카테고리 링크 값치환자

티스토리 관리/티스토리 스킨 만들기 카테고리명 값치환자

2020. 3. 6. 작성일 값치환자

여긔 작성자 값치환자

<s_article_rep_thumbnail> 썸네일 그룹치환자

https://blog.kakaocdn.net/dn/bAVuSb/btqCuYSbgp3/hkS82aVCWUDn3kEEdFIc6k/img.png 썸네일 주소 값치환자

글 목록 글 목록은 티스토리 설정에서 확인할 수 있듯이 목록형, 내용형, 목록+내용형 이 있는데, 목록형과 내용형을 구성하는 치환자가 다르다. 나는 기본설정인 목록+내용형으로 해서 필요한 부분만 사용하려고한다. 치환자 우선 방향을 잡아보자. 해당되는 글 목록이 몇개인지 나타내고싶고(목록형), 그 목록에 해당되는 글의 욕약을 리스트로 보여주고싶다(내용형). 목록형을 만들기 위해서는 리스트 치환자들을 사용해야하고, 내용형을 만들기위해서는 본문의 index_aticle 치환자들을 사용해야한다. 리스트 치환자에서 사용할 치환자들은 다음과 같다. 리스트 그룹치환자 리스트시킨 카테고리 or 검색어 or 태그 값치환자 글 갯수 값치환자 index_article 에서 사용할 치환자들은 다음과 같다. 본문영역 그룹치환자.. 글내용 요약 값치환자

 

html 작성

<article>

    <s_list>
        <div class='list-result'>
            <h1> <span class='text'>에 해당하는 글</span>&nbsp;<span
                    class='count'>개</span></h1>
        </div>
    </s_list>

    <s_article_rep>
        <s_index_article_rep>
            <div class="article-list-item">
                <div class='article-list-info'>
                    <p>
                        <a href="/category/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC%20%EA%B4%80%EB%A6%AC/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC%20%EC%8A%A4%ED%82%A8%20%EB%A7%8C%EB%93%A4%EA%B8%B0"><i class="icon-bookmark-empty"></i>
                            티스토리 관리/티스토리 스킨 만들기</a>
                        <span class='author'><i class="icon-user"></i> 여긔</span>
                        <span class="date"><i class="icon-calendar"></i> 2020. 3. 6.</span>
                    </p>
                </div>
                <a href="/69">
                    <div class='article-list-thumb'>
                        <s_article_rep_thumbnail>
                            <div style="background-image: url('https://i1.daumcdn.net/thumb/C144x81/?fname=https://blog.kakaocdn.net/dn/bAVuSb/btqCuYSbgp3/hkS82aVCWUDn3kEEdFIc6k/img.png')">
                            </div>
                        </s_article_rep_thumbnail>
                    </div>
                    <div class='article-list-text'>
                        <h2 class="title">티스토리 스킨 만들기 #12 글 목록</h2>
                    </div>
                    <p class="summary">글 목록 글 목록은 티스토리 설정에서 확인할 수 있듯이 목록형, 내용형, 목록+내용형 이 있는데, 목록형과 내용형을 구성하는 치환자가 다르다. 나는 기본설정인 목록+내용형으로 해서 필요한 부분만 사용하려고한다. 치환자 우선 방향을 잡아보자. 해당되는 글 목록이 몇개인지 나타내고싶고(목록형), 그 목록에 해당되는 글의 욕약을 리스트로 보여주고싶다(내용형). 목록형을 만들기 위해서는 리스트 치환자들을 사용해야하고, 내용형을 만들기위해서는 본문의 index_aticle 치환자들을 사용해야한다. 리스트 치환자에서 사용할 치환자들은 다음과 같다. 리스트 그룹치환자 리스트시킨 카테고리 or 검색어 or 태그 값치환자 글 갯수 값치환자 index_article 에서 사용할 치환자들은 다음과 같다. 본문영역 그룹치환자..</p>
                </a>
            </div>
        </s_index_article_rep>

    </s_article_rep>
    
</article>

 

설명은 그림으로

 

css 작성

article .list-result {
	padding: 10px 20px;
	background: #aaa;
	color: #fff;
	margin-bottom: 5px;
}

article .list-result h1 {
	font-size: 1.875rem;
}

article .list-result .text {
	font-size: 1rem;
	color: #ccc;
}

article .list-result .count {
	color: #000;
}

article .article-list-item {
	padding: 5px 10px;
	background: #fff;
	margin-bottom: 1px;
}

article .article-list-info {
	margin-left: 10px;
}

article .article-list-info a {	
	color: #d09aec;
	text-decoration: none;
}

article .article-list-info a:hover {
	text-decoration: underline;
}

article .article-list-info span {	
	margin-left: 10px;
	font-size: 0.875rem;
}

article .article-list-item > a {
	text-decoration: none;
}

article .article-list-item > a:hover h2, article .article-list-item > a:hover p {
	text-decoration: underline;
}

article .article-list-thumb {
	display: inline-block;
	vertical-align: middle;
	width: 20%;
	min-width: 70px;
	max-width: 140px;
	height: 70px;
	background-image: url('https://i1.daumcdn.net/thumb/C144x81/?fname=https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_01.png');
	background-position: center;
	margin-right: 10px;
	border: 1px solid #ddd;
}

article .article-list-thumb div {
	width: 100%; 
	height: 70px; 
	background-position: center;
}

article .article-list-text {
	display: inline-block;
	vertical-align: middle;
	width: 74%;
}

article .article-list-text h2 {
	font-size: 1.125rem;	
}

article .article-list-item p {
	font-size: 1rem;
	margin: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}