본문 바로가기

IT/TISTORY 블로그 만들기

블로그 타이틀 작성시 반응형 표 만드는 방법

 블로그를 PC로 작성하기 때문에 처음에는 모르고 있었습니다. 그런데 어느 날 블로그 스킨에 관한 내용을 지인에게 설명하던 중에 기억이 잘 나지 않아 내 블로그 자료를 검색할 일이 생겨서 스마트폰을 이용해서 접속하여 보게 되었습니다. 그런데 글안에 소제목으로 표에 가둬서 넣어 놨던 제목들이 잘려 있는 것이었습니다. 보통은 창의 크기가 줄면 표의 크기도 함께 줄어들어서 글씨가 화면을 넘어가는 만큼 아래로 내려와서 화면 비율을 맞춰야 하지만 안쪽이 잘려서 위에 소제목은 보이지 않았습니다.



블로그 소제목 작성시 반응형 표 만드는 방법



▲ 위와 같은 왼쪽은 잘린 화면 오른쪽은 잘리지 않은 화면입니다. 



▲ 이 표의 설정을 변경하기 위해서는 HTML을 수정해야 하는데 오른쪽 상단에 HTML을 체크하면 화면이 바뀝니다.




▲ 위와 화면을 비교해보면 위쪽에 있는 코드가 화면의 크기가 줄었을 때 표가 잘리지 않는 코드고 아래쪽에 있는 코드가 화면에 잘리는 코드입니다. 이것을 자세히 보면 아 이거구나 싶을 것입니다.


자세히 보면 


<table class="txc-table" cellspacing="0" cellpadding="0" width="100%" border="0" 맑은="" 고딕?,="" 


<table class="txc-table" cellspacing="0" cellpadding="0" width="1007" border="0" style="font-size: 13px;


 아시겠습니까? 폭을 조절하는 Width 값이 다른 것입니다. 위에는 100%로 화면의 비율로 값을 정해놓은 것이고 아래는 Width 값이 1007의 고정 값으로 크기가 항상 1007로 유지되어 있어서 표가 잘리는 것이었습니다. 하지만 한가지 단점이 있는데 티스토리에서 표를 만들고서 항상 HTML로 넘어가서 코드를 수정을 해줘야 한다는 것입니다. 이 부분만 제외하면 어떤 화면에서든 사용자에게 편안한 화면을 제공할 수 있을 것입니다.