티스토리의 댓글 리스트는 과거의 댓글부터 순서대로 차곡 차곡 쌓아서 시간순으로 보여주는 방식이다.

그러므로 최신 댓글은 맨 아래 하단에 위치하게 된다.

그러나 누군가는 반대로 최신 댓글이 맨 상단에 위치해서 순서대로 나열하고 싶은 경우도 있을 수 있다.

나도 시도해 봤으나 과거부터 시간 순으로 정렬해서 댓글을 보여주는게 보기 편해서 기본 상태로 사용하고 있다.

댓글이나 사이드바의 댓글 순서등 모두 같은 방식으로 순서를 역으로 표현할 수 있다.

방법은 아주 간단하다.

댓글의 순서를 변경해보자!!

1 댓글 시간순 정렬 변경하기

스킨의 관리모드에서 HTML/CSS 수정에서 CSS 부분으로 이동하여 댓글 리스트 부분의 클래스명을 찾아 아래의 문구를 추가하면 된다.


display: flex; flex-direction: column-reverse;


현재 사용중인 CCZ-CROSS 스킨의 경우는 댓글 리스트의 클래스가 .cng-list 로 정의되어 있다. 아래와 같이 추가하면 댓글의 순서는 최신 순서의 댓글부터 정렬된다.

2 변경방법 사용예 - CCZ-CROSS 스킨

.cng-list {
	margin-left: -15px; 
	margin-right: -15px; 
	vertical-align: middle; 
	display: flex;  /* 추가 */
	flex-direction: column-reverse;  /* 추가 */
	}

3 변경방법 사용예 - 티스토리 #1 스킨

티스토리의 기본 스킨도 마찬가지이다. 기본 스킨 #1의 경우 댓글 리스트의 클래스는 .area_reply .list_reply 로 정의되어 있다. 위와 마찬가지로 추가하면 순서가 역으로 바뀌어 표현된다.

티스토리 기본 스킨에서는 댓글과 대댓글까지 순서가 바뀐다. 기본 스킨에서는 그냥 기본 상태로 사용하는게 좋겠다.

스퀘어 스킨의 경우 #communicate .communicateList ol { } 괄호안에 적용하면 제대로 출력 된다. ol 구조로 된 댓글은 대댓글까지 순서가 제대로 출력되나 그렇지 않은 스킨의 경우는 대댓글까지도 순서가 바뀌어 출력되는듯 하다.

주의 : 모바일 부분의 설정도 있으니 확인 후 구분해서 변경해주면 된다. 그리고 방명록 부분과 중복될 수도 있으니 댓글과 방명록의 클래스는 다르게 사용하는게 좋다.

.area_reply .list_reply {
	margin-bottom:20px; 
	margin-top:5px;
	border-top:1px solid #e0e0e0;
	display: flex;   /* 추가 */
	flex-direction: column-reverse;   /* 추가 */
	}

4 기본 정렬 상태 - 시간 순(최신 댓글이 맨 하단에 위치)

5 순서 변경 상태 - 시간 역순(최신 댓글이 맨 상단에 위치)

댓글과 방명록 뿐만 아니라 순서 구조로 되어 있는 모든 부분이 역순으로 변경 가능하다. 사이드바의 댓글이나 최근 글의 순서도 마찬가지로 적용하면 변경할 수 있다.

