티스토리 서식(글 상자)

오늘은 서식을 이용하여 글 상자를 만드는 방법을 공유하려고 합니다.

현재까지 티스토리에서는 에디터로 글 상자를 지원하진 않으므로 서식을 이용하여 글 상자를 사용해야 합니다.

글 상자의 테두리 및 내부 색상뿐만 아니라 굵기도 마음대로 변경이 가능하여 유용하게 사용할 수 있습니다.

 

1. 서식 작성 방법

• 왼쪽에 '콘텐츠 > 서식 관리'를 클릭한다.
• 오른쪽에 있는 '서식 쓰기'를 클릭한다.

 

• 해당 서식의 제목을 작성한다.
• '기본 모드 > HTML'을 클릭한다.

 

• 생성할 서식을 HTML Code로 작성한다.

 

• 'HTML > 기본 모드'를 클릭한다.

 

• 생성하려는 서식이 잘 작성되었는지 확인한다.

 

• 티스토리 글을 작성할 때, ['...' > '서식' > 추가할 서식을 선택]을 해주면 된다.

 

 

2. 서식 예시 (HTML Code)

1) 테두리 없는 글 상자

 

<div class="txc-textbox" style="background-color: #fafafa; padding: 10px; border: none; border-width: 1px; border-color: #79a5e4;">
<p data-ke-size="size16">&nbsp;</p>
</div>
<p data-ke-size="size16">&nbsp;</p>

• background-color: #fafafa > 글 상자 배경 색상

 

2) 테두리 없는 글 상자(스크롤 바 추가)

 

<div class="txc-textbox" style="overflow: auto; white-space: nowrap; background-color: #fafafa; padding: 10px; border: none; border-width: 1px; border-color: #79a5e4;">
<p data-ke-size="size16">&nbsp;</p>
</div>
<p data-ke-size="size16">&nbsp;</p>

• background-color: #fafafa > 글 상자 배경 색상

 

3) 한 줄 테두리 글 상자

 

<div class="txc-textbox" style="background-color: #fafafa; padding: 10px; border: 4px solid #ffcefe;">
<p data-ke-size="size16">&nbsp;</p>
</div>
<p data-ke-size="size16">&nbsp;</p>

• background-color: #fafafa > 글 상자 배경 색상
• border: 4px > 테두리 굵기
• solid #ffcefe > 한 줄 테두리 색상

 

4) 두 줄 테두리 글 상자

 

<div class="txc-textbox" style="background-color: #fafafa; padding: 10px; border: 4px double #ffcefe;">
<p data-ke-size="size16">&nbsp;</p>
</div>
<p data-ke-size="size16">&nbsp;</p>

• background-color: #fafafa > 글 상자 배경 색상
• border: 4px > 테두리 굵기
• double #ffcefe > 두 줄 테두리 색상

 

5) 점선 테두리 글 상자

 

<div class="txc-textbox" style="background-color: #fafafa; padding: 10px; border: 4px dashed #ffcefe;">
<p data-ke-size="size16">&nbsp;</p>
</div>
<p data-ke-size="size16">&nbsp;</p>

• background-color: #fafafa > 글 상자 배경 색상
• border: 4px > 테두리 굵기
• dashed #ffcefe > 점선 테두리 색상