티스토리 인용구 닫기 따옴표 추가 방법(CSS 값 추가)

티스토리 인용구를 보면 열림 따옴표는 존재하지만, 닫힘 따옴표가 없습니다. 이 경우는 아래의 사진처럼 CSS 값을 추가해주면 간단하게 추가가 가능합니다. 이 원리는 상단의 열림 따옴표의 이미지를 가져와, 180도 회전시켜 출력하는 방식입니다.

 

티스토리 인용구 닫기 따옴표 추가 방법(CSS 값 추가)

 

티스토리 인용구 닫기 따옴표 추가 방법(CSS 값 추가)

아래의 인용구 따옴표 닫기 CSS 값을 복사하여 HTML 편집 > 파일업로드에 따옴표 이미지를 업로드 후 CSS에 아래 값을 넣어 주시면 됩니다.

 

blockquote-style1.png

0.00MB

 

인용구 따옴표 닫기 CSS.txt

0.00MB

 

 

1. blockquote-style1.png를 다운로드합니다.
2. 티스토리 관리자 > 스킨편집 > 파일 업로드로 이동 후 "blockquote-style1.png" 파일을 업로드합니다
3. 업로드 된 blockquote-style1.png을 우클릭 후 링크 복사합니다.
4. 인용구 따옴표 닫기 CSS.txt 주소 부분에 붙여넣기 합니다.
5. 완성된 코드를 CSS 제일 하단에 넣어 주신 후 적용을 눌러주시면 됩니다.

 

 

/* 인용구 닫기 따옴표 추가 */
#tt-body-page blockquote[data-ke-style='style1']::before {
  content: '';
  display: block;
  padding-top: 2rem;
}

#tt-body-page blockquote[data-ke-style='style1']::after {
  content: '';
  display: block;
  background: url(주소) no-repeat 50% 0;
  padding-top: 2rem;
  transform: rotate(180deg);
}

 

아래 참고 글을 통해 저만의 코딩으로 변경했습니다.

 

참고 글 : https://lbtest.tistory.com/302