티스토리 오디세이 스킨 글목록 제목형 만들기

글목록이 썸네일과 제목, 날짜가 한 줄로 보이는 제목형 글목록을 만들어보겠습니다. 오디세이 글목록 중 이미지 배율 유지 타입의 글목록을 제목형으로 바꿀 겁니다. 그래서 간편하게 스위치만 바꿔서 제목형을 적용할 수 있습니다. 그리고 이제는 썸네일 모양에 정사각형을 적용할 수 있습니다.

 

티스토리 오디세이 스킨 글목록 제목형 만들기 

 

안녕하세요 사람사물상황입니다.

제목형의 글목록은 많은 수의 제목이 빠르게 파악되어 블로그 안에 글을 쉽게 파악하는데 장점이 있습니다. 신규? 유입자들은 블로그 정체성을 파악하기가 쉽고, 관련된 글이나 다른 글은 무엇이 있을까를 알게 하는데 굉장히 큰 장점이 있습니다. 글 내용을 미리 볼 필요가 없는 블로그라면 분명히 필요한 글목록입니다. 예전부터 많이 썼지만 오디세이에는 없어서 만들어 보았습니다.

 

우선 위에서 말한 대로 스킨 편집에서 글목록 설정을 바꿉니다.

 

1. 저 이미지 비율 유지 타입을 제목형으로 바꿀 겁니다.

 

------이미지비율유지 resize--------------이걸로 함-------------------
리사이즈로 만들기 

