티스토리 표 HTML을 이용해 행, 열 동일한 넓이로 만드는 방법

 

티스토리 작성하면서 표를 사용하니 이것저것 불편한 것 중에 제일 불편한 점이 행, 열 크기다. 혹시라도 누군가 이 글을 보다가 더 쉬운 방법이 있다면 댓글로 남겨주길 바란다. 블로그 지기는 이 불편함을 HTML로 해결하기로 했다. 이것도 결국 노가다지만 내 손가락의 감과 눈을 믿는 것보단 수치를 믿는게 낫다는 판단하에 작성한다.

 

우선 글쓰기로 들어가 표를 생성해보면 아래 이미지와 같은 크기로 원하는 행과 열에 맞게 만들어진다. 칸은 수치배분이 편한 5열 2행으로 만들었다. (5x2)

 

이렇게 생성한채로 칸에 맞게 글을 넣으면 문제가 없다. 하지만 글자수라는 게 딱 정해지지 않을 때가 있어 이때 크기가 많이 무너진다.

 

 

[칸에 맞게 글을 작성하였을 때]

 

[칸에 맞지않게 글을 작성하였을 때]

 

크기가 무너질 때 칸 내용에 맞춰 좌우 크기를 조정하면되지만, 이것도 잘 조절되지 않을 때가 있다. 예를 들면, 아래 포스팅에 만들어진 모델명 구분 표처럼 말이다. 총 12칸의 열을 맞춰야하는 데 칸이 조금이라도 크기가 다르면 이뻐보이지 않으니 수치로 나타내고 싶었다. 네이버 블로그는 테이블 행이나 열을 드래그하면 '너비 맞춤'이라는 선택지가 있는 데 티스토리에는 찾아봐도 없으니 HTML로 개척하려한다. F12키 개발자 툴 수정을 그대로 반영해주니 이건 티스토리의 큰 장점이다.

 

 

↓ 12칸의 열 너비 맞춤 참고 포스팅 ↓

 

네이버 파리 올림픽 기념 갤럭시북4 시리즈 추가 사은품 증정 이벤트 진행!

 

* 네이버 블로그 테이블(표) 너비 맞춤 탭 이미지

 

우선 표를 만들고 내용을 넣었다면 F12키를 눌러 개발자 툴을 불러온다. 그리고 개발자 툴 왼쪽 상단 선택툴을 활성화 시킨채 만든 표를 눌러보자. 눌러보면 아래 이미지처럼 <td style="width: 20%;height: ;" ~> 태그가 있을 것이다. <td>태그는 테이블의 열을 맡고 있으며 <td>를 감싼 <tr>태그는 행을 맡고 있다. 왼쪽 상단 선택툴을 활성화하는 방법은 이미지 아래있는 포스팅을 통해 확인해보자. 

 

 

 

메인 배너 이미지 검은색 필터 지우는 방법

 

우리가 수정할 부분은 <td> 태그의 width부분이다. 이 20%가 현재 테이블 크기인 것이다. 아래 테이블 칸 크기는 각 20%로 총 100% 값을 가지고 있으며, 내용물에 맞게 글자를 조정할 것이다. 임시로 테이블 좌우를 늘려가며 몇 퍼센트로 구분할 지 생각해보자.

 

갤럭시북4 울트라 NT960XGL-X92A	윈도우 11 홈 탑재	메모리 32GB	NVMe 1TB SSD	NVIDIA GeForce RTX4070

 

 

 

좌우로 늘려서 나눴을 때 각 크기를 30%, 16%, 13%, 15%, 26%으로 맞추는 게 적당한 것으로 보인다. 수치값을 정했으면 오른쪽 element.style{ width : 30.2326%; text-align : center; } 부분의 width 수치를 수정해주자. 수정은 수치값을 누르면 수정되며, 이외에 <td style="width:30.2326%; ~>가 파란줄로 선택된 채로 F2키를 누르면 수정할 수 있게된다. 편안한 방법으로 이용하길 바란다. 블로그 지기는 행을 2행으로 만들었기 때문에 위 아래 전부 크기를 수정하였다.

 

* 왼쪽 이미지는 오른쪽 element.style 수정창, 오른쪽 이미지는 왼쪽창 F2키 누른 수정창

 

 

아래의 표는 정확한 수치로 구분을 준 표다. 이 방법은 열은 정해져있는 데 내용이 넘어갈 때 표를 일정한 간격으로 또는 동일한 간격으로 만들고 싶을 때 사용하면 될 것같다. 

 

갤럭시북4 울트라 NT960XGL-X92A	윈도우 11 홈 탑재	메모리 32GB	NVMe 1TB SSD	NVIDIA GeForce RTX4070

* 정확한 수치를 준 모습

 

 

참고로 실제 포스팅되어 출력되는 값이 다른 경우가 있는데 이 경우는 100%에서 몇 %정도가 오른쪽 프로필과 카테고리 메뉴로 잡고 있기 때문에 생각한 것과 다르게 출력될 수 있다. 해결방법은 포스팅을 한 후 F12키를 눌러 추가 조정을 하고 해당 수치값으로 포스팅 수정을 눌러 값을 다시 집어넣는 것이다. 

 

* 글 작성 시 보이는 모습

* 글 작성 모습이랑 다르게 출력된 포스팅 모습

 

 

포스팅 글에서 F12키를 눌러 표를 선택하고 수치를 임의로 넣어 가장 이쁘게 나온 모습으로 수치값을 넣어주자. 수치값은 열 전부 합쳐서 100%를 만들어줘야한다. 퍼센트는 100%를 기준으로 비율을 정해주기 때문이다. 100%를 못맞춰도 걱정할 필요없다. 열의 마지막 사이즈는 정하지 않아도 티스토리가 알아서 비율에 맞게 마지막 열의 크기를 맞춘다. 앞부분의 열만 정해서 넣어보도록 하자. 수치를 정하고 표 칸도 동일하게 했다면 그대로 완료하여 포스팅을 끝 내면된다. 그러면 개발자 툴창으로 지정한 칸이 그대로 반영될 것이다. 반영되지 않을 때가 간혹 있는 데 그럴때는 개발자 툴창을 킨채 좌우로 크기 조정을 하자. 개발자 툴창에 수치값이 나타나기 때문에 임의로 조정하는 것보다 보기 편하다. 물론 이방법은 동일한 칸을 만들기 위한 방법이므로 동일한 칸이 아닌 그냥 예뻐보이기 위해 만들거라면 기존 했던 방식으로 진행해도 된다. 위 방법을 통해 테이블(표)도 손쉽게 활용하길 바란다.

 

---

 

 

[용어 정리]

table : 표

tbody : 행과 열을 묶는 그룹

tr : 행

td : 열

width : 넓이

height : 높이

text-align : 텍스트 정렬

center : 가운데 정렬

 

 

[table 사용방법]

<table style="border: 1px solid #000">

: border은 표테두리란 뜻이며,

1px의 실선(solid, 선모양), 검정색(#000)이다.

* RGB 코드 내용은 '메인 배너 이미지 검은색 필터 지우는 방법' 포스팅 확인

 

<tbody>

* 행과 열 전체를 감싸는 테이블(표)의 몸통,

표기는 안되지만 코드상으로 구분을 줌

 

<tr>

* 행 선언, tr은 td를 무조건 감싸며, tr로 감싼 부분이 행

 

<td>1열</td>

* 열 선언, td가 여러개면 위에서부터 1열, 2열 등으로 나뉨

 

</tr>

</tbody>

</table>