티스토리 구 에디터 글상자 HTML 코드 정리

티스토리 구 에디터에서 제공하는 글상자의 HTML 코드입니다.

 

플래시 플레이어 지원이 종료되면서 플래시를 사용해서 일부 기능을 구현하던 티스토리 구 에디터도 같이 사용이 중단될 예정입니다.

개인적으로 글을 작성할 때 글상자 기능을 많이 사용하는 편인데 신에디터에서는 현재 글상자를 지원하지 않고 있고 앞으로 나올 기능이 추가되는 신 에디터에 글상자 기능이 추가될 지 확실하지 않기 때문에 만약을 대비해서 글상자 HTML 코드를 정리하게 됐습니다.

글 상자 HTML코드는 서식 기능을 활용하면 사용할 수 있고 만약에 새로 나올 신 에디터에 글상자 기능이 추가 된다면 아래 내용은 무시하고 에디터의 기능을 사용하면 됩니다.

 

 

※ 티스토리 구 에디터 글상자

 

구 에디터의 글상자 기능 스샷입니다.

아래 글상자 HTML 코드는 위의 간단 선택에서 제공하는 내용의 코드만 추출했습니다.

자세한 설정 변경을 원하면 코드를 수정해서 사용하길 바랍니다.

 

 

구 에디터에서 제공하는 글상자는 선 스타일, 선 굵기, 선 색, 배경색의 옵션을 변경할 수 있습니다.

선 스타일은 실선, 이중선, 점선, 선 없음을 선택할 수 있습니다.

기본 제공하는 배경색은 흰색, 회색, 노란색, 빨간색, 녹색, 파란색입니다.

 

 

 

● 글상자 - 테두리 선없음

 

<DIV class=txc-textbox style="BORDER-TOP: #f7f7f7 1px solid; BORDER-RIGHT: #f7f7f7 1px solid; BORDER-BOTTOM: #f7f7f7 1px solid; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; BORDER-LEFT: #f7f7f7 1px solid; PADDING-RIGHT: 10px; BACKGROUND-COLOR: #ffffff">
<P>흰색 선없음</P></DIV>

 

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

 

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

 

<DIV class=txc-textbox style="BORDER-TOP: #fedec7 1px solid; BORDER-RIGHT: #fedec7 1px solid; BORDER-BOTTOM: #fedec7 1px solid; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; ORDER-LEFT: #fedec7 1px solid; PADDING-RIGHT: 10px; BACKGROUND-COLOR: #fedec7">
<P>빨간색 선없음</P></DIV>

  

<DIV class=txc-textbox style="BORDER-TOP: #e7fdb5 1px solid; BORDER-RIGHT: #e7fdb5 1px solid; BORDER-BOTTOM: #e7fdb5 1px solid; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; BORDER-LEFT: #e7fdb5 1px solid; PADDING-RIGHT: 10px; BACKGROUND-COLOR: #e7fdb5">
<P>녹색 선없음</P></DIV> 

  

<DIV class=txc-textbox style="BORDER-TOP: #dbe8fb 1px solid; BORDER-RIGHT: #dbe8fb 1px solid; BORDER-BOTTOM: #dbe8fb 1px solid; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; BORDER-LEFT: #dbe8fb 1px solid; PADDING-RIGHT: 10px; BACKGROUND-COLOR: #dbe8fb">
<P>파란색 선없음</P></DIV>

 

 

---

 

● 글상자 - 점선

 

<DIV class=txc-textbox style="BORDER-TOP: #cbcbcb 1px dashed; BORDER-RIGHT: #cbcbcb 1px dashed; BORDER-BOTTOM: #cbcbcb 1px dashed; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; BORDER-LEFT: #cbcbcb 1px dashed; PADDING-RIGHT: 10px; BACKGROUND-COLOR: #ffffff">
<P>흰색 점선</P></DIV>

 

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

 

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

 

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

 

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

 

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

 

 

---

 

● 글상자 - 실선

 

<DIV class=txc-textbox style="BORDER-TOP: #cbcbcb 1px solid; BORDER-RIGHT: #cbcbcb 1px solid; BORDER-BOTTOM: #cbcbcb 1px solid; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; BORDER-LEFT: #cbcbcb 1px solid; PADDING-RIGHT: 10px; BACKGROUND-COLOR: #ffffff">
<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>

 

<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: #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: #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: #cbcbcb 3px double; BORDER-RIGHT: #cbcbcb 3px double; BORDER-BOTTOM: #cbcbcb 3px double; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; BORDER-LEFT: #cbcbcb 3px double; PADDING-RIGHT: 10px; BACKGROUND-COLOR: #ffffff">
<P>흰색 이중선</P></DIV>

 

<DIV class=txc-textbox style="BORDER-TOP: #c1c1c1 3px double; BORDER-RIGHT: #c1c1c1 3px double; BORDER-BOTTOM: #c1c1c1 3px double; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; BORDER-LEFT: #c1c1c1 3px double; PADDING-RIGHT: 10px; BACKGROUND-COLOR: #eeeeee">
<P>회색 이중선</P></DIV>

 

<DIV class=txc-textbox style="BORDER-TOP: #f3c534 3px double; BORDER-RIGHT: #f3c534 3px double; BORDER-BOTTOM: #f3c534 3px double; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; BORDER-LEFT: #f3c534 3px double; PADDING-RIGHT: 10px; BACKGROUND-COLOR: #fefeb8">
<P>노란색 이중선</P></DIV>

 

<DIV class=txc-textbox style="BORDER-TOP: #fe8943 3px double; BORDER-RIGHT: #fe8943 3px double; BORDER-BOTTOM: #fe8943 3px double; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; BORDER-LEFT: #fe8943 3px double; PADDING-RIGHT: 10px; BACKGROUND-COLOR: #fedec7">
<P>빨간색 이중선</P></DIV>

 

<DIV class=txc-textbox style="BORDER-TOP: #9fd331 3px double; BORDER-RIGHT: #9fd331 3px double; BORDER-BOTTOM: #9fd331 3px double; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; BORDER-LEFT: #9fd331 3px double; PADDING-RIGHT: 10px; BACKGROUND-COLOR: #e7fdb5">
<P>녹색 이중선</P></DIV>

 

<DIV class=txc-textbox style="BORDER-TOP: #79a5e4 3px double; BORDER-RIGHT: #79a5e4 3px double; BORDER-BOTTOM: #79a5e4 3px double; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; BORDER-LEFT: #79a5e4 3px double; PADDING-RIGHT: 10px; BACKGROUND-COLOR: #dbe8fb">
<P>파란색 이중선</P></DIV>