본문 바로가기
카테고리 없음

티스토리 인용 따옴표 닫기

by KalGugSu 2022. 11. 27.

티스토리 에디터의 인용 따옴표는 시작(열림)만 존재하지 끝(닫기)이 존재하지 않는다.
설마 없을거라곤....😳? 생각도 못해서 처음엔 인용 따옴표 닫기가 있는데 혹시나 내가 적용을 못하는건지 이것저것 일단 해보았다.

"적용할 글을 드래그 하고 인용을 적용한다" -> 안된다😡
blockquote태그가 안닫혀서 안되나 싶어....
"Enter를 여러번 치고 인용을 적용한다" -> 안된다😡
안되는것 같아... 어쩔수 없이 그냥 쓰다보면.. 뭔가 눈에 거슬리고 맘에 들지 않았다.🤏😕😟

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


두가지 방법이 있는데, HTML을 직접 수정하는것과 CSS를 적용하는 방법.
HTML은 매번 HTML편집 모드로 들어가서 직접 css를 적용해야 하니 번거롭다.
CSS를 적용해서 자동으로 적용되도록 해본다.

1. 티스토리 관리 메뉴에서 "스킨편집" 접속

관리 메뉴의 스킨 편집

2. HTML편집으로 이동

3. CSS로 이동

4.CSS 하단에 인용따옴표 닫기를 위한 CSS를 추가한다.
스크롤을 내려 가장 하단에 추가했다.

티스토리 인용따옴표 닫기 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);
}


적용 결과

적용전 적용후

주의 사항

작성 모드에서는 인용 따옴표 닫기가 적용되지 않는다.
미리보기하거나 작성완료된 상태만 정상 적용된다.
CSS의 after를 이용하여 동적으로 생성되기에 작성모드에서는 보이지 않음.
덕분에.. 오랜만에 CSS도 작성해 보게 되네..

댓글