[티스토리 꿀팁] 티스토리 표 테이블 스크롤 만드는 방법 (PC/ 모바일 모두 가능)

티스토리 테이블 스크롤 구현

테이블에 스크롤 기능 적용 방법

난이도 ★★☆☆☆

티스토리에 테이블 표 작성할 때 칸수가 많고 내용이 많으면, PC에서는 괜찮지만 모바일에서 보면 글자 크기는 그대로인데 표 크기만 화면에 맞춰 축소되면서 한 칸에 글자 하나씩 있는 것처럼 세로로 길게 찌그러지는 것을 볼 수 있습니다.

열심히 만든 표지만 너무 예쁘지 않은데 티스토리 기본 기능으로는 어떻게 할 수 있는 방법이 없습니다ㅠㅠ 하지만!
HTML을 간단하게 수정하면 표에 스크롤 기능을 더해 테이블이 찌그러지지 않게 만들 수 있죠ㅎㅎ 그 방법 공유합니다 따라오세요~

---

목차

1. 티스토리 테이블 PC 화면과 모바일 화면 차이
2. 티스토리 테이블 스크롤 기능 구현하는 HTML 수정 방법
3. 총평

---

 

티스토리 테이블 PC 화면과 모바일 화면 차이

---

PC 화면에서의 테이블

지니의 오늘	1	2	3	4	5	6
티스토리 꿀팁포스팅	표 가운데 정렬 방법	본문 내 목차 링크이동	PC화면 녹화하기 (기본기능)	GIF 프로그램 없이 만들기	티스토리 업로드 오류	표 스크롤 기능 구현방법
오늘의 맛 포스팅	용산 더백테라스	소래포구 대하구이	홍대 감성타코	부산 데미타세	서울 경마공원	잠실 칸다소바 롯데월드몰점

 

모바일에서 테이블

모바일에서 테이블

PC에서 화면과 글자에 맞게 만들어진 표가 모바일에서 보면 크기가 자동으로 줄어들어, 글자들이 세로로 늘어지는 것을 볼 수 있습니다. 정보가 더 많이 포함된 표라면 보기가 더 힘들고 가독성이 떨어질 것 같아요.🤨

그럼 표에 스크롤 기능 생성 방법 알아볼게요!

 

티스토리 테이블 스크롤 기능 구현하는 HTML 수정 방법

---

1. 티스토리 글쓰기 화면에서 기본 모드> HTML 모드로 전환해줍니다.

반응형

2. 티스토리 표 테이블 코드를 찾아줍니다.

테이블 시작 코드 <table style= ~~
테이블 종결 코드 </table>

테이블 코드

3. 테이블 시작 코드 내부에 아래의 코드를 삽입해 줍니다.
[1단계: 줄 바꿈 기능 없애기]

white-space: nowrap;

※ 이 코드는 웹 기준 영역을 넘어설 경우, 줄 바꿈을 하지 않고 자동으로 늘여 쓰는 것을 의미함.
※ 이 줄의 코드를 보면 ';'가 계속 있는 것을 볼 수 있는데, 이것은 스타일 간 구분을 짓는 표시.

 

줄바꿈 하지 않는 코드

 

웹 기준 영역을 벗어난 표 예시

줄바꿈 기능 해제 화면

 

4. 테이블 시작 코드 앞에 아래의 코드를 삽입해 줍니다.
[2단계: 스크롤 기능 생성하기]

<div style="width: 100%; overflow: auto;">

※ width: 테이블 가로 크기를 50% 100% 등으로 수정할 수 있고, 결과물을 확인하고 원하는 크기로 조정해줍니다.
※ overflow: 웹 기준 영역을 벗어날 때 처리하는 속성으로 4가지가 있음. auto, visible, hidden, scroll

저는 웹 기준 영역을 벗어나면 자동으로 스크롤 기능이 생기도록하는 위와 같은 코드룰 사용했어요.

스크롤 기능 생성

기본 모드로 돌아와 포스팅을 저장해주세요.

작업 끝!!

300x250

 

▼티스토리 스크롤 테이블▼

지니의 오늘	1	2	3	4	5	6
티스토리 꿀팁포스팅	표 가운데 정렬 방법	본문 내 목차 링크이동	PC화면 녹화하기 (기본기능)	GIF 프로그램 없이 만들기	티스토리 업로드 오류	표 스크롤 기능 구현방법
오늘의 맛 포스팅	용산 더백테라스	소래포구 대하구이	홍대 감성타코	부산 데미타세	서울 경마공원	잠실 칸다소바 롯데월드몰점

 

작업이 끝나고 포스팅을 확인하면 웹기준 영역 안으로 표 안의 내용이 한 줄로 표시되고, 표 바로 아래에 스크롤이 생성됩니다. 스크롤하면 웹 기준 영역 밖의 내용을 확인할 수 있습니다.

 

 

총평

---

HTML을 수정한다고 하면 괜히 영어가 많아서 어려울 것 같고 그래서 선뜻 도전을 안 했었는데, 한 번 해보니 HTML 수정 별거 아니더라고요ㅋㅋ 이젠 이것저것 도전해 보고 있습니다^^

 

티스토리 표 테이블 내용이 많다면 스크롤 테이블 생성을, 내용이 적다면 표 가운데 정렬을 위한 HTML 수정으로 포스팅의 가독성과 미관을 높여주세요😘