다 알고 있는 내용을 괜히 아는척 하며 포스팅 하는 것 같아 조금 거시기 하지만 아직 이런 내용을 소개 한 곳도 보이지 않고 포스팅에 활용하고 계신 분도 보지 못하여 혹여나 도움이 되실려나 하고 올려 봅니다.
소개드릴 내응은,
티스토리에서 소제목을 적거나 본문에서 포인트를 주는 도구로 많이 활용하고 있는 '글상자'(유식하게 이야기하면 레이어박스)의 가로 크기를 변경하는 방법과 이걸 포스트 중앙에 위치 시키는 방법 등입니다.
아시다시피 글상자는 글쓰기에서 에디터창 상단에 있는 '가'라고 쓰인 도구인데 클릭하면,
아래와 같은 옵션창이 나타나서 다양한 글상자를 택하여 포스팅에 도움을 주게 됩니다.
예를 들어 이렇게 '글상자'로 간단하게 글을 적어 넣어 보았습니다.
이건 위의 도구창에서 손가락 표시가 되어 있는, 연두색 바탕에 녹색 테두리를 선택하여 만든 것 입니다.
도구창의 다양한 옵션을 활용 할 수도 있는데요. 바탕의 색상이나 테두리등을 직접 꾸밀수도 있습니다.('간단선택'과 '직접선택'을 통하여)
이건 '직접선택'의 창으로 만든 것인데 테두리선의 굵기를 5로 하고 색상은 보라색으로 바탕은 아이보리 비슷한 것으로 선택을 하였습니다.
이제 본론으로 들어가서 글상자의 폭을 조정하는 방법을 알아 보겠습니다.
먼저 마음에 드는 글상자를 만들어 넣습니다.
저는 이런 글상자를 만들어 넣어 보았습니다. 보시다시피 자동으로 본문의 폭에 가로가 맞춰져 최대 폭 크기로 고정 됩니다.
이 글상자의 폭을 조정할려면 만들어진 글상자를 가지고는 할 수가 없고 소스에서 폭의 크기를 지정하여 줘야 합니다.
먼저 에디터창의 우측 상단에 있는 HTML에 체크를 합니다.
그 다음 본문에서 글상자 소스를 찾아 폭을 지정하여 삽입을 하면 됩니다.
폭은 두가지 형태로 지정하여 삽입 가능 합니다.
본문의 폭에 비례하여 %를 지정하여 넣거나 본문의 폭과 관계없이 폭을 정하여 px로 지정하는 방법이 있습니다.
%로 폭을 정하여 넣는 경우(예: 40%),
<DIV style="BORDER-BOTTOM: #79a5e4 1px solid; BORDER-LEFT: #79a5e4 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #dbe8fb; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BORDER-TOP: #79a5e4 1px solid; BORDER-RIGHT: #79a5e4 1px solid; PADDING-TOP: 10px; width=40%" class=txc-textbox>저는 이런 글상자를 만들어 넣어 보았습니다. 보시다시피 자동으로 본문의 폭에 가로가 맞춰져 최대크기로 고정 됩니다.</DIV>
위에서 빨간색으로 표시한 것(; width=40%)이 %로 폭을 지정하여 추가로 삽입한 소스입니다.
(제 블로그의 포스트 본문 폭이 950px 이니까 px로 환산하면 대략 285px 정도의 폭으로 나타나 집니다.)
결과는 다음과 같습니다. 이건 본인의 블로그 본문창의 크기에 따라 결과가 달라 집니다.
저는 이런 글상자를 만들어 넣어 보았습니다. 보시다시피 자동으로 본문의 폭에 가로가 맞춰져 최대크기로 고정 됩니다.
px로 폭을 지정하여 넣은 경우(예: 500px),
<DIV style="BORDER-BOTTOM: #79a5e4 1px solid; BORDER-LEFT: #79a5e4 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #dbe8fb; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BORDER-TOP: #79a5e4 1px solid; BORDER-RIGHT: #79a5e4 1px solid; PADDING-TOP: 10px; width=500px" class=txc-textbox>저는 이런 글상자를 만들어 넣어 보았습니다. 보시다시피 자동으로 본문의 폭에 가로가 맞춰져 최대크기로 고정 됩니다.</DIV>
다음과 같은 결과가 나옵니다. 본문 포스트의 폭과 관계없이 고정된 폭이 정해 집니다.
저는 이런 글상자를 만들어 넣어 보았습니다. 보시다시피 자동으로 본문의 폭에 가로가 맞춰져 최대크기로 고정 됩니다.
다음엔 이걸 포스트 내용의 중앙에 넣는 방법입니다.
방법은 일반적은 글을 가운데로 옮기는 것과 같은 방법입니다.
글상자 위에 마우스를 두고 클릭하면 네 귀퉁이에 작은 박스가 생기는데 이때 상단의 도구 중 '가운데정렬'을 클릭하면 됩니다.
근데 가운데 정렬을 하게 되면 글상자 안에 있는 글까지 모두 가운데로 정렬이 되어 버립니다.
이 내용을 그대로 사용할려면 손 댈 필요가 없으나 글상자 안의 글을 좌측정렬로 할려면 글상자 안의 내용을 마우스로 블록시켜 왼쪽정렬을 클릭하면 됩니다.
<결론>다음과 같은 내용을 이해하는 과정이었습니다.
1. 글상자 가로폭 줄이기
2. 글상자 포스트 중앙으로 이동 시키기
3, 글상자 안 포스트의 중앙정렬과 좌측정렬
이렇게 하여 만든 글상자의 결과물입니다.
별것도 아닌 내용이었읍니만 글상자 활용에 조금이나마 도움이 되길 바랍니다. 참고로 이런저런 곳에 많이 사용되는 색상표 코드는 이곳에 있으니 많이 활용 바랍니다. | 
