티스토리 작성시 표 가운데 정렬하기
18.01.10 기준
티스토리에서 표를 작성만들어서 글을쓰려고 하는데 중앙정렬이 안돼죠?
에디터 툴이 이런 표정렬 기능이 안되는거 같네요. 왜죠??
좀 불편하네요. 그래서 html 편집으로 가능한 방법을 소개해 드리려 합니다.
일단 보시죠!!
표를 작성하게 되면 일단 왼쪽 정렬이 됩니다.
그럼 우측상단 HTML 체크하는 부분이 있죠? 이걸 클릭하게되면
html형식으로 소스가 보이게 되요.
이제 여기서 편집하면 된답니다.
편집이라기보단 그냥 무지 간단해요.
먼저 Ctrl+F 를 눌러 table 을 찾아봅니다. 나오죠?
그중 가장 첫 번째를 찾아 윗줄에<div align="center"> 넣어주세요.
그리고 가장 뒤에 </table> 아랫줄에 </div> 적어 줍니다.
아래 예제를 볼께요.
제가 넣은 표인데 복잡해 보이죠? 그런데 소스는 별 신경쓰실꺼 없구
<table class="colorscripter-code-table" style="margin:0; padding:0; border:none; background-color:#fafafa; border-radius:4px;" cellspacing="0" cellpadding="0" <tbody><tr><td style="padding:6px; border-right:2px solid #e5e5e5"><div style="margin:0; padding:0; word-break:normal; text-align:right; color:#666; font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important; line-height:130%"><div style="line-height:130%">1</div><div style="line-height:130%">2</div><div style="line-height:130%">3</div><div style="line-height:130%">4</div><div style="line-height:130%">5</div><div style="line-height:130%">6</div></div></td><td style="padding:6px 0"><div style="margin:0; padding:0; color:#010101; font-family:Consolas, 'Liberation Mono', Menlo, Courier,
monospace !important; line-height:130%"><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">INSERT</span> <span style="color:#ff3399">INTO</span> TABLE_TEST <span style="color:#ff3399">VALUES</span> (abc, <span style="color:#004fc8">20</span>);</div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">INSERT</span> <span style="color:#ff3399">INTO</span> TABLE_TEST <span style="color:#ff3399">VALUES</span>
(def, <span style="color:#004fc8">60</span>);</div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">INSERT</span> <span style="color:#ff3399">INTO</span> TABLE_TEST <span style="color:#ff3399">VALUES</span> (hij, <span style="color:#004fc8">50</span>);</div><div style="padding:0
6px; white-space:pre; line-height:130%"><span style="color:#ff3399">INSERT</span> <span style="color:#ff3399">INTO</span> TABLE_TEST <span style="color:#ff3399">VALUES</span> (klm, <span style="color:#004fc8">40</span>);</div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">INSERT</span> <span style="color:#ff3399">INTO</span> TABLE_TEST <span style="color:#ff3399">VALUES</span> (nop, <span style="color:#004fc8">30</span>);</div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">INSERT</span> <span style="color:#ff3399">INTO</span> TABLE_TEST <span style="color:#ff3399">VALUES</span> (qrx, <span style="color:#004fc8">10</span>);</div></div></td><td style="vertical-align:bottom; padding:0 2px 4px 0">
<a href="http://colorscripter.com/info#e" target="_blank" style="color: white;"><span style="font-size: 9px; word-break: normal; background-color: rgb(229, 229, 229); border-radius: 10px; padding: 1px;">cs</span></a></td></tr></tbody></table>
시작점 <table 끝점 </table> 보이시죠?? 그위와 그아래에 아래 소스를 추가해주세요.
<div align="center">
<table class="colorscripter-code-table" style="margin:0; padding:0; border:none; background-color:#fafafa; border-radius:4px;" cellspacing="0" cellpadding="0"<tbody><tr><td style="padding:6px; border-right:2px solid #e5e5e5"><div style="margin:0; padding:0; word-break:normal; text-align:right; color:#666; font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important; line-height:130%"><div style="line-height:130%">1</div><div style="line-height:130%">2</div><div style="line-height:130%">3</div><div style="line-height:130%">4</div><div style="line-height:130%">5</div><div style="line-height:130%">6</div></div></td><td style="padding:6px 0"><div style="margin:0; padding:0; color:#010101; font-family:Consolas, 'Liberation Mono', Menlo, Courier,
monospace !important; line-height:130%"><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">INSERT</span> <span style="color:#ff3399">INTO</span> TABLE_TEST <span style="color:#ff3399">VALUES</span> (abc, <span style="color:#004fc8">20</span>);</div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">INSERT</span> <span style="color:#ff3399">INTO</span> TABLE_TEST <span style="color:#ff3399">VALUES</span> (def, <span style="color:#004fc8">60</span>);</div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">INSERT</span> <span style="color:#ff3399">INTO</span> TABLE_TEST <span style="color:#ff3399">VALUES</span> (hij, <span style="color:#004fc8">50</span>);</div><div style="padding:0
6px; white-space:pre; line-height:130%"><span style="color:#ff3399">INSERT</span> <span style="color:#ff3399">INTO</span> TABLE_TEST <span style="color:#ff3399">VALUES </span> (klm, <span style="color:#004fc8">40</span>);</div><div style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">INSERT</span> <span style="color:#ff3399">INTO</span> TABLE_TEST <span style="color:#ff3399">VALUES</span> (nop, <span style="color:#004fc8">30</span>);</div><div
style="padding:0 6px; white-space:pre; line-height:130%"><span style="color:#ff3399">INSERT</span> <span style="color:#ff3399">INTO</span> TABLE_TEST <span style="color:#ff3399">VALUES</span> (qrx, <span style="color:#004fc8">10</span>);</div></div></td><td style="vertical-align:bottom; padding:0 2px 4px 0">
<a href="http://colorscripter.com/info#e" target="_blank" style="color: white;"><span style="font-size: 9px; word-break: normal; background-color: rgb(229, 229, 229); border-radius: 10px; padding: 1px;">cs</span></a></td></tr></tbody></table>
</div>
미리보기로 짠~ 가운데 정렬이 되시죠?
소스를 괜히 더럽게 더무 많이 넣어서 보기를 보여드렸네요. 아는게없어서 아는척 해보려 다 넣어봤어요. ㅎㅎ
align="center" 는 가운데 정렬하는 소스인데 html을 조금 배우신 분이시라면 아주 쉬우실꺼예요.
그럼 또 유용한 기능이 있으면 나타날께요.
감사합니다.
'알아두면 좋은 거겠지? > 티스토리' 카테고리의 다른 글
| [티스토리] 티스토리에 네이버 애널리틱스 적용 (0) | 2017.12.11 |
|---|---|
| [티스토리] 블로그 배경에 애니메이션 효과주기 (0) | 2017.12.07 |
| [티스토리] 블로그 메인페이지 설정방법 (1) | 2017.12.01 |
