[티스토리] 블로그 꿀팁전수 2 - 닫는 큰따옴표 인용구 만들기

728x90

티스토리 블로그를 처음 사용하다 보면 종종 당황스러울 때가 있다. 이를테면 인용구로 자주 사용하는 "큰따옴표" 같은 경우 열리는 부분은 있되 닫히는 부분이 없기 때문이다.

오늘은 CSS를 활용해 "닫는 큰따옴표"를 구현해보고자 한다.

'인용구'란?

블로그 포스팅을 하다 보면 인용구가 필요한 경우가 있다. 인용구가 필요한 경우에는 여러 가지가 있는데 다음과 같은 상황에서 우리는 인용구를 사용할 수 있다.

인용구가 필요한 경우

주장 뒷받침: 특정한 주제나 주장에 대해 명확한 설명이나 정의를 제공할 때 전문가의 인용구를 사용하면 독자의 신뢰성을 높일 수 있음
독자에게 영감 부여: 동기 부여나 긍정적인 메시지를 전달하기 위해서 유명한 인용구를 활용하면 깊은 인상을 남길 수 있음
사례 소개: 특정한 사례 또는 경험을 토대로 설명할 때 관련 인용구를 추가해 더욱더 내용을 풍부하게 만들 수 있음
문헌 인용: 특정한 주제에 대해 더 깊이있는 정보를 제공하려면 기존 문헌이나 자료를 인용함으로써 독자에게 추가적인 읽을거리를 제공할 수 있음

티스토리에는 총 4개의 인용구가 있는데 그 밖에 다양한 인용구를 사용하고 싶다면 '서식 관리'를 통해 본인의 입맛에 따라 커스텀할 수 있다.

큰따옴표 닫기 인용구 CSS 코드 추가

그럼 닫는 큰따옴표 인용구를 구현하는 방법에 대해 알아보자. 초보자도 할 수 있을 정도로 매우 간단하니 겁먹지 말고 천천히 따라 해보자.

1. 아래 CSS 코드를 복사(Ctrl+C)

/* 닫는 큰따옴표 추가 시작 */
#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);
  }
/* 닫는 큰따옴표 추가 끝 */

2. 내 티스토리 "스킨편집" → "html 편집"으로 이동