티스토리 댓글을 최신순 (역순) 정렬로 만드는 방법

티스토리 방명록의 경우는 항상 가장 최근 글이 최상단에 올라오게끔 되어 있습니다. 그런데 댓글은 이와는 상황이 반대입니다. 최신 댓글이 저 맨 아래에 위치하게 됩니다. 그리고 "이전 댓글 더 보기"는 맨 위에 있습니다. 이게 상당히 불편했습니다.

혹시 이걸 역순으로 정렬하는 방법이 없을까 싶어서 검색해보니 이미 많은 분들이 해답을 주고 계셨습니다. display: flex; 속성을 사용한다면 역순 정렬이 가능하다는것을 깨달았습니다. 바로 실전에 써먹어봤습니다. 결과는 어떻게 되었을까요? 성공입니다. 현재 보고 계시는 이 스킨에서도 적용이 되었습니다. 또한 친효스킨에도 적용이 완료 되었습니다. 생각보다 별거 없습니다. 어떻게 하는지 알아보도록 합시다.

HTML 세팅하기

먼저 자신이 사용하고 있는 스킨의 HTML 구조를 파악해야 합니다. 어렵지 않습니다. 관리자의 스킨편집으로 들어가셔서 HTML 탭으로 들어갑니다. 그곳에서 이 태그를 찾습니다.

<s_rp_rep>

그러면 두개가 검색이 될텐데요, 가장 처음에 검색되는 태그를 찾으셔야 합니다. </s_rp_rep> 얘는 아니에요. 저 태그 바로 위에 아마 <ol> 혹은 <ul> 로 된 태그가 있을 것 입니다. 이제 이곳에 id명 혹은 class명을 부여합니다. 저는 클래스명으로 rgy-reply 라고 작성하였습니다.

<s_rp_rep>

이렇게 되는 것 입니다. 여기까지 하면 HTML 세팅은 끝납니다. 저장하시고 CSS 탭으로 넘어갑니다.

CSS 세팅하기

이제 클래스명을 부여하였으니 스타일 요소들을 추가하겠습니다. flex 요소를 사용하면 됩니다.

.rgy-reply {

display: flex;

flex-direction: column-reverse;

-webkit-flex-direction: column-reverse;

}

직접 보고 작성하셔도 되며 아래의 메모장을 받아서 그대로 복사하시어 사용하셔도 됩니다.

티스토리 댓글 최신순 정렬 CSS.txt

CSS 화면에 적용된 모습 입니다. 그냥 위치 상관 없이 빈 공간을 몇 줄 만드시고 그대로 붙여넣기 하시고 저장하시면 됩니다. flex 속성은 최신 브라우저에서만 제대로 지원되는 요소입니다. 크롬이나 파이어폭스, 오페라, 사파리,익스플로러 등등의 브라우저가 모두 최신 버전이어야 완벽하게 보여질 것 입니다. 그렇지 않은 구형 브라우저에서는 적용이 되지 않습니다. 이점 참고하시기 바랍니다.

적용 후 결과 확인

말씀드린대로 친효스킨과 지금 보고 계신 JB131 스킨에서도 완벽하게 적용되어 동작하고 있습니다.

보시는 것 처럼 댓글이 가장 최근의 댓글이 최상단으로 올라가 있음을 확인하실 수 있습니다. 본 스킨에서는 여기를 누르셔서 직접 댓글을 확인해 보시기 바랍니다. 가장 댓글이 많이 달린 페이지 입니다. 대댓글은 서로 꼬이지 않고 정상적으로 달려 있습니다. flex를 사용하는 요소는 해당 태그의 첫번째 자식 요소에만 영향을 줍니다. 때문에 대댓글까지는 영향을 주지 않기 때문에 이렇게 첫번째 댓글에 대한 부분만 column-reverse 스타일 덕분에 반대로 정렬이 되는 것 입니다.

마무리

좋네요! 최신 댓글을 바로 볼 수 있어서 좋습니다. 티스토리에서 분명 이런 많은 피드백을 받았을텐데 왜 여태껏 수정을 해주지 않았는지 모르겠습니다. 자바스크립트로 충분히 할 수 있을 것 같은데 아직은 실력이 거기까진 뻗지 못하였으니 좀 더 배워가며 나은 방법이 있다면 바로 또 적용시켜 보겠습니다. 끝.