티스토리 블로그에서 더보기(접은글) 상자 만들기

티스토리에서 글을 쓰며 접은글 기능을 이용할 때

분명히 에디터상에서는 점선을 포함한 회색의 박스가 보이는데

글을 포스트한 후 확인해보면 박스가 사라져서 가독성이 떨어진다.

이렇게 말이다.

 

조금 번거롭긴하지만 다음 과정을 통해 글을 올린 후에도 박스가 보이게 할 수 있다.

 

1. 접은글을 생성하여 글을 작성한다.

 

2. 글 작성모드를 HTML로 바꾼다.

 

3. 아래 그림처럼 적용하고자 하는 접은글이 위치한 코드 중

<div class="moreless-content"> 를 찾아서 바로 윗줄을 지우고 다음의 코드를 붙여넣는다.

<div style="margin: 20px 0px; caret-color: auto; background-color: #fafafa; padding: 20px 20px 22px; border: 1px dashed #c5c5c5; color: #333333;" data-ke-type="moreLess" data-text-more="더보기" data-text-less="닫기"><a class="btn-toggle-moreless">더보기</a>

 

4. 글을 올려보면 더보기에 박스가 적용된것을 확인할 수 있다.

이렇게 말이다.

만약 글자를 "더보기", "닫기" 말고 다른 것으로 대체하고 싶으면

위의 코드에서

data-text-more="더보기" 에서 "더보기" 대신 원하는 글자를 넣고

data-text-less="닫기" 에서 "닫기" 대신 원하는 글자를 넣으면 된다.