티스토리 블로그에 글을 쓰다 보면 글상자를 이용해서 일정한 박스 형태로 올리고 싶을 때가 있다. 그러나 티스토리 글쓰기에서는 이 기능을 직접 지원하지 않는다. 그러므로 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을 한 번 체크하면 박스가 없어진다.




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


  1. IT세레스s 2016.10.24 04:48 신고

    좋은 정보 감사합니다.
    공부 많이 됩니다.^^

    • Grandpassion 2016.10.24 07:29 신고

      예 감사합니다. IT최강자님께 제가 배워야겠는걸요!!! 좋은 하루되시구요^^

  2. 익명 2017.03.21 10:19

    비밀댓글입니다

    • Grandpassion 2017.03.21 13:06 신고

      이 포스팅이 정렬 하면서 소스를 그대로 캡쳐한 것이라, 안될리가 없는데요? 제가 할 때도 잘 됐구요, 다시 한 번 소스 빠진 것 없나 보시고, 그래도 안되면 스킨 마다 다른 방식이 적용 되더라구요, 거기까진 저도 모르겠습니다. 저도 찾아가면서 고치고 제 스킨에 적용해서 검증 된 것만 올리니까요.
      가운데 정렬 소스는 margin: 0 auto;
      이거 그대로 붙여넣기 해보세요!!!
      성공을 빕니다. 화이팅 !!!

  3. 세포. 2018.03.30 22:49 신고

    이렇게 할 경우 티스토리 앱에서는 가운데 정렬이 안되는데, 혹시 해결 방법이 있나요??

+ Recent posts