티스토리 글상자 크기 조절하는 방법

일반적으로 글상자를 생성하면 이 글상자처럼 블로그 최대 가로길이와 같은 크기로 만들어지게 됩니다.

   만약 글상자 안에 들어갈 글이 길거나 디자인을 위해 사용하는 경우라면 큰 문제가 되지 않겠지만, 글이 짧거나 깔끔한 정리를 위해 사용했을 경우 너무 긴 글상자가 오히려 가독성을 해치거나 레이아웃을 망치는 경우가 발생합니다.

   비슷한 기능의 표는 경계선을 드래그해 쉽게 크기를 조절할 수 있도록 설정되어 있지만 이와 달리 글상자는 크기 조절 드래그 기능이 지원되지 않습니다. 하지만 방법이 없는 것은 아닙니다.

   간단한 HTML 수정을 통해 글상자 길이를 조절할 수 있는데, 가로 크기를 픽셀로 입력해주는 방법과 기본 가로 크기의 일정 % 만큼 크기를 입력해 변화시키는 방법이 있습니다. 용어가 익숙하지 않은 사람에겐 어려울 수도 있지만, 이미지를 첨부해 최대한 쉽게 설명해 두었으므로 기억해두었다가 상황에 맞춰 선택해 사용하시기 바랍니다.

---

티스토리 글상자 크기 조절하는 방법

1. 직접 가로 크기를 입력해 글상자 크기 수정하기

1. 글상자를 생성한 뒤 우측 상단 HTML 편집 창으로 이동합니다.

2. "Ctrl + F"를 눌러 'textbox'를 검색합니다.

3. 수정할 글상자의 HTML 코드 중 'textbox' 뒤에 있는 'style'을 찾은 뒤

=" 뒤로 width: 숫자px; 를 추가합니다.

ex) <div class="txc-textbox" style="width: 500px; . . .

4. 글쓰기 모드로 돌아와 글상자 크기가 수정 되었는지 확인 합니다.

. . . <div class="txc-textbox" style=" width: 700px; . . .

. . . <div class="txc-textbox" style=" width: 500px; . . .

. . . <div class="txc-textbox" style=" width: 300px; . . .

2. 기본 가로 크기의 일정 비율로 글상자 크기 바꾸기

1. 글상자 생성 후 위와 같은 방법으로 HTML 편집 창에서 수정할 글 상자의 코드를 찾습니다.

2. 이번엔 'style' 뒤로 width: 숫자px; 가 아닌 width: 숫자%; 를 추가합니다.

ex) <div class="txc-textbox" style="width: 50%; . . .

3. 글쓰기 모드로 돌아와 글상자 크기가 변경되었는지 확인합니다.

. . . <div class="txc-textbox" style=" width : 70%; . . .

. . . <div class="txc-textbox" style=" width : 50%; . . .

. . . <div class="txc-textbox" style=" width : 30%; . . .

---

티스토리 글상자 가운데 정렬, 왼쪽 정렬, 오른쪽 정렬하는 방법

1. div 코드 이용해 글상자 정렬하기

1. 글상자를 만든 후 HTML 편집 창으로 이동해 가로 크기를 수정합니다.

(가로 크기를 수정하지 않을 시 최대 크기로 글상자가 생성되기 때문에 글상자 정렬이 무의미합니다)

2. 글상자 전체 코드 앞에 <div align="정렬할 위치"> 뒤에 </div>를 입력합니다.

정렬할 위치 = 가운데 : center / 왼쪽 : left / 오른쪽 : right

ex) 가운데 위치시키고자 할 때 : <div align="center"> 글상자 HTML 코드 </div>

3. 글쓰기 모드로 돌아와 글상자 위치가 원하는 곳으로 이동되었는지 확인합니다.

<div align="left"> 글상자 HTML 코드 </div>

<div align="center"> 글상자 HTML 코드 </div>

<div align="right"> 글상자 HTML 코드 </div>

2. margin 코드 이용해 글상자 자동 정렬시키기

1. 글상자 생성 후 HTML 편집 창으로 이동해 글상자 가로 길이를 조절합니다.

2. 글상자 가로 크기 조절을 위해 사용한 코드 앞에 margin: 위치 코드 auto; 를 추가합니다.

위치 코드(숫자 0을 사용합니다) : 가운데 : 0 / 왼쪽 : 0 0 / 오른쪽 : 0 0 0

ex) 가운데 위치시키고자 할 때 : <div class="txc-textbox" style=" margin: 0 0 auto; width: 50%; . . .

3. 글쓰기 모드로 돌아와 원하는 위치로 글상자가 이동했는지 확인합니다.

. . . <div class="txc-textbox" style="width : 70%; margin : 0 0 0 auto; . . .

. . . <div class="txc-textbox" style="width : 70%; margin : 0  auto; . . .

. . . <div class="txc-textbox" style="width : 70%; margin : 0 0 auto; . . .