[티스토리] Flatinum 스킨 하단 '페이징' 설정

---

[Flatinum 스킨 하단 '페이징' 수정]

Flatinum 스킨 수정 시리즈

- [애드센스] 티스토리 블로그 사이드 메뉴에 애드센스 광고 넣기

- [티스토리] Flatinum 스킨 '스크롤 네비게이션 바' 크기 설정

- [티스토리] Flatinum 스킨 '메뉴 토클' 설정

- [티스토리] Flatinum 스킨 상단 '메뉴' 설정

- [티스토리] Flatinum 스킨 하단 '페이징' 설정 (이번 포스팅) 

---

하단 '페이징'이 뭔가요?

▲ 하단 '페이징'

'페이징'은 블로그나 각종 웹사이트에서 페이지 번호를 한눈에 볼수있도록 페이지 번호를 매겨놓은 것입니다. 페이징이란 단어는 제가 따로 명명한 것이 아니라 공통적으로 사용하는 단어로써 paging이라고 표현하기도 하고 소스상에서도 paging이라고 검색하면 찾기 쉽습니다. 제가 이번 포스팅에서 수정한 것이 마음에 들지 않거나 본인만의 독창적인 페이징을 만들고 싶다면 인터넷에서 '페이징' 혹은 'paging'이라고 검색하세요. 유용한 정보들이 많이 나오니 참고하여 멋지게 만드시길 바랍니다. 위에 보시는 그림은 초기 Flatinum 스킨의 하단에 위치한 '페이징' 입니다. 이 부분을 제 입맛대로 수정해보고자 합니다.

---

하단 '페이징' HTML 소스 수정

그럼 실제로 수정 및 적용하기 위해서 [티스토리] Flatinum 스킨 '스크롤 네비게이션 바' 크기 설정 글의 '[html 편집] 화면 이동'에서 설명한 경로를 통해 소스 편집 화면으로 이동합니다.(관리자 메뉴 - 꾸미기 탭의 [스킨 편집] - 우측 화면에서 [html 편집])

▲ '페이징' html 소스

html 소스 편집 화면에서 's_paging' 이라는 키워드로 검색하면 위와 같은 소스가 나옵니다. 저는 이미 이 부분은 수정을 하여 기존 소스가 주석처리 되어있습니다. <!-- original --> 이라고 주석처리한 부분 왼쪽이 기존 소스입니다.

▲ '페이징' [prev], [next] 수정 모습

위의 코드에서 수정을 한 부분은 '페이징' 좌우에 각각 위치한 [prev]와 [next] 입니다. 제가 입력한 모양대신 다른 것을 입력하면 다른 이미지로 바뀌어 보여지겠죠. 그런데 현재(2018년 5월 1일 기준) Flatinum '페이징'의 가장 큰 문제점은 어떤 페이지가 선택되었는 지 모른 다는 것입니다. '페이징'의 가장 큰 목적을 상실한 상태이네요.

---

하단 '페이징' CSS 수정

▲ '페이징' CSS 소스 추가 모습

'페이지가 선택되었다'라는 표시가 나도록 해주기 위해서는 CSS에서 코드를 추가해야 합니다. 현재(2018년 5월 1일 기준) Flatinum 스킨의 CSS 소스에는 'paging'에 대한 소스는 하나도 없는 상태입니다. 저는 우측에 표시된 소스를 'Carousel' 위에 넣어주었습니다. 제가 입력한 이 소스는 페이지가 선택되었을 때 color를 '#FF0084'가 되도록 하는 소스입니다. 왼쪽은 이 소스를 적용한 모습입니다. 핑크색으로 명확하게 선택된 페이지를 사용자에게 보여주고 있네요. 상당히 깔끔합니다. 제가 이번에 입력한 선택 시 색상 변경 코드 이외에도 인터넷을 찾아보시면 많은 다른 기타 설정들이 있습니다. 이 설정들은 Flatinum 스킨에만 국한되는 것이 아니기 때문에 이런 저런 코드들을 참고하고 조합하시여 입맛에 맞는 '페이징'을 만드시길 바랍니다.

---

관련 포스팅

Flatinum 스킨 수정 시리즈

- [애드센스] 티스토리 블로그 사이드 메뉴에 애드센스 광고 넣기

- [티스토리] Flatinum 스킨 '스크롤 네비게이션 바' 크기 설정

- [티스토리] Flatinum 스킨 '메뉴 토클' 설정

- [티스토리] Flatinum 스킨 상단 '메뉴' 설정

- [티스토리] Flatinum 스킨 하단 '페이징' 설정 (이번 포스팅)

---

유익한 시간되셨다면 하단에 공감 버튼을 눌러주세요.

여러분의 공감은 저에게 큰 힘이 됩니다.