[블로그] 티스토리 인용구 따옴표 닫기, 닫기 따옴표 추가하기

++ 2024.02.24
티스토리 블로그 테마를 정상우 개발자님의 hELLO 테마로 변경함에 따라 아래 내용은 지금 보이는 글과 다를 수 있습니다.

티스토리 블로그 인용구를 사용해 보면 인용구 시작 따옴표만 있고, 닫는 따옴표가 없다.

간단하게 몇 줄 짜리의 CSS 코드를 추가하면 인용구의 닫는 따옴표를 추가할 수 있다.

글 작성시 인용구 사용법

 

글 작성시 인용구는 우측 상단에 따옴표 모양을 누르고, 그 안에 리스트에서 따옴표를 누르면 된다.

 

티스토리 인용구 따옴표 닫기 적용된 모습

먼저 티스토리 인용구에 따옴표 닫기가 적용된 모습을 확인해 보면 아래와 같이 인용구 아래에 닫기 따옴표가 적용된 것을 확인할 수 있다.

 

티스토리 따옴표 인용구 닫기 추가

 

티스토리 인용구 따옴표 닫기 적용 방법

적용 방법은 아래의 CSS 코드를 복사하여 "티스토리 블로그 설정" > "꾸미기" > "스킨 편집" > "html 편집" > "CSS" 에디터 하단에 붙여 넣기만 하면 적용된다.

/* 인용구 닫기 따옴표 추가 */
#tt-body-page blockquote[data-ke-style='style1']::after {
  content: '';
  display: block;
  background: url(https://t1.daumcdn.net/keditor/dist/0.4.9/image/blockquote-style1.svg) no-repeat 50% 0;
  padding-top: 34px;
  transform: rotate(180deg);
}

블로그 설정 > 꾸미기 > 스킨 편집 > html 편집

 

참고로 글 작성 중에는 닫기 따옴표가 보이지 않는다. 적용된 모습을 보려면 미리 보기를 하거나 글을 발행하면 따옴표 표시가 된 것을 확인할 수 있다.