워드프레스 표 테이블 짤림 해상도 최적화 방법

워드프레스티스토리등 자신의 홈페이지 블로그에 보다 자세한 정보를 기입하기 위해서 표 테이블 이용할텐 핸드폰 “Amp“이나 테블릿이 출시 되기전까지는 대부분 PC로만 접속을 하기 때문에 PC 해상도에 맞춰 표를 작성했음 되었습니다.

하지만 지금처럼 다양한 해상도로 접속함에 있어서 PC에 맞춰 제작된 표가 작은 화면인 핸드폰에서는 잘려 나올 수 있으며 그렇게 되면 인터넷검색최적화에도 제약을 받게 됩니다.

실제로 이러한 문제로 인해 구글 서치콘솔에서는 크롤링 오류가 발생하기도 합니다.

그렇기 때문에 어떤 플랫폼으로 들어오더라도 화면에 간격이나 잘리는 부분등이 가독성을 신경써야 합니다.

워드프레스 표 테이블 짤림 해상도 최적화 방법

표 테이블 비교

정상적인 표

표 테이블 화면 짤림 해상도별 최적화 방법 1

보는것과 같이 높은 해상도인 컴퓨터에서는 화면에 짤림 없이 테이블이 보입니다.

모바일 화면 표 짤림

표 테이블 화면 짤림 해상도별 최적화 방법 5

하지만 해상도가 떨어지는 모바일로 접속하게 되면 표가 커서 화면에서 짤려 나옵니다.

이렇게 되면 검색엔진최적화에도 나쁠 뿐더러 해당정보를 보고 싶은 유저들도 볼수가 없어 답답함을 느끼게 됩니다.

표 테이블 짤림 해결방법

그렇다면 표를 해상도에 맞게 나올수 있도록 최적화 하는방법을 알아보겠습니다.

표 테이블 화면 짤림 해상도별 최적화 방법 2

표가 짤리는 글을 수정합니다.

그리고 HTML 코드를 수정해야 하기 때문에 텍스트로 변경합니다.

표 짤림 태그 수정
테이블 짤림 해결

보는것과 같이 표 부분에 사이즈가 보입니다 이 PX로 모든 해상도에 표시되기 때문에 해당 해상도보다 모자르게 되면 짤리게 됩니다.

그렇다면 PX이 아닌 화면에 퍼센티지로 나타나게 해줘야 합니다.

저같은경우는 해당 사이즈 부분에 100%로 변경했습니다.

page 2

그럼 왼쪽처럼 짤려 나왔던 표가 오른족처럼 화면에 100% 최적화되어 표시되는것을 볼 수 있습니다.

참고 : 티스토리 워드프레스 표 가운데 정렬 태그 방법

티스토리 워드프레스 엑셀시트 표 복사 붙여넣기 안될때

You may also like...

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

노랗 목차