댓글
  • 프로필사진 Normal One 오오... 댓글 시간순서도 변경이 가능했군요ㅋㅋㅋㅋ 취향에 따라 상당히 유용한 팁이 될 것 같습니다!!! *_* 2017.01.22 23:36 신고
  • 프로필사진 SONYLOVE 그런가요?
    저는 기본인 상태가 가장 좋더라고요.
    댓글이 별로 없어서인지. ㅎㅎ
    댓글이 많다면 최근 댓글부터 보는것도 좋을수도 있을꺼 같긴 해요.!!
    2017.01.23 00:56 신고
  • 프로필사진 ㅋㅋ두유 안녕하세요!
    답을 남겨주셔서 글을 확인하고 적용을 해봤습니다.
    그런데 제가 사용하는 스킨이 #1 스킨이거든요. 그래서 3번에 따라 적용을 해봤는데요.

    이게 문제가 있네요. 댓글의 댓글까지도 역순이되어 예를들어 A라는 분이 남긴 댓글에 답글을 단 내용이 A댓글 밑에 보여져야 하는데, 답글이 그 댓글 위쪽으로 보여버립니다.ㅎㅎㅎ 즉 완전히 뒤집혀 보이게 되더라구요.;;;
    2017.01.23 14:46 신고
  • 프로필사진 SONYLOVE 스킨 1의 경우는 저도 잘 모르겠어요. 구조가 이것과는 좀 다른거 같네요. 근데 댓글 HTML 구조를 변경하면 쉽게 가능할거 같은데요;
    가령 별도의 방향 설정을 안에서 해줘도 될듯 하고요.
    ps. 스킨 1의 경우는 클래스가 애매하게 위치하고 있긴 하네요. -.-;
    다른 스킨들의 댓글 시스템을 빌려와 수정하시던가 다른 방법을 찾아보셔야 할거 같아요.
    2017.01.23 14:53 신고
  • 프로필사진 SONYLOVE 스퀘어 스킨만 해도 순서대로 잘 출력되는걸 보면 기본 스킨의 구조적으로 어려운가 보네요;; 2017.01.23 15:43 신고
  • 프로필사진 ㅋㅋ두유 넵! 아까 잘 되는거 같다고 하셔서 테스트 블로그를 통해 이렇게 저렇게 해봤는데, 분명히 제대로 넣었는데도 저는 같은 결과물이길래, 좀 생각을 해보니깐..

    보통 직접만들어 배포하는 스킨과, 티스토리 제공 스킨의 구조형태가 좀 다른거 같다는 생각을 저도 하게 되었어요.

    보통 타 스킨에서는 댓글안에 댓글의 댓글 프레임이 들어가는 구조인반면, 티스토리 기본 스킨은 댓글과 댓글의댓글이 서로 다른 프레임을 가지는 구조라서 이런 현상이 있는게 아닐까 싶네요.

    말씀해주신대로 댓글 구조를 뜯어고치는 형식이되야 가능할 것 같아요.^^ 감사합니다!
    2017.01.23 15:50 신고
  • 프로필사진 SONYLOVE 저도 댓글만 테스트해보았지 대댓글까지는 확인을 못해본게 이리 되었네요.
    제대로 확인도 안해보고 번거롭게 해드린거 같아 죄송합니다. ㅠ.ㅠ
    2017.01.23 15:56 신고
  • 프로필사진 ㅋㅋ두유 ㅎㅎㅎ 아닙니다! 많은 도움되었어요! 어쨋든 바꾸는 방법이 있다는걸 알게 된 부분이니까요. 궁금증이 풀렸구요.
    감사드려요.ㅎㅎㅎ
    2017.01.23 15:58 신고
  • 프로필사진 유라라 덕분에 상단정렬이 무엇인지 알게되었습니다. 유용한 정보 감사합니다!!! 2017.03.22 16:26
  • 프로필사진 SONYLOVE 근데 일반 블로그에서는 댓글 순을 반대로 할 이유가 별로 없더라고요. 워낙 댓글이 적다보니;; 2017.03.22 18:31 신고
  • 프로필사진 타리 CCZ-CROSS 스킨에서는 댓글과 방명록이 같은 클래스로 되어있나 보네요.
    댓글을 최신순으로 바꿨더니 방명록이 역순이 되었습니다;; ㅠ
    뭐 방명록 어차피 쓰는 사람도 없지만...
    2017.04.04 22:15 신고
  • 프로필사진 SONYLOVE 음.. 댓글과 방명록이 같이 연동이 될껄 생각못했네요.
    그렇다고 방명록을 따로 꾸밀수도 없는 노릇이고 난감하겠네요;;;
    2017.04.04 23:19 신고
  • 프로필사진 유이우 #1스킨을 사용하고 있는데 댓글은 최신순으로 하고 답글은 원래대로 할 방법이 있을까요..? 2019.01.28 18:47 신고
  • 프로필사진 SONYLOVE 위에 어떤 분이 말씀하신대로 #1스킨은 구조상 역방향 구성이 어렵습니다. 최신순으로 되긴 하지만 대댓글도 순서가 꼬여버려 이상해져요. 2019.01.28 18:51 신고
  • 프로필사진 친절한효자손 아하 flex를 써서 역순으로 할 수 있겠군요! 감사합니다. 당장 적용해 봐야겠어요. 2019.07.23 16:16 신고
  • 프로필사진 SONYLOVE 최신 댓글을 먼저 보고 싶은 경우라면 간단하게 위치를 바꿀 수 있으니 해볼만 할듯 합니다.
    근데 스킨에 따라 안되는게 있어서 ...
    2019.07.28 16:12 신고
  • 프로필사진 이민우 도저히 감의 댓글을 안적고 갈 수가 없네요.
    db쿼리 구문이나 php로 DB에서 받아온 지정한 갯수의 데이터를 역순으로 정렬하는 것만 생각했지
    css태그로 해결이 될줄은 꿈에도 몰랐습니당~ 알려주신 덕분에 아주 시원하게 해결이 되었네요.
    다시 한번 감사드립니다.
    2021.04.01 19:34