블로거(blogger.com)에서, 테이블(table) 태그 위쪽 여백의 문제 해결

"도움말" 포스트를 만들며 <table> 태그를 사용했는데, 포스트 제목과 테이블 사이에, 주먹만한 간격이 생겼었다. 템플릿의 CSS에 문제가 있나 해서 살펴 보아도 모르겠고, 어쩔 수 없이 style="margin-top:-100px;" 로 간격을 강제로 줄였는데 그랬더니 이번에는 테이블이 위쪽의 다른 포스트 영역을 침범해 버렸다. (투명색으로 침범하였기에 처음에는 몰랐다. 위에 있는 다른 포스트 끝의 링크들이 작동하지 않는 것을 보고서야 문제가 생겼다는 것을 알았다.)

오만 가지 방법을 다 사용해 봐도 안 되어서 낙심하고 있던 찰나, (템플릿이 아닌) 포스트의 HTML 소스에서 이상한 것을 발견했다. 테이블 태그들 사이에 <br />들이 섞여 있었다. 혹시 이것 때문이 아닐까 하는 생각이 언뜻 들었다.

블로거(blogger.com)의 HTML 에디터에서는, 모든 행갈이에다 <br /> 태그를 붙여 버린다. 일종의 과잉 친절이다. (이 태그가 HTML 에디터 상에서 직접 보이는 것은 아니다.) 일반 텍스트를 작성할 때는 편리하지만 HTML 코드를 직접 편집할 때에는 전에도 문제를 조금 겪은 적이 있었다.


테이블은 아래와 같이 들여쓰기를 하여 작성하지만

<table>
   <tr><th>테이블 제목</th></tr>
   <tr><td>테이블 내용 ... 이하 생략


이렇게 바꾸어 보았다. 즉 행갈이를 지우고 1줄로 이어붙였다. 블로거(blogger.com)가 쓸데없는 과잉 친절을 베풀 여지를 없애는 것이다.

<table><tr><th>테이블 제목</th></tr><tr><td>테이블 내용 ... 이하 생략


그랬더니 문제가 해결되었다!!! 테이블 위쪽의 불필요한 공백이 사라졌다. 그 이상한 공백의 정체는, 테이블 태그들 사이에 블로거(blogger.com)가 끼워넣은 <br /> 들이었다. CSS와는 전혀 관련이 없었다.


포스트에 테이블 태그를 사용하는 경우는 흔치 않겠지만, 혹시 이런 문제로 고민하시는 Blogger 유저들께 도움이 되었으면 합니다.



2006-02-09 포스트 업데이트:
blogger.com 도움말에 위의 내용이 있었습니다.

blogger.com의 "설정/서식/줄바꿈 전환"을 "아니오"로 하면 <br /> 태그가 붙여지지 않는 듯합니다. 그런데 이걸 "아니오"로 해두려면, 예전 포스트들까지 다 수정해야 하기 때문에, 이제는 변경하기 힘들 것 같습니다. 그리고 이렇게 하면 코멘트들의 줄바꿈까지 없어져 버린다고 하니, 기본값인 "예"가 나을 듯합니다.



2021-09-19 포스트 업데이트:
2020년 5월경?(또는 19-08?)부터, <br /> 태그를 자동으로 붙이는 기능 자체가 사라져 버린 듯합니다.

또한 "<br /> 태그를 자동으로 붙이는 기능"을 온오프할 수 있는 설정도 사라졌습니다.

이 기능 자체에 문제가 많다고 해서, blogger.com 에서 완전히 없애 버렸다고 합니다.

따라서 현재는 <br /> 태그를 수동으로 입력해야만 행갈이가 됩니다. (Shift+Enter 하면 <br> 태그가 1개씩 입력되긴 함.)