티스토리 스킨 만들기 강좌 #001 - 1단 스킨(5) 목록, 페이징 디자인 수정하기(일반 게시판 타입)

이제 레이아웃과 헤더는 대충 마무리 되었으니 목록 화면 디자인을 수정해보겠습니다.

이 포스팅은 자유롭게 취사선택 가능하므로 패스하셔도 됩니다.

 

저는 최소한의 수정만으로 심플하게 제목과 페이징만 있도록 수정할 겁니다.

 

 

1. 스킨 설정 수정하기

• 홈 화면 글 수, 글 목록 글 수는 자유롭게 정합시다.
• 추가 설정 - 글 목록 형태 - 기본형으로 설정합시다.
• 컬러셋은 자유롭게 설정합니다. 저는 일단 블랙으로 정했습니다. (나중에 컬러셋도 바꿀 수 있어요.)

 

 

2. 일반 게시판 목록 디자인 수정하기

• (목록 사이 여백 제거) .index_type_horizontal .list_horizontal .list_horizontal_item CSS 코드를 삭제합시다.
• (썸네일 제거) .index_type_horizontal .thumbnail_post CSS 코드를 수정합시다.
• (텍스트 디자인 수정) .index_type_horizontal .title_post CSS 코드를 수정합시다.
• (카테고리 제목 제거) category_list index_type_common index_type_horizontal 를 검색해 <s_list> </s_list> 코드를 지웁시다.
• (레이아웃 여백 수정) .index_type_horizontal 의 CSS 코드를 수정합시다.

우리는 여기에서 제목만 빼고 다 삭제할 예정입니다.

 

.index_type_horizontal .list_horizontal .list_horizontal_item 을 검색하여, 아래 코드를 지웁니다.

만약 리스트 사이에 약간의 간격이 필요하다면 간격을 조정해도 좋습니다.

 

.index_type_horizontal .thumbnail_post 를 검색하여, 노란 배경으로 되어있는 코드를 지우고 다음으로 수정합니다.

.index_type_horizontal .thumbnail_post,
.index_type_horizontal .link_article,
.index_type_horizontal .info_post {
  display: none;
}

 

그럼 이제, 제목만 남게 됩니다.

 

 

더 나아가 카테고리 목록을 없애고, 글자 디자인도 조금 수정해보겠습니다.

 

 

.index_type_horizontal .title_post 를 수정합니다.

.index_type_horizontal .title_post{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
  padding: 5px;
 }

 

HTML 탭으로 돌아가, category_list index_type_common index_type_horizontal 를 검색하고 <s_list> </s_list> 부분을 전부 지웁니다.

 

적용해서 티스토리를 다시 보면, 깔끔하게 제목만 남은 걸 볼 수 있습니다!

 

 

 

이제 피시에서의 페이지 간격이 너무 벙벙해보여서 여백을 좀 수정하겠습니다.

먼저 .index_type_horizontal 로 검색해서 나온 코드를 수정합니다.

취향에 맞게 여백도 같이 조정해줍니다.

.index_type_horizontal {
  display: block !important;
  padding: 0 20px;
}

 

3. 페이징 디자인 수정하기

• .area_paging CSS 코드를 수정합시다.
• .area_paging .link_prev, .area_paging .link_next CSS 코드를 수정합시다.
• (선택) 페이징 넘버를 제거하고 싶다면 .area_paging .paging_num 을 검색하여 CSS 코드를 수정하세요.

 

이제 페이징 간격을 수정하겠습니다.

.area_paging 으로 검색하여 나온 코드를 다음과 같이 수정합니다.

.area_paging {
  font-size: 0;
  text-align: center;
}

 

저는 극단적이기 때문에 페이징 넘버도 한번에 다 없애버리겠습니다.

.area_paging .paging_num 를 검색하여, display: inline-block 을 display: none 으로 바꿔주세요.

 

그리고 조금 위에 있는 .area_paging .link_prev, .area_paging .link_next 코드를 지워줍니다.

그 근처에 있는

.area_paging .link_prev,
.area_paging .link_next 를 검색하여 코드를 수정합니다.

.area_paging .link_prev,
.area_paging .link_next {
  margin-top: 20px;
  font-size: 28px;
  line-height: 30px;
}

 

적용하고 페이지로 들어가보면, 다음과 같이 페이징 간격이 줄어들고 넘버도 삭제된 걸 볼 수 있습니다!

그런데 페이징이 없는 경우에는 아예 페이징 영역을 보여주고 싶지 않을 수도 있으니, 이 부분을 처리해봅시다.

 

.area_paging .link_prev.no-more-prev,

.area_paging .link_prev.no-more-next 를 검색하여 코드를 수정합니다.

(display:none 대신 opacity: 0.5 등으로 투명도를 낮게하여 페이징을 노출하는 방식도 있습니다.)

.area_paging .link_prev.no-more-prev,
.area_paging .link_next.no-more-next {
  margin-top: 0;
  display: none;
}

 

그러면 이제 적용해서 보면 제대로 화면이 나옵니다!

기본글 10개라서 페이징이 보이지 않습니다.

기본글 3개로 설정하니 페이징과 다음 버튼이 보입니다.

페이징을 이동하니 이전, 다음 버튼 둘다 보입니다.

 

만약 작업 도중에 잘 되지 않는다고 하면, 위에서부터 차근차근 다시 시도해보세요!

 

다음 글에서 계속 적겠습니다.