티스토리 뷰

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

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


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


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


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


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



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

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

티스토리 HTML 수정
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; . . .


댓글
댓글쓰기 폼