티스토리 hELLO 스킨 모바일 페이징 커스텀하기 / position

1. PC의 페이징과 동일하게 나오게 하기

#paging span:not(.selected) {
  display: inline-block;
}

모바일에서도 위와 같은 모양으로 나오도록 하려면 selected 클래스(현재 선택된 페이지)가 아닌 span의 display를 none에서 inline-block으로 변경해주면 된다.

 

2. 최대 페이지수만 추가해주기

위와 같은 결과가 나오도록 하고 싶었다. 최대 페이지수가 나오고 그 사이에 슬래시 모양이 표시되게 하는 디자인이다.

이를 위해서 selected 클래스가 아닌 다른 페이지들은 display none을 적용해 주고, 그 중 마지막 페이지만 inline-block으로 보이게 했다. 마지막 페이지는 li:nth-last-child로 지정해줄 수 있다. 이 경우 마지막 페이지 자체를 선택했을 경우를 고려해 selected 클래스가 아닌 경우라는 조건도 추가해주었다.

슬래시는 찾아보니 before로 선 기울기를 조절해 넣어주는 디자인이 많아서 (그리고 깔끔해보여서) 따라해보았다.

마지막 페이지를 선택한 경우

 

/* 커스텀 페이징 모바일 최대 페이지 나오게 시작*/
#paging span:not(.selected) {
  display: none;
    /* display: inline-block */
}

#paging li:nth-last-child(2) span:not(.selected) {
  display: inline-block;
  margin-left: 2rem;
  position: relative;
}

#paging li:nth-last-child(2) span:not(.selected)::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: -1rem;
    width: 1px;
    height: 0.9rem;
    --tw-bg-opacity: 0.5;
    background-color: rgb(153 153 161 / var(--tw-bg-opacity));
    transform: rotate(18deg);
}

@media (min-width: 1100px) {

  #paging span:not(.selected) {
    display: inline-block;
  }
  #paging li:nth-last-child(2) span:not(.selected) {
    margin-left: 0;
  }
  #paging li:nth-last-child(2) span::before{
    display: none;
  }
  
}
/* 커스텀 끝 */

 

 

Reference

element.lastChild - Web API | MDN

【CSS】제일 마지막 요소부터 세는 nth-last-child()

CSS position absolute relative 절대위치 상대위치 개념정리