본문 바로가기

티스토리 인용구 따옴표 닫기 만들기

by 키티언니 2024. 5. 1.

인용구 따옴표 닫기 만들기
인용구 따옴표 닫기 만들기

반응형

 오늘은 티스토리 인용구 따옴표 닫기 만들기 알려드리겠습니다. 혹시 여러분들 중에 저처럼 열기만 되고 닫기는 안 되는 블로그 따옴표 기본 옵션에 대해 의문을 가졌던 분 있으실까요? 지금부터 천천히 따라 해 보시면 됩니다. 시작하겠습니다.

 

 
 

목차

1. 따옴표 기본 옵션 미리 보기

2. CSS 코드 추가해서 따옴표 닫기 설정 방법

3. CSS 코드 복사 하기

4. 마무리

 

 

1. 따옴표 기본 옵션 미리 보기

 인용구 따옴표는 티스토리 블로그 글쓰기 맨 윗줄에 기본 서식 > 인용구를 누르면 사용가능합니다.

티스토리 블로그 기본 인용구
티스토리 블로그 기본 인용구

 

CSS 코드 적용 전 ▶ CSS 코드 적용 후
CSS 코드 적용 전 ▶ CSS 코드 적용 후

 

 

 

2. CSS 코드 추가해서 인 따옴표 닫기 설정 방법

 ① 따옴표 CSS를 추가하려면 먼저 블로그 관리자모드로 이동합니다. 그리고  관리자모드에서 꾸미기 스킨편집 html편집 CSS 순서로 들어갑니다. 

인용구 따옴표 닫기 만들기인용구 따옴표 닫기 만들기
인용구 따옴표 닫기 만들기
인용구 따옴표 닫기 만들기인용구 따옴표 닫기 만들기
인용구 따옴표 닫기 만들기

 

 ② 코드를 복사한 후 CSS탭 맨 끝으로 내려가서 코드를 붙여 넣고 적용을 눌러 마무리합니다.

인용구 따옴표 닫기 만들기
인용구 따옴표 닫기 만들기

 

 ③ CSS 적용이 잘 되었는지 미리 보기로 확인하기

 CSS 적용 시 글쓰기에서는 닫기 따옴표가 확인이 안 됩니다. 하지만 미리 보기로 보면 CSS 코드가 정상적으로 적용된 것을 확인하실 수 있습니다.

본문을 작성하신 후에 미리보기에서 확인한 모습입니다.
본문을 작성하신 후에 미리보기에서 확인한 모습입니다.

 

 

3. 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);
}
/* 인용구 닫기 따옴표 추가 코드 끝 */

 

 

 

4. 마무리

 오늘은 티스토리 인용구 따옴표 닫기 만들기 알아봤습니다. 티스토리에서 인용구 따옴표를 올바르게 닫는 방법을 마스터하면 글의 신뢰성과 전문성이 향상됩니다. 간단한 HTML 수정으로 독자의 이해도를 높이세요.

반응형