티스토리에서 테두리 없는 투명 테이블을 이용해 이미지 배열하기 (하)

티스토리에서 테두리 없는 투명 테이블을 이용해 이미지를 여러 장 넣거나 배열하는 방법을 계속해서 알아보겠습니다. 전 편에서 말씀드렸듯이 티스토리는 네이버 블로그와는 달리 테이블 자체의 옵션만으론 완벽하게 테두리가 없는 테이블 생성이 불가능하므로 HTML에서 일부 수정을 가해야 합니다. 테두리가 완벽하게 없는 테이블을 원하는 분들을 위해 복잡한 과정을 생략하고 제가 수정을 가해 둔 테이블 태그를 공유해 드릴 테니 간단하게 복사하셔서 사용하시면 될 것 같습니다. 아래의 태그를 마우스로 드래그한 후 마우스 오른쪽 버튼이나 Ctrl+C를 누르셔서 복사해 주세요.

 

<table style="border-collapse: collapse; width: 100%; border: none;" border="1" data-ke-align="alignLeft" data-ke-style="style16">
<tbody>
<tr>
<td style="width: 50%; border: none;">&nbsp;</td>
<td style="width: 50%; border: none;">&nbsp;</td>
</tr>
</tbody>
</table>

 

 

아래 그림과 같이 오른쪽 상단의 기본모드를 클릭한 후 HTML을 클릭해 HTML모드로 진입합니다.

 

 

HTML모드로 진입하셨으면 Ctrl+V나 마우스 오른쪽 클릭을 이용해 아래 그림과 같이 붙여 넣기 하시면 됩니다. 붙여 넣기 하셨으면 다시 기본모드로 복귀합니다.

 

 

기본모드로 오셨다면 투명 테이블이라 좀 찾기 힘드실 수도 있으실 텐데 아래와 같은 투명 테이블이 생성되어 있는 걸 확인하실 수 있으실 겁니다. 이미지 삽입 및 배열 방법은 상 편에 비교적 상세하게 설명이 되어 있고 동일한 내용이므로 이번 편에선 생략하도록 하겠습니다. 혹시 잘 기억나지 않으시는 분들은 상 편을 다시 한번 참고해 주시길 부탁드립니다.  이번에 생성된 테이블은 편집 때뿐 아니라 완료 후 실제 브라우저에 띄웠을 때도 어떠한 테두리도 보이지 않는 완전한 투명 상태입니다. 

 

 

아래는 제가 테두리 없는 투명 테이블에 이미지 네 장을 배열해 둔 건데 어떠신가요? 아무런 테두리도 보이지 않으시죠? 각각의 이미지를 클릭하시면 확대된 형태로 따로 보기도 가능하게 되어 있습니다.

 

 

전 편에 비해 이번 편은 굉장히 간단하게 끝났네요. 이상으로 티스토리에서 테두리 없는 투명 테이블 만들기 및 이미지 배열하는 법을 모두 마치겠습니다. 읽어 주셔서 감사합니다.