반응형

포스트 영역을 늘리거나 줄였을 경우, 댓글과 방명록은?



전에 포스트 영역과 사이드 바 영역을 자신의 스타일에 맞게 늘리거나 줄이는 방법에 대해 포스팅을 한 적이 있었습니다.

티스토리 블로그의 포스트 폭과 사이드 바 폭 조정하기

당시에는 지식이 일천하다보니(물론, 지금도 그렇습니다만) 단순히 포스트 영역과 사이드바 영역의 조정에 관한 이야기만 하고 말았습니다만, 이렇게 영역이 조정되다보면 블로그의 여러가지 곳에서 사소한 문제들이 발생하게 됩니다. 특히, 댓글 영역과 방명록 영역의 경우에는 포스트 영역의 조정에 따라 그에 맞춰 폭을 다시 수정해주어야만 할 필요가 있지요. 죄송합니다. 댓글이나 방명록이 한산하다보니 그만 제껴버리고 말았습니다, 흑.

먼저, 댓글 영역과 방명록 영역을 조정하기에 앞서 다시 한 번 전반적인 블로그의 레이아웃을 살펴보도록 하겠습니다.

☞  티스토리 블로그 레이아웃 수정, Footer 레이아웃 변경시 트러블슈팅

위의 포스트에서도 잠깐 언급한 바와 같이 블로그의 기본적인 영역 구성은 다음과 같이 이루어져 있습니다.


이 기본적인 영역에 포스트 영역과 댓글 영역이 다음처럼 위치하게 되구요.

이런 구성이기 때문에 만약, 컨텐트 영역을 줄이거나 늘이게 되면 그에 맞춰 포스트 영역과 댓글 영역도 같이 늘이거나 줄여줘야 합니다. 저번 포스트의 경우에는 포스트 영역을 조정하는 부분만 다뤄졌던 것이구요. 역시 이 부분을 조정해주기 위해서는 style.css를 조정해줘야 합니다. 자, 갑시다. 원본 백업도 꼭 해줍니다.

/* 댓글 */
.comment h3 {display:none; }
.commentList {font-size:0px; }
.commentList {width:/*@post-width=*/580px/*@*/; }
.commentList ol {border-bottom:1px solid #fff; }
.commentList ol li {padding-top:13px; padding-left:15px; padding-right:15px; }
.commentList ol li .wrapper {width:/*@post-width:-140=*/440px/*@*/; padding-bottom:11px; overflow:hidden; }
.commentList ul {border-top:1px solid #fff; }
.commentList ul li {padding:13px 0px 11px 0; border-bottom:1px solid #fff; }
.commentList ul li .wrapper {width:/*@post-width:-173=*/407px/*@*/; padding-bottom:0px; overflow:hidden; }

.commentWrite {width:/*@post-width:-30=*/550px/*@*/; padding:13px 15px 15px 15px; overflow:hidden; }
.commentWrite .name input {width:/*@post-width:-448=*/132px/*@*/; }
.commentWrite .password input {width:/*@post-width:-435=*/145px/*@*/; }
.commentWrite .homepage input {width:/*@post-width:-93=*/487px/*@*/; padding-left:5px; }
.commentWrite textarea {width:/*@post-width:-42=*/538px/*@*/; }
.commentWrite p.button {width:/*@post-width:-30=*/550px/*@*/; }


style.css에서 위의 부분이 댓글 영역의 폭을 조정할 수 있는 부분입니다. 하늘색으로 표시된 글자가 실제 값을 입력하는 부분인데요. 잠깐, 여기서 제가 이제까지 발견하지 못했던 어떤 규칙이 보이는군요. 

파란색으로 표시된 부분은 실제 주석부분으로 이제까지 크게 주의를 기울이지 않은 부분이었습니다. 항상 '@post-width...'로 표기되어 있는 것이 이상하여 다시금 살펴보았더니 아뿔싸, 이것이야말로 블로그의 폭을 수정하면서 가장 크게 고려해야할 중요한 주석이었던 것입니다.

'post-width'는 말그대로 포스트 영역의 폭을 의미합니다. 그리고, 이 포스트 영역의 폭을 기준으로 블로그의 다른 영역의 폭이 조정되고 있었던 것이죠. 예를 들면,

post-width=        : 포스트 영역과 같은 값으로 설정.
post-width:100=   : 포스트 영역 + 100px 값으로 설정.
post-width:-100= : 포스트 영역 - 100px 값으로 설정.


을 의미하는 것이었습니다.

자, 이제 이 의미를 알았으니 모든 것이 명확해졌군요. 브라우저에서 Ctrl+F를 눌러 post-width로 검색을 시작합니다. 그리고 이 주석에 명시된 설정과 실제 값이 틀린 부분을 찾아 고쳐주면 되는 것이죠. 이것은 방명록 설정의 수정에도 동일하게 적용되며, 후에 블로그의 영역을 재조정할 때도 이 부분을 이용하면 됩니다. 기준은 포스트 영역의 폭이 되겠네요.

post-width에 명시된 주석의 값을 기준으로 하여 오류 없는 블로그 레이아웃을 조정하시길 바랍니다.



반응형

+ Recent posts