IT 인터넷 REVIEW

티스토리 블로그 글상자 가로 크기 조절과 위치 정렬하기

Grandpassion 2016. 10. 23. 18:12
반응형

티스토리 블로그에 글을 쓰다 보면 글상자를 이용해서 일정한 박스 형태로 올리고 싶을 때가 있다. 그러나 티스토리 글쓰기에서는 이 기능을 직접 지원하지 않는다. 그러므로 HTML을 이용해서 직접 편집해서 사용해야 하므로 편집 방법을 알아 보기로 한다.






티스토리 블로그 글상자 가로 크기 조절과 위치 정렬하기



먼저 글을 작성한 후 글상자 아이콘을 클릭하고 색깔을 선택한 후 확인을 누른다. 그리고 오른쪽 상단의 HTML 네모 칸을 체크하면 HTML 화면으로 전환된다. 배경 색을 원하지 않는다면 흰색으로 설정하면 된다.



div 태그에 style 소스를 찾아서 스타일 영역에 원하는 가로 크기를 입력해서 글상자의 가로 크기를 줄여줘야 한다.



가로 폭을 줄이는 소스를 새롭게 입력한다.  width : 400px ; 로 임의대로 정하고 입력한다. 그러나 픽셀로 하면 모바일에서 글이 잘려 보일 수 있다. 이것을 해결하기 위해서는 px를, %로 바꿔서 입력하면 된다. 예를 들어 전체 화면에서 반을 줄이고 싶다면 width : 50% ; 를 입력하면 된다.



다시 HTML 체크를 해제하면 글상자가 이와 같이 줄어든 모습을 확인할 수 있다. 그런데 여기에서 다시 위치를 옮기고 싶다면 HTML에서 소스를 입력해서 위치 설정을 해줘야 한다. 위에서 가로 크기를 설정할 때 style 소스 옆에 소스 값을 입력한 부분이 있을 것이다. 위치 소스도 style의 바로 옆에 입력하면 된다.





        가운데 정렬 소스는      margin: 0 auto;   




        왼쪽 정렬 소스는      margin: 0 auto 0 0;   




        오른쪽 정렬 소스는      margin: 0 0 0 auto;   






박스 안의 글자를 왼쪽으로 정렬 하려면 글씨를 드래그 선택한 후 글 왼쪽 정렬 아이콘을 클릭해서 왼쪽으로 정렬 시킨다.






설정을 하다가 실수나, 마음에 들지 않을 경우 글을 지워도 박스가 없어 지지가 않는 경우가 있다. 이 때는 HTML을 한 번 체크하면 박스가 없어진다.




티스토리 블로그 글상자 가로 크기 조절과 위치 정렬하기