css2363 썸네일 사이즈 줄임 
.article-type-resize .thumbnail .img-thumbnail {
    display: block;
    width: 100%;
    height: auto;

    display: block;
    width: 64px;
    height: 64px;
변경


2358 썸넬 이미지 줄임 2
.article-type-resize .thumbnail {
    margin-bottom: 20px;
    padding-top: 0;
    background: none;

    width: 64px;
    margin-right: 8px;
추가


2353 썸넬 제목 나란히 만듬과 글목록간 여백조절
.article-type-resize {
    margin-bottom: 57px;

	  display: flex;
	  margin-bottom: -18px;
로변경

2381 글목록 본문 없앰
.article-type-resize .summary {
    max-height: 69px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    -webkit-line-clamp: 3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-word;

    display: none;
추가

제목 사이즈 줄이면서 내용물 속성 조정(자동으로 제목2줄 되게함)
2376
.article-type-resize .title {
    height: 28px;
    -webkit-line-clamp: 1;

추가
    font-size: 16px;
    display: contents;


2381 위치조절,댓글 개수 삭제함, resize 맨밑에 새로만듬
.article-type-resize .summary {
} 여기 바로 밑에 붙여넣기

.article-type-resize .article-content {
    margin-top: 13px;
}
.article-type-resize .reply {
    display: none;
}




모바일 수정
2399 목록간 여백
@media screen and (max-width: 1060px)
.article-type-resize {
    margin-bottom: 28px;

        margin-bottom: -18px;
로변경

코드는 파일로 담았습니다.  다운받아 쓰세요.

글목록 제목형 만들기.txt

0.00MB

순서대로 하시면 되구요. 일단 하고 나면 이렇게 나옵니다.

 

 

나름 깔끔하게 잘 나오는데요. 그런데 모바일 화면이 실제 모바일에서 보면. 제목이 2줄 됐다 1줄됐다하는 게 전 정신없게 보이더라구요. 제목을 맨 위로 놓고 정렬하거나 구분선을 넣으면 좀 더 깔끔하게 보일 순 있지만, 그렇게 할바엔 썸네일도 50*50으로 더 줄이고 하는 게 나은데, 그런 식은 제가 바라던 바가 아니라서. 저는 그냥 다 1줄로 보이게 했습니다. 

 

2. 1줄로 변경

1줄로 이걸로 변경
2376
.article-type-resize .title {
    height: 20px;
    -webkit-line-clamp: 1;
    font-size: 16px;
    display: block;
    margin-bottom: -1px;

 

글목록 제목 1줄로.txt

0.00MB

 

그래서 전부다 1줄로 통일성을 줘서 가독성을 높였습니다. 2줄로 하든 1줄로 하든 다 말이 되는 상황입니다. 선택의 가능성과 위치 조정의 커스텀 가능성을 남기기 위해서 2줄로 하는 것도 해봤습니다. 굳이 썸네일 사이즈를 64*64로 한 이유는 사이드바에 최근글,인기글 썸네일 사이즈가 64여서 해봤습니다. 

 

3. 또한 구분선을 주거나 글목록 간의 간격을 넓혀서 추가적 조절을 할 수 있는데요. 경우에 따라서 이런 것들이 더 깔끔해 보일 수 있습니다.

2353 글목록사이에 흰줄 넣기 border top으로 / bottom하면 위치 조정해야함
.article-type-resize {

	  border-top: 1px solid #e8e8e8;
추가

여기의 margin-bottom: 0px; 을 만져서 글목록 간격 조절

글목록 흰줄넣기와 간격조절.txt

0.00MB

 

4. 제목형의 여러가지 방식

제목형이 몰랐는데 방식이 여러 가지가 있더라구요. 그냥 단순히 제목만 있는 것에서 시작해서, 거기서 무엇을 어떻게 추가로 넣을 것인지에 따라 좀 많이 달라집니다. 왜냐하면 이게 모바일 방식에서도 보이는 것을 고려해야 하기 때문에 그렇습니다. 좁은 화면에서의 제목을 2줄, 1줄이냐 고민해야 하고, 2줄이면 pc에서는 1줄이었다가 모바일에서는 2줄이 돼야 하며, 구성요소가 썸네일을 추가할 것인지 날짜를 추가할 것인지 다 넣을 것인지에 따라서 기본을 2줄로 할지 1줄로 할지 또 달라집니다.

 

구성요소를 글 내용만 빼고 전부 다 때려 박고 1줄로 넣는 것도 했었는데, 각각의 요소 변화를 다 컨트롤 하기에 제가 좀 무리였습니다. 또한 썸네일 크기에 따라서도 여백이 달라져서 그거에 맞게 또 조정해야 하는데요. 최소한의 사이즈가 50*50이 돼야 하겠더라고요. 작게 되면 구분선이 들어가는 게 깔끔한데, 그런데 그건 제가 원하는 사이즈와 모습이 아니였습니다. 어찌 됐든 제목형을 쓰는 가장 큰 이유가 가독성인데요, 제가 원하는 것들에서 제일 깔끔하게 만든 게 이 모습입니다. 

 

일케해서 이제는 제목형을 원하시는 특정 카테고리나 그냥 쓰고 싶다고 하실 땐 이미지 비율 유지로 바꿔서 사용하면 됩니다. 참고로 원래 이미지 비율 유지는 사진이 원본 비율이 나오도록 썸네일 크기를 각기 다르게 바꿔서 나오기 때문에 활용 빈도가 낮은 것 같아서 이 쪽에 만들었습니다. 오히려 그걸 이용하여 그동안은 오디세이에서 정사각형 썸네일을 써도 짤려서 나왔는데, 썸네일을 정사각형으로 지정한다면 여기선 정사각형 그대로 나올 수 있어서 좋습니다. 

 

사람사물상황 적용모습

여기선 결과물 하나만 딱 보여서 간단해 보이는데, 나름 모든 제목형들을 만들어보느라 머리가 아펐던 컨텐츠입니다. 원래는 기본 상태의 글목록에서 제목형을 만들었었는데, 만들고 나니 이렇게 바꾸면 다시 바꾸고 싶으면 또 수치를 바꿔야 하잖아?라는 생각이 드니까, 글목록이 여러 개인걸 활용해서 그것만 바꾸면서 왔다 갔다 가능할까? 싶어서 이미지 고정으로 바꿔 봤었고, 그러다가 썸네일 사진이 정사각형이 가능한 이미지 비율 유지도 바꾸게 되었습니다.

 

원래는 그냥 끝내려고 했는데, 오디세이 스킨을 이것저것 해오면서 알게 된 것들을 활용하여 갈수록 무언가 만들어지고 있습니다. 여기서 끝이 아니고 더 괜찮게 만들 수 있을 것 같은데요. 다음 글들도 기대해 주세요.

 

티스토리 오디세이 스킨 글목록 제목형 만들기

 

끝.