티스토리에서 좌측 정렬된 표 중앙 정렬 시키기

얼마 전 구글 콘솔에서 모바일 친화성에 문제가 있다고 경고한 페이지들을 수정하면서 느낀 점이 있습니다.

크게 두 가지입니다.

 

첫째는 구에디터 작성글에서 구에디터의 편집 화면보다 폭이 넓었던 이미지가 포함된 페이지

둘째는 구에디터에서 작성된 표가 삽입된 페이지의 경우 표가 가로폭을 넘어가는 페이지

 

위에서 예를 든 두 가지의 경우가 유난히 경고를 많이 받았습니다.

이미지는 신에디터에서 간단히 수정이 됩니다.

 

문제는 표인데요, 표의 경우에는 드래그해서 줄여주면 신에디터에서는 고정 픽셀이 아니라 %로 표시되는 폭을 쓰므로 100% 이내라면 문제가 되지 않을 것 같습니다.

구버전 에디터에서는 표의 경우에 고정 픽셀을 썼던 관계로 이미 발행한 글이 추후에 스킨이 변경된다던가 하면 가로폭이 화면 밖으로 돌출되어 구글 콘솔의 모바일 친화성 경고를 먹었던 것 같습니다.

구에디터가 신에디터처럼 고정 픽셀 값이 아닌 %를 사용했었다면 이런 문제가 발생하지 않았으리라고 봅니다.

 

다만, 기본적으로 가로로 정렬되는 문제가 있었습니다.

 

좌측 정렬된 도표

구에디터에서 작성되었던 도표를 신에디터에서 불러들여 수정하는 과정에서는 외관상 중앙 정렬로 바꾸어 주어야 할 것 같습니다.

위의 도표가 좌측 정렬되는 원인을 살펴보기 위해 코드 부분을 살펴보면 아래와 같이 생겼습니다.

 

<table class="txc-table" style="font-size: 19px; font-family: '맑은 고딕', sans-serif; border-collapse: collapse; width: 75.9699%; height: 2315px;" border="0" width="100%" cellspacing="0" cellpadding="0" data-ke-style="style15">
<tbody>

 

여기서 가장 상단 테이블의 폭을 정의하는 width: 00%; 부분의 다음에 margin: auto; 를 추가합니다.

 

<table class="txc-table" style="font-size: 19px; font-family: '맑은 고딕', sans-serif; border-collapse: collapse; width: 75.9699%; margin: auto; height: 2315px;" border="0" width="100%" cellspacing="0" cellpadding="0" data-ke-style="style15">
<tbody>

 

이제 기본 화면으로 돌아와서 도표의 정렬 여부를 확인하면 아래와 같이 보입니다.

 

중앙 정렬된 도표

포인트를 요약하면 도표의 선언부에 있는 가로폭 태그인 width: 00% 다음칸에 margin: auto; 만 추가해 주면 된다는 것만 기억하시면 될 것 같습니다.

 

도표가 좌측정렬되어 있는 html 코드의 형식은 항상 위에서 예를 든 형식만 있는 것은 아니고 변형된 버전들이 존재할 수 있는데 항상 적절한 위치를 찿아서 'width: 00%; margin:auto;'를 추가한다는 것을 숙지하고 있으면 됩니다.

아래의 예도 그러한 것중 하나입니다.

 

table-layout: fixed;
=========================>
table-layout: width: 75%; margin:auto;