티스토리 팁 - 댓글 창을 위로 먼저 띄우기

티스토리 팁 - 댓글 창을 위로 먼저 띄우는 방법

블로그를 하는 이유 중에 가장 먼저 꼽히는 것 중에 하나가 바로 내가 쓴 글을 읽어주는 독자와의 소통입니다. 내 글을 읽고 느낀 점이나 추가 정보, 논쟁 등을 다시 알려주는 피드백 시스템인데요. 흔히 댓글( 혹은 답글 ), 트랙백의 형태로 이루어집니다. 그 중에서 오늘의 티스토리 팁에서 살펴 볼 것은 댓글에 관한 것입니다.

여러 블로그들을 방문하다 보면 댓글 창의 위치가 어디에 나오느냐에 따라서 두 가지 형태로 분류 할 수 있습니다. 댓글의 리스트가 먼저 나오는 형태와 댓글 창이 먼저 나오는 형태가 있습니다. 선택한 스킨에서 기본적으로 위치를 지정해 놓은 경우도 있고 블로거가 임의로 댓글창의 위치를 변경한 경우도 있는데요.

포스트에 달린 댓글의 리스트가 먼저 나오는 경우는 위와 같습니다. 어찌보면 가장 기본적인 형태인데요. 댓글의 리스트가 10개 미만이거나 감당 할 수 있는 정도의 갯수라면 상관이 없습니다. 오히려 댓글을 달기 위해 스크롤을 내리면서 다른 블로거의 댓글들을 보는 즐거움을 줄 수도 있지요.

하지만 댓글의 갯수가 10개, 20개가 넘어가게 되면 댓글을 쓰기 위해 내려야하는 스크롤의 양이 많아집니다. 흔히 "스크롤 압박" 이라는 단어를 많이 쓰는데요. 이렇게 되면 스크롤을 내리거나 "End" 키를 누르는 대신 열려있는 탭이나 윈도우 창을 꺼버리고 다른 곳으로 가는 경우가 많이 있습니다. 댓글이 많이 달리기를 바라는 분들에겐 안 될 일이죠. ㅎ

반면 댓글 입력창이 먼저 나오는 경우는 위와 같습니다. ( "꽁보리밥" 님의 블로그 댓글창 부분 캡쳐입니다. ) 이 경우 댓글을 쓰기위해 내려야 하는 스크롤의 양이 매우 적기 때문에 조금이라도 댓글을 달고 싶으신 분이 계시면 쉽게 댓글을 달 수 있습니다. 다만 다른 블로거 분들의 댓글을 읽으려면 어짜피 스크롤을 내려야 하고, 자신이 단 댓글을 보기 위해서는 한참 스크롤을 내려야 하는 불편함이 있습니다. ( 이 점은 나중에 자바스크립트 프로그래밍으로 어찌 해 볼 수 있습니다만 ㅎㅎ )

아무튼 이렇게 두 가지 댓글창의 위치가 있습니다. 각각 장단점이 있구요. 그럼 오늘의 티스토리 팁에서는 댓글창의 위치를 임의로 바꾸는 방법에 대해서 알아 보도록 하겠습니다.

댓글창 위치 바꾸기

댓글 창의 위치를 바꾸기 위해서는 티스토리의 HTML/CSS 편집 기능을 이용해야 합니다. HTML 코드부분을 직접 수정해서 댓글 창의 위치를 조정해 볼 텐데요. 저의 경우는 기본 스킨이 댓글 창을 댓글 리스트 다음에 출력해 주고 있습니다. 이 댓글 창을 댓글 리스트 전에 먼저 출력하도록 바꿔 보도록 하겠습니다.

티스토리의 관리자 메뉴에서 [HTML/CSS 편집] 메뉴를 선택합니다.
[HTML/CSS 편집] 메뉴에 대해서 더 알고 싶으신 분은 다음 링크를 참조하시기 바랍니다.

참조 링크
[1] 티스토리 초보팁 20편 - HTML/CSS 편집을 이용한 블로그 스킨 수정

[HTML/CSS 편집] 메뉴를 여시고 skin.html 부분을 살펴 봅니다.

티스토리의 스킨은 댓글 창을 구분해서 나눠 놓았는데요.

위 처럼 "<s_rp_input_form>" 라는 태그로 둘러 쌓여 있는 부분이 바로 댓글 쓰기 부분입니다. 댓글을 써 넣을 수 있는 <textarea> 부분과 쓴 댓글을 달아 놓을 수 있도록 하는 "확인" 버튼 등이 있습니다.

위 사진처럼 "<s_rp_input_form>" 부터 "</s_rp_input_form>" 까지의 부분을 잘라내기 합니다. ( 복사를 해서 위에다 붙여 넣으면 댓글을 써 넣는 부분이 2개가 되겠지요. 미관상 좋지도 않고 동작을 안 하는 경우도 있습니다. 잘라내기를 해서 붙여 넣도록 합니다. ㅎ )

이제 잘라낸 소스파일( 댓글 창을 표현하는 HTML 코드 )을 붙여 넣어야 합니다. 당연히 댓글 리스트를 나타내는 부분 위에 붙여 넣어야 댓글 리스트 위에 댓글 창이 나오는 형태로 바뀌겠지요. 댓글 리스트를 나타내는 부분은 다음과 같이 시작합니다.

댓글 리스트는 위와 같이 나타나구요. "..." 부분에 독자분이 남겨주신 댓글과 링크, 닉네임, 파비콘, 블로그 아이콘에 대한 정보가 들어갑니다. 소스 파일에서 "<div class="commentList">"를 찾아서 그 위에 잘라내기 했던 댓글창 소스를 붙여 넣기 합니다. 그러면 최종 적으로 다음과 같은 형태의 소스코드가 됩니다.

이제 [미리보기] 버튼을 이용해서 스킨이 어떻게 적용 되었는지 확인합니다.

주의

여기서 바로 [저장] 버튼을 누르시면 위험합니다. 스킨을 잘 못 편집했을 경우 예상과 다른 결과가 나오게 되는데, [저장] 버튼을 그대로 눌러버리면 스킨 편집의 결과가 바로 블로그에 반영되기 때문입니다.

반드시 [미리보기] 버튼을 눌러서 실제로 어떻게 적용되는지 확인을 하시기 바랍니다. ^^ 잘 못 하면 블로그 스킨 다 날아가는 수도 있습니다. ( 저도 몇 번 그런적이 있습니다 ㅜㅜ )

Before

After

댓글 입력 부분이 댓글 리스트 위로 올라간 것을 볼 수 있습니다.
마음에 안 드시면 위에서 했던 단계를 거꾸로 가시면 된까 간단합니다. ㅎㅎ
각자 자신의 블로그에 맞는 댓글 창 위치를 만들어 보세요 ^^