티스토리 구에디터 구분선 HTML 코드

티스토리 구버전 에디터에 있던 구분선의 HTML 코드입니다.

 

티스토리 구버전 에디터에 사용하던 HTML 코드를 백업해 둔 게 있어서 혹시 필요한 경우가 있을까 봐 정리합니다.

구분선의 경우 요즘도 <hr> 코드를 사용하지만 구버전과는 조금 다른 코드를 사용하니 포스팅할 때 참고로만 보면 좋을 거 같습니다.

 

구버전 에디터에 있는 구분선 입력 창의 스샷입니다.

실선, 이중선, 점선, 점선2, 점선3, 점선4, 점선5 의 총 7가지 구분선을 기본으로 제공했습니다.

 

 

△ 실제 에디터에 입력해 본 구분선의 스샷입니다.

 

 

 

▼ 실선 코드

<hr>

 

 

▼ 이중선 코드

<HR class=tx-hr-border-2 style="BORDER-TOP: black 1px solid; HEIGHT: 7px; BORDER-RIGHT: black 0px; BORDER-BOTTOM: black 3px solid; BORDER-LEFT: black 0px; DISPLAY: block">

 

 

▼ 점선 코드

<HR class=tx-hr-border-3 style="BORDER-TOP: black 1px dotted; HEIGHT: 1px; BORDER-RIGHT: black 0px; BORDER-BOTTOM: black 0px; BORDER-LEFT: black 0px; DISPLAY: block">

 

 

▼ 점선2 코드

<HR class=tx-hr-image-1 style="BORDER-TOP: 0px; HEIGHT: 15px; BORDER-RIGHT: 0px; BACKGROUND: url(//i1.daumcdn.net/deco/contents/horizontalrule/line03.gif?v=2) repeat-x left 50%; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px">

 

 

▼ 점선3 코드

<HR class=tx-hr-image-2 style="BORDER-TOP: 0px; HEIGHT: 15px; BORDER-RIGHT: 0px; BACKGROUND: url(//i1.daumcdn.net/deco/contents/horizontalrule/line05.gif?v=2) repeat-x left 50%; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px">

 

 

▼ 점선4 코드

<HR class=tx-hr-image-3 style="BORDER-TOP: 0px; HEIGHT: 15px; BORDER-RIGHT: 0px; BACKGROUND: url(//i1.daumcdn.net/deco/contents/horizontalrule/line06.gif?v=2) repeat-x left 50%; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px">

 

 

▼ 점선5 코드

<HR class=tx-hr-image-4 style="BORDER-TOP: 0px; HEIGHT: 15px; BORDER-RIGHT: 0px; WIDTH: 54px; BACKGROUND: url(//i1.daumcdn.net/deco/contents/horizontalrule/line08.gif?v=2) repeat-x left 50%; BORDER-BOTTOM: 0px; MARGIN: 30px auto; BORDER-LEFT: 0px">

 

 

해당 코드를 요즘 에디터에 사용하기에는 원하는 모양이 아닐 수 있어서 권장하지 않습니다.

같은 모양의 구분선이 필요한 경우 ai의 도움을 받아서 코드를 수정해서 사용하는 게 좋을 거 같습니다.