티스토리 인용문 닫는 따옴표 추가0w0

도서 리뷰를 쓰려다가, 뜻하지 않게 장애물을 마주했습니다.

인용구를 쓰려는데, 인용문 기능이.. 여는 따옴표만 있고, 닫는 따옴표가 없는 겁니다.

쌍따옴표, double quotes 아닌가요?!

아무튼 그래서.. 도서 리뷰 작성하다 말고, 수작업으로 닫는 따옴표 추가해줍니다.

편집을 하는 데에는.. 여러 블로그를 참고해서 진행, 사진은 제 블로그 캡처화면입니다.

 

1. 인용문 작성

- 마음에 드는 구절부터 적고, 사진과 줄거리를 업로드 할 예정이었으나, 따옴표에서 띠용 했습니다. 

인용문 여는 따옴표

 

 

2. 블로그 관리

- 우측 프로필아이콘이라 해야 하나, T있는 작은 원을 눌러주면 직관적인 톱니바퀴가 보입니다. 눌러서 관리페이지로 이동합니다.

블로그 관리로 이동합니다

 

3. 블로그 관리 > 스킨 편집

- 블로그 관리 페이지에서 좌측 메뉴바를 보면, 상당히 하단에 "꾸미기"가 있습니다. 꾸미기 > 스킨 편집 클릭하셔서 페이지 이동합니다.

우측에 블로그 관리사항이랄까, 정보가 많지만 정보보호를 위해 메뉴바만 잘라서 썼습니다.

블로그 관리 메뉴

 

 

4. 스킨 편집 > HTML 편집

- 좌측에 제 글 목록도 뜨긴 합니다만, 스킨 편집 부분만 잘라서 올립니다 호호. 작은 그림 하단의 [html 편집] 버튼을 눌러줍니다.

스킨 편집

 

5.  confirm

- 무시무시한 경고창 같은 컨펌창이 나타납니다. html과 css를 건드리는 순간 오류의 향연을 만날 수 있긴 합니다. 물론 계속 진행합니다!

confirm 확인

 

6. CSS 편집

- 확인을 눌러서 소스가 뜨면, HTML을 먼저 보여줍니다. 우린 CSS 탭을 눌러서 CSS소스를 볼 겁니다.

내 티스토리 블로그의 CSS소스를 직접 볼 수 있다니, 신기한 경험이네요.

내 티스토리 블로그의 CSS소스

 

7.  인용문

- 내리다보면, 인용문 코드가 보입니다. 여기가 여는 따옴표를 보여주는 코드입니다. 실제 저 url을 드래그하여 주소창에 붙여넣고 엔터를 치면, "여는 따옴표" 이미지가 작게 나타납니다.

인용문 여는 따옴표 이미지를 보여주는 CSS코드

8. 코드 추가

- 인용문 바로 아래에 엔터를 좀 치고, 인용문 닫는 따옴표 코드를 추가로 작성합니다. 마찬가지로, 해당 url로 접속하면 닫는 따옴표의 이미지가 있습니다. 코드의 텍스트는 글 가장 하단에 작성해두도록 하겠습니다.

인용문 닫는 따옴표 CSS코드 추가

 

9. 적용

- 작성을 끝내고, 상단 적용버튼을 누르면 alert창이 표출됩니다. 잘 적용되었는지 확인하러 가 봅니다. 두근두근!

편집 완료 alert

 

10. 인용문 닫는 따옴표 적용 확인

- 아니 이게 무슨 일이야ㅋㅋ 편집중인 에디터 화면에서는 여전히 인용문 닫는 따옴표가 보이지 않습니다. 속았다!

라고 생각했지만, 사실 좌측 하단 미리보기를 누르면 닫는 따옴표가 적용된 미리보기 화면을 볼 수 있습니다.

글 작성 중인 화면에서는 여전히 닫는 따옴표가 보이지 않습니다.

 

 

11. 미리보기

- 만족스러운 결과입니다. 이제 도서 리뷰를 작성하러 가 보아야겠어요. 사실 시간이 늦었으니 내일 해야겠다.

닫는 따옴표가 적용된 미리보기 화면

 

 

 

아래는 CSS코드입니다.

/* 인용문 */

#article-view blockquote[data-ke-style='style1'] {

text-align: center;

background: url(https://t1.daumcdn.net/keditor/dist/0.7.21/image/blockquote-style1.svg) no-repeat 50% 0;

padding: 34px 0 0 0;

font-size: 1.12em;

color: #333;

line-height: 1.67;

border: 0 none;

font-family: "Noto Serif KR";

}

/* 인용문 닫는 따옴표 */

#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);

}

 

 

어라, 인용문 종류에 따옴표가 아닌 박스 모양도 있네요. 여기에도 코드를 적어봐야지.

/* 인용문 */
#article-view blockquote[data-ke-style='style1'] {
text-align: center;
background: url(https://t1.daumcdn.net/keditor/dist/0.7.21/image/blockquote-style1.svg) no-repeat 50% 0;
padding: 34px 0 0 0;
font-size: 1.12em;
color: #333;
line-height: 1.67;
border: 0 none;
font-family: "Noto Serif KR";
}

/* 인용문 닫는 따옴표 */
#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);
}