티스토리 댓글창 맨 위로 올리는 초간단 CSS 설정 방법 (개발자 꿀팁 공개!)

 

티스토리 댓글창, 왜 항상 아래에만 있을까요? 🤨 개발자 특기를 살려 댓글창을 본문 위로 올리는 저만의 꿀팁을 공개합니다! 이제 더 이상 스크롤 압박 없이 댓글을 바로 확인하고 소통해 보세요!

안녕하세요, 블로그 방문자 여러분! 😊 저도 블로그를 운영하면서 다른 분들 블로그를 자주 구경하는데요, 가끔 댓글창이 게시글 맨 위에 있는 블로그를 발견할 때가 있더라고요. '오, 이거 괜찮은데?' 싶어서 저도 한번 해보려고 찾아봤는데, 관련 정보가 거의 없는 거예요. 저처럼 답답하셨던 분들 많으셨을 것 같아요. 🤔

솔직히 저도 처음엔 막막했는데, 그래도 제가 누굽니까! 작은 개발 지식 좀 가지고 있다고 개발자라고 떠들고 다니는 저 아니겠습니까? (는 농담이고요. 😂) 개발자 특기를 살려서 직접 이것저것 건드려보고 결국 방법을 찾아냈습니다! 그래서 오늘은 제가 알아낸 이 귀한 정보! 티스토리 댓글 입력창을 게시글 본문 위로 옮기는 방법을 아주 쉽고 자세하게 알려드리려고 합니다. 비개발자분들도 충분히 따라 하실 수 있게 설명해 드릴 테니 걱정 마세요!

728x90

1단계: 티스토리 관리창으로 이동하기 🚀

제일 먼저 티스토리 관리자 페이지로 접속해 주세요. 좌측 메뉴를 보시면 다양한 메뉴들이 쭉~ 보이실 텐데요. 그중에서 '꾸미기' 메뉴에서 하위 메뉴에 있는 '스킨편집'을 클릭해 주시면 됩니다.

 

2단계: HTML 편집 모드로 진입 💻

스킨편집 화면으로 들어오셨다면, 우측 상단에 'html 편집' 버튼이 보이실 거예요. 이 버튼을 누르면 드디어(?) 복잡한 코드의 세계로 진입하게 됩니다. 두근두근! 😆 아마 광고 삽입 해보신 분들은 익숙하실거에요ㅎ

 

3단계: CSS 탭으로 이동하기 ✨

'html 편집'을 클릭하면 뭔가 복잡한 코드가 눈앞에 펼쳐질 거예요. 비개발자분들이 보시기엔 무슨 암호처럼 보이겠지만, 당황하지 마세요! 우리는 이 코드를 직접 건드릴 게 아니니까요. 😉 화면 상단을 보시면 'HTML' 탭 옆에 'CSS' 탭이 보이실 겁니다. 바로 이 'CSS' 탭을 클릭해 주세요!

 

4단계: 마법의 코드 추가하기! 🪄

자, 이제 거의 다 왔습니다! CSS 편집창에서 코드를 추가해야 하는데요. 아무데나 넣어도 기능상으로는 문제가 없지만, 그래도 제 직업병 발동해서(?) 댓글 관련 코드 근처에 넣어주는 게 나중에 유지보수할 때 좋겠죠? 😂

키보드에서 'Ctrl + F' (맥은 Command + F)를 눌러서 검색창을 띄우세요. 그리고 검색창에 'tt-comment-cont'라고 입력합니다. 아마 대충 3600번째 줄 근처로 이동하게 될 거예요. 그 위치에 아래 코드를 복사해서 넣어주세요!

추가할 코드는 다음과 같습니다 ⬇️

.tt-comment-cont{
  display: flex;
  flex-direction: column;
}

.tt-comment-cont .tt-box-total{
  order: 1;
}

.tt-comment-cont .tt-area-reply{
  order: 3;
}

.tt-comment-cont form{
  order: 2;
  padding: 1rem 0;
  border-bottom: 1px solid #e9e9e9;;
}

 

5단계: 변경사항 적용하고 확인하기 ✅

코드를 정확히 추가하셨다면, 이제 우측 상단에 있는 '적용' 버튼을 눌러주세요. 그리고 본인 블로그로 이동해서 아무 게시물이나 클릭해 보시면, 신기하게도 댓글 입력창이 맨 위로 올라와 있는 것을 확인하실 수 있을 겁니다! 와우! 🤩

 

 

어떠세요? 생각보다 정말 간단하죠? 이 팁 하나로 여러분의 블로그 댓글이 훨씬 더 활성화될 수 있을 거예요. 독자분들이 편리하게 댓글을 남기고 소통할 수 있는 환경을 만들어주는 건 블로그 운영에 있어서 정말 중요한 부분이라고 생각합니다! 😊 혹시 따라 하시다가 궁금한 점이 생기거나 막히는 부분이 있다면 언제든지 댓글로 물어봐 주세요! 제가 아는 범위 내에서 최선을 다해 도와드리겠습니다! 다음에도 유용한 블로그 팁으로 찾아올게요~!