본문 바로가기
Tip

티스토리 서식 이용해서 글상자 만들기!

by 짜깡이 2021. 2. 5.

티스토리 서식 이용해서 글상자 만들기


찾고싶은 정보나 글들을 찾으려 블로그를 찾아보다보면 

서식을 통해서 잘 정리된 곳들도 있고 그렇지 않은 곳들도 있습니다!

글상자 서식등을 이용한다면 문단 혹은 주제마다 구분지어져서 보는 사람이 편하게 볼 수 있겠죠?

하지만 현재 티스토리 에디터에서는 글상자를 지원하지 않아서 서식을 통해 글상자를 사용해보실 수 있어요!

간단하게 설정할 수 있으니 천천히 따라와 주시길 바랍니다~

블로그 관리 - 서식 관리창

 

HTML 모드로 변경!
서식 제목 정하고 아래 HTML 코드를 붙여넣고 저장!

<DIV class=txc-textbox style="BORDER-TOP: #79a5e4 1px solid; BORDER-RIGHT: #79a5e4 1px solid; BORDER-BOTTOM: #79a5e4 1px solid; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; BORDER-LEFT: #79a5e4 1px solid; PADDING-RIGHT: 10px; BACKGROUND-COLOR: #dbe8fb">
<P>파란색 글상자</P></DIV>

<DIV class=txc-textbox style="BORDER-TOP: #fe8943 1px solid; BORDER-RIGHT: #fe8943 1px solid; BORDER-BOTTOM: #fe8943 1px solid; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; BORDER-LEFT: #fe8943 1px solid; PADDING-RIGHT: 10px; BACKGROUND-COLOR: #fedec7">
<P>빨간색 글상자</P></DIV>

<DIV class=txc-textbox style="BORDER-TOP: #9fd331 1px solid; BORDER-RIGHT: #9fd331 1px solid; BORDER-BOTTOM: #9fd331 1px solid; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; BORDER-LEFT: #9fd331 1px solid; PADDING-RIGHT: 10px; BACKGROUND-COLOR: #e7fdb5">
<P>녹색 글상자</P></DIV>

<DIV class=txc-textbox style="BORDER-TOP: #f3c534 1px solid; BORDER-RIGHT: #f3c534 1px solid; BORDER-BOTTOM: #f3c534 1px solid; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; BORDER-LEFT: #f3c534 1px solid; PADDING-RIGHT: 10px; BACKGROUND-COLOR: #fefeb8">
<P>노란색 글상자</P></DIV>

회색 글상자<DIV class=txc-textbox style="BORDER-TOP: #c1c1c1 1px solid; BORDER-RIGHT: #c1c1c1 1px solid; BORDER-BOTTOM: #c1c1c1 1px solid; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; BORDER-LEFT: #c1c1c1 1px solid; PADDING-RIGHT: 10px; BACKGROUND-COLOR: #eeeeee">
<P>회색 글상자</P></DIV>

 

 

에디터 에서 서식 클릭

 

 

서식으로 만든 글상자 선택하기

 

 

회색 글상자 서식을 적용한 모습

 

댓글