[HTML/CSS] 티스토리 표 테이블 모바일 스크롤 기능 구현 방법

티스토리 블로그를 운영하다 보면 포스팅을 위한 글을 적고 이미지도 삽입하고 표도 만드는 등 양질의 정보를 제공하기 위해서 다양한 정보를 작성하게 됩니다. 대부분은 PC를 통해서 작업을 하기 때문에 웬만해선 23인치 정도의 모니터를 통해서는 글도 이미지도 표도 정상적으로 표출이 됩니다만 모바일이나 태블릿으로 보게 되면 기기 화면 크기만큼 반응형으로 줄게 되면서 표 안에 있는 글이 아래 이미지와 같이 세로로 밀리는 문제가 발생하게 됩니다. 특히나 세계 최고의 모바일 보급율을 자랑하는 우리나라에서는 모바일을 통한 웹 서칭 비중이 상당히 높기 때문에 가독성이 떨어지는 포스팅에 대한 체류시간과 방문율이 낮아지게 되는 것은 당연한 결과입니다.

이러한 문제를 개선하기 위해서 이번 포스팅에서는 표를 처리하는 HTML 테이블(table)에 표의 가로 길이에 따라 스크롤 기능을 구현해서 가독성을 향상 시키는 방법에 대해서 알아보도록 하겠습니다.

PC 모니터를 통해 표출되는 테이블과 모바일로 표출되는 테이블 비교 예시자료

 

[STEP 1] 티스토리 블로그에서 테이블로 표를 작성한 포스트를 열고 포스팅 수정 환경으로 변경 후 HTML 모드로 전환합니다.

티스토리 HTML 모드 전환

 

[STEP 2] 설명을 위한 위 이미지의 HTML 코드는 아래와 같이 되어 있습니다. 표는 HTML에서 table 태그로 처리를 하게 되며, 아래와 같은 형태로 내용을 포함하고 있습니다. 물론 표 안에는 tbody, tr, td 등 다양한 태그와 내용이 포함되어 있지만 table 태그가 전체를 감싸고 있는 구조이기 때문에 table에 스타일을 정의하면 된다고 이해하시면 됩니다.

<h4 data-ke-size="size20"><b>티스토리 테이블(table) 모바일 스크롤 기능 구현 설명</b></h4> 

<table style="border-collapse: collapse; width: 100%; height: 60px;" border="1" data-ke-align="alignLeft"> 

<tbody>
<tr style="height: 20px;"> 
<td style="width: 16.6667%; height: 20px; text-align: center;">&nbsp;</td> 
<td style="width: 16.6667%; height: 20px; text-align: center;"><b>목차1</b></td> 
<td style="width: 16.6667%; height: 20px; text-align: center;"><b>목차2</b></td> 
<td style="width: 16.6667%; height: 20px; text-align: center;"><b>목차3</b></td> 
<td style="width: 16.6667%; height: 20px; text-align: center;"><b>목차4</b></td>
<td style="width: 16.6667%; height: 20px; text-align: center;"><b>목차5</b></td> </tr> 
<tr style="height: 20px;"> 
  <td style="width: 16.6667%; height: 20px; text-align: center;"><b>표를 만드는 부분1</b></td> 
  <td style="width: 16.6667%; height: 20px; text-align: center;">가나다라마바사아자차카타파하</td> 
  <td style="width: 16.6667%; height: 20px; text-align: center;">가나다라마바사아자차카타파하</td> 
  <td style="width: 16.6667%; height: 20px; text-align: center;">가나다라마바사아자차카타파하</td> 
  <td style="width: 16.6667%; height: 20px; text-align: center;">가나다라마바사아자차카타파하</td> 
<td style="width: 16.6667%; height: 20px; text-align: center;">가나다라마바사아자차카타파하</td> 

</tr> 
<tr style="height: 20px;"> 
  <td style="width: 16.6667%; height: 20px; text-align: center;"><b>표를 만드는 부분2</b></td> 
  <td style="width: 16.6667%; height: 20px; text-align: center;">가나다라마바사아자차카타파하</td> 
  <td style="width: 16.6667%; height: 20px; text-align: center;">가나다라마바사아자차카타파하</td> 
  <td style="width: 16.6667%; height: 20px; text-align: center;">가나다라마바사아자차카타파하</td> 
  <td style="width: 16.6667%; height: 20px; text-align: center;">가나다라마바사아자차카타파하</td>
  <td style="width: 16.6667%; height: 20px; text-align: center;">가나다라마바사아자차카타파하</td> 
</tr> 
</tbody> 
</table>

 

 

[STEP 3] style은 CSS 속성을 HTML 내에서 정의할 때 사용합니다. 그 정도만 알아두시고 이제 table에 아래와 같이 white-space: nowrap; 을 입력합니다. 여기서 white-space: nowrap은 웹 기준 영역을 넘어설 경우에 자동으로 줄 바꿈을 하지 않고 늘여 쓰는 것을 의미하며, nowrap 처리를 했을 때 결과를 아래 이미지에 첨부하였으니 참고하시기 바랍니다. ; 표시는 style 내에 여러 스타일을 입힐 수 있는데 스타일 간 구분을 할 때 사용합니다.

<table style="white-space: nowrap; border-collapse: collapse; width: 100%; height: 60px;" border="1" data-ke-align="alignLeft">

white-space: nowrap을 설정하였을 때 결과

 

[STEP 4] 웹 사이트의 기준영역에 맞추기 위해서 아래와 같이 테이블(table) 태그를 div 태그 안에 두고 div에 대한 스타일을 width: 100%; overflow: auto; 로 설정합니다. width 속성은 테이블의 가로 너비를 지정할 때 사용하며 50%, 100%에 따라 어떻게 표출되는지 아래 이미지를 참조하시기 바랍니다. overflow 속성은 웹에 표시되는 콘텐츠의 내용이 많아서 웹 기준 영역을 넘어가게 될 때 처리하는 방법으로 visible, hidden, scroll, auto 옵션이 있으며, 여기서 사용할 옵션은 콘텐츠 내용이 웹 기준 영역을 넘어가지 않으면 스크롤이 생기지 않고 넘어가면 생기게 자동으로 설정해주는 overflow: auto입니다.

<div style="width: 100%; overflow: auto;"> <table style="white-space: nowrap; border-collapse: collapse; width: 100%; height: 60px;" border="1" data-ke-align="alignLeft"> <tbody> --- 생략 --- </tbody> </table> </div>

width 50%와 100% 차이

 

[STEP 5] 모바일에서 정상적으로 테이블에 스크롤 기능이 구현 된 것을 확인할 수 있습니다. 보다 쉬운 설명을 위해서 설정하는 과정을 동영상으로 작성하였으니 아래 영상 부분을 참고하시기 바랍니다.

 

표 테이블 모바일 스크롤 처리 영상

티스토리 표 테이블 모바일 스크롤 처리 영상

모바일 스크롤 기능 구현 결과 영상

티스토리 테이블 모바일 스크롤 처리 결과