[티스토리 스킨] 페이징에 '...'을 처리하자

티스토리의 페이징 처리는 자동으로 바인딩해주기 때문에 css만 신경 쓰면 되는데....

'...'은 따로 노는 현상이 있습니다.

 

오노!!!

 

1. 원인

html을 확인하면 '...'만 'li'태그가 없는 것을 확인할 수 있습니다.

 

 

아마도 티스토리 쪽에서 '...'은 바인딩 처리를 하지 않는 거 같네요.

 

2. 해결 방법

css를 조작할 수 있다면 '.interword'를 재정의 하여 처리하시면 됩니다.

다른 방법은 자바스크립트(javascript)를 이용하는 방법입니다.

 

css를 조작하는 건 html작업과 연관 있으니 각자 처리해야 합니다.

저는 제이쿼리(jquery)를 이용하여 '...'을 '<li></li>'로 감싸는 방법을 사용하겠습니다.

'<li></li>'로 감싸주기만 하면 상속받은 스타일이 먹힐 테니 별도의 작업이 필요 없다는 장점이 있습니다.

(참고 : [javascript, Jquery] 요소(Element)를 태그(Html tag)로 감싸기(wrap) )

 

'.interword'를 사용하는 항목을 찾아서 '.wrap'함수를 사용하여 '<li></li>'로 감싸줍니다.

 

$(document).ready(function () {
    //페이징에 '...'의 li태그를 추가 합니다.
    $('.interword').wrap('<li></li>');
});

 

이제 적용 상태를 확인해 봅시다.

 

원하는 대로 적용된 것을 확인할 수 있습니다.

 

자바스크립트로 처리하려면 'innerHTML'을 이용합니다.

 

//페이징에 '...'의 li태그를 추가 합니다.
//li를 추가할 태그를 찾고
var span = document.getElementsByClassName('interword')[0];
//li를 생성해서
var li = document.createElement('LI');
//생성한 태그에 기존 태그를 추가하고
li.innerHTML = span.outerHTML;
//부모에 추가한 다음에
span.parentNode.insertBefore(li, span);
//기존 태그를 지운다.
span.remove();