다 알고 있는 내용을 괜히 아는척 하며 포스팅 하는 것 같아 조금 거시기 하지만 아직 이런 내용을 소개 한 곳도 보이지 않고 포스팅에 활용하고 계신 분도 보지 못하여 혹여나 도움이 되실려나 하고 올려 봅니다.

소개드릴 내응은,
티스토리에서 소제목을 적거나 본문에서 포인트를 주는 도구로 많이 활용하고 있는 '글상자'(유식하게 이야기하면 레이어박스)의 가로 크기를 변경하는 방법과 이걸 포스트 중앙에 위치 시키는 방법 등입니다.

아시다시피 글상자는 글쓰기에서 에디터창 상단에 있는 '가'라고 쓰인 도구인데 클릭하면,



아래와 같은 옵션창이 나타나서 다양한 글상자를 택하여 포스팅에 도움을 주게 됩니다.



예를 들어 이렇게 '글상자'로 간단하게 글을 적어 넣어 보았습니다.
이건 위의 도구창에서 손가락 표시가 되어 있는, 연두색 바탕에 녹색 테두리를 선택하여 만든 것 입니다.


도구창의 다양한 옵션을 활용 할 수도 있는데요. 바탕의 색상이나 테두리등을 직접 꾸밀수도 있습니다.('간단선택'과 '직접선택'을 통하여)

이건 '직접선택'의 창으로 만든 것인데 테두리선의 굵기를 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, 글상자 안 포스트의 중앙정렬과 좌측정렬





 

이렇게 하여 만든 글상자의 결과물입니다.

별것도 아닌 내용이었읍니만 글상자 활용에 조금이나마 도움이 되길 바랍니다. 참고로 이런저런 곳에 많이 사용되는 색상표 코드는 이곳에 있으니 많이 활용 바랍니다. 



주: 바로 위의 글상자 소스를 보시면,, 글상자를 중앙으로 옮기면 <DIV style="TEXT-ALIGN: center">가 글상자 앞에 붙게 되는데
이건 익스플로러에서는 먹히지만 크롬에서는 정식으로 태그를 넣어야 됩니다.
즉, <DIV style="TEXT-ALIGN: center">를 넣어면 되지 않고 <DIV ALIGN=CENTER>로 하셔야 됩니다.
크롬을 브라우저로 사용하시는 분은 참고 바랍니다.

댓글을 달아 주세요

  1. 2011.08.11 10:37 신고 Favicon of https://fbpark.tistory.com BlogIcon 참새날다  댓글주소  수정/삭제  댓글쓰기

    지구별님 바로 딱 제가 알고 싶어하는 것이었어요. 별것도 아닌 것들이 원래 속 썩이거든요... 별것도 아닌 것들이 알구보면 별것일 수도 구요. ^^ 감사합니당.width값을 넣어야 하는구요.전 어디 "수정"해야 하나하구...헤맸답니다. .

  2. 2011.08.11 11:01 신고 Favicon of https://fbpark.tistory.com BlogIcon 참새날다  댓글주소  수정/삭제  댓글쓰기

    앞으로 별것 아닌 팁 좀 계속 올려주세요 ^^ 별것 아니라 누구한테 물어볼 수도 없고..전전긍등이지요. ㅋ 저는 왜 글 상자 클릭하면 네 귀퉁이에 작은 상자가 안생길까요. 그냥 center 지정햇어요.

    • Favicon of https://duga.tistory.com BlogIcon 두가 2011.08.11 13:24 신고  댓글주소  수정/삭제

      귀퉁이에 생기는 작은 네모상자는 신경쓰지 말고 마우스로
      확 잡아 끌어 가운데 정렬 클릭하면 옮겨질 것 입니다.
      소스를 앞에 넣어도 되구요..^^

  3. 2011.08.11 11:07 신고 Favicon of https://fbpark.tistory.com BlogIcon 참새날다  댓글주소  수정/삭제  댓글쓰기

    에디터의 기본 글자 크기를 10포인토로 지정해놓은 방법을 알려주시면 감사하겠습니다. ^^

    • Favicon of https://duga.tistory.com BlogIcon 두가 2011.08.11 13:27 신고  댓글주소  수정/삭제

      저도 새삼스러이 에디터를 보니
      굴림에 9pt가 기본으로 설정이 되어 있네요.
      이건 변경이 불가능(함 알아 보겠습니다만..)한것 아닌가요?
      본문의 글을 특정한 크기나 글씨체로 지정 하실려면
      style css에 들어 가셔서 하면 됩니다만요..^^

  4. 2012.03.21 00:28 신고 Favicon of https://scw9935.tistory.com BlogIcon 갱갤  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다.

  5. 2012.09.10 03:55 신고 Favicon of http://kariere.tistory.com BlogIcon 루카~  댓글주소  수정/삭제  댓글쓰기

    님 최고예요. ^^b 바뀐 글상자 소스때문에 멘붕타다
    님 글 보고 공부해서 배웠습니다.
    정말 감사하고요 추천드리고 가요. 행복하세요. ^^~*

  6. 2013.04.09 23:20 신고 Favicon of http://sdk4.tistory.com BlogIcon 김짱미  댓글주소  수정/삭제  댓글쓰기

    하나 배우고 가네요 ㅋ

  7. 2019.06.09 10:43 신고 Favicon of https://chqvk12.tistory.com BlogIcon 상구남  댓글주소  수정/삭제  댓글쓰기

    깔끔한 설명 너무 고마워용

prev | 1 | ··· | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | ··· | 100 | next


☆ 전체 여행기와 산행기 보기( 열림 - 닫힘) ☆