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

저는 이미지를 여러 장 넣을 때 투명 테이블을 이용해 배열을 많이 하는 편인데 티스토리는 네이버 블로그와는 달리 투명 테이블 생성이 자체 옵션만으론 불가능해 당황했던 기억이 있어 혹시 다른 분들에게 도움이 될까 하여서 이 글을 작성하게 되었습니다. 테이블은 글을 작성해 깔끔한 도표 등을 만드는데 주로 이용되지만 이미지 배열에도 은근히 많이 사용되는 요소 중 하나죠.

 

네이버 블로그에서는 테이블(네이버에서의 명칭은 '표')을 만들 때 '표 테두리 설정'에서 '표 테두리 없음'을 선택하는 것만으로 테두리 없는 소위 말하는 투명 테이블이 간단하게 만들어지는데 티스토리는 테이블을 만들고자 할 때 상단의 '테이블'을 클릭해서 원하는 칸 수를 선택해 테이블을 만든 후 '표 테마'에서  '테두리 없음'을 선택해도 작업 중에만 테두리가 없어질 뿐 실제로 글 작성을 완료하고 온라인상에서 보면 테두리가 그대로 남아 있는 걸 확인하실 수 있습니다.

 

 

가령 아래 이미지와 같이 가로로 두 칸짜리 테이블을 만들고자 한다면 상단의 테이블 아이콘을 선택해 두 칸을 드래그해 줍니다. (이 부분은 다들 잘 아시겠지만 혹시라도 테이블 만드는 법을 모르시는 분이 계시다면 이 기회에 알아 두시면 좋을 것 같습니다.)

 

 

 

두 칸을 드래그한 상태에서 클릭을 해주면 아래와 같은 두 칸짜리 테이블이 생기게 됩니다.

 

 

 

테이블이 완성된 후 완성된 테이블을 클릭해 보면 아래 그림과 같이 상단에 여러 개의 아이콘이 배열된 바가 생깁니다. 여기서 가장 왼쪽의 표 테마란 아이콘을 클릭하면 각종 배경 색상이나 테이블 테두리의 유무 등을 변경할 수 있는 옵션이 제공되는데 일반적으로는 제일 하단의 테두리 없음이란 옵션이 테이블의 테두리를 없애는 옵션입니다.

 

 

일단 테두리 없음을 클릭해 보겠습니다. 아래 그림과 같이 투명 테이블이 생성은 됩니다. 

 

 

 

하지만 모든 작업을 마치고 글을 온라인 상태로 본다면 분명히 투명으로 작성했다고 생각한 테이블의 외곽선은 아래 그림과 같이 그대로 남아서 보입니다. 작업 편의성을 위해 작업할 땐 보이고 실제 띄울 땐 안 보인다면 참 편리했겠지만 이건 반대의 경우라 조금 난감하네요.

일단 작성한 테이블에 좌측 칸부터 사진을 한 번 넣어 보도록 하겠습니다. 아래 그림과 같이 좌측 칸을 마우스로 한번 클릭하시고

 

 

아래 이미지와 같이 상단의 이미지 아이콘을 클릭하신 후 사진을 클릭합니다.

 

이제 불러 올 이미지를 클릭한 후 열기를 누릅니다. 저는 제 컴퓨터에 있는 1이라는 이미지 파일을 불러와 보겠습니다.

 

 

아래 그림과 같이 테이블 왼쪽 칸에 제가 불러온 1이라는 이미지 파일이 배치된 걸 확인하실 수 있습니다.

 

나머지 오른쪽 칸에도 이미지를 배치해 보겠습니다. 오른쪽 칸을 클릭해 선택한 후 다시 위의 이미지 불러오는 과정을 거칩니다. 이번엔 2라는 이미지 파일을 불러와 보겠습니다.

 

 

이제 아래 그림과 같이 1,2번 이미지가 나란히 배치된 걸 확인하실 수 있습니다.

 

이 상태에서 이미지 1 아래 추가로 이미지를 더 넣어 보겠습니다. 아래 그림과 같이 1번 이미지를 클릭합니다.

 

클릭된 상태에서 위와 마찬가지 첨부 -> 사진을 클릭해 이번엔 3이라는 이미지 파일을 불러와 보겠습니다.

 

 

아래 그림과 같이 1번 이미지 아래쪽에 3번 이미지가 추가되었습니다.

 

 

 

이번엔 2번 이미지를 클릭한 후 이미지 파일 4를 한 번  불러와 보겠습니다.

 

 

 

4번 이미지 파일이 불러와져 아래 그림과 같이 이미지 네 장의 배열이 완료되었습니다.

 

 

앞서도 말씀드렸다시피 작업 중엔 테이블의 테두리도 보이지 않고 분명히 투명 테이블 위에서 이미지를 불러와 배열하며 작업한 것 같은데 작업을 저장한 후 브라우저에서 보면 아래 그림과 같이 테이블의 테두리가 남아 있습니다.

 

 

테두리의 유무에 크게 개의치 않으시는 분들은 그냥 이 상태로 사용하셔도 무관할 것 같습니다. 하지만 테두리를 완전히 없애고 싶으신 분들은 아래 링크를 클릭해 다음 편을 조금만 더 읽어 주시기 바랍니다. 원래 한 편으로 간단하게 마치려고 했는데 이미지 삽입 과정을 하나하나 넣다 보니 본의 아니게 글이 길어졌네요.

 

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