티스토리 블로그_접은글 더보기 버튼 꾸미기

티스토리에서 기본으로 제공하는 접은글은 미적으로도 예쁘지 않고 가독성도 떨어지죠. 본문과 접은글 속 내용의 경계도 불분명하죠. 오늘은 접은글을 커스터마이징하여 글의 가독성을 높이는 작업을 해보겠습니다. 완성을 하고 나면 아래와 같은 접은글 디자인이 나올 것입니다.

접은글 예시입니다. 접은글 더보기 버튼 꾸미기는 CSS 코드만 붙이면 되는 작업으로 정말 간단합니다!

1. CSS 코드 복사하기

아래의 CSS 코드를 복사하세요.

/* 접은글 더보기 꾸미기 */
.btn-toggle-moreless, .btn_more, .btn_less {
    background: #1b9a1a; /* 버튼 배경색 */
}
.btn-toggle-moreless, .btn_more, .btn_less {
    z-index: 1;
    position: relative;
    display: inline-block;
    padding: 5px 7px; /* 버튼 안쪽 패딩 */
    border-radius: 8px; /* 버튼 둥근 정도 */
    margin-top: 5px;
    color: #fff !important; /* 버튼의 더보기 글씨색 */
    font-size: 14px !important; /* 버튼의 글씨 크기*/
}
div[data-ke-type='moreLess'] {
	position:relative;
}
div[data-ke-type='moreLess']::before {
    content: '';
    position: absolute;
    width: 100%;
    border-bottom: 0px dashed #ebebeb; /* 버튼 오른쪽 선 */
    margin-top: 22.5px;
}
.moreless-content {
    padding: 15px 5px;
    border-bottom: 1px dashed #1b9a1a; /* 박스 아래쪽 선 */
		border-top: 1px dashed #1b9a1a; /* 박스 위쪽 선 */
		border-right: 1px dashed #1b9a1a; /* 박스 오른쪽 선 */
		border-left: 1px dashed #1b9a1a; /* 박스 왼쪽 선 */
		background: #fff; /* 박스 안 배경색 */
}
.btn-toggle-moreless:before, .btn_more:before {
    content: '✚';/* 버튼이 접혀있을 때 앞에 붙일 아이콘 */
    margin-right: 5px;
}
.open .btn-toggle-moreless:before, .btn_less:before {
    content: '✖'; /* 버튼을 닫을 때 앞에 붙일 아이콘 */
    margin-right: 5px;
}