티스토리 - 인용구 따옴표 세련되게 바꾸는 방법

 

 필자는 네이버 블로그와 티스토리 블로그를 운영하면서 네이버의 인용구 따옴표 형식이 정말 세련되게 잘되있다고 생각했었다.

 티스토리 블로그에도 적용하면 얼마나 좋을까 하는 심정으로 오늘 열심히 검색을 하고 직접 티스토리에 적용 해보았다.

 오늘도 한가지를 배웠고 그 방법을 다른 유저들에게 공유해보고자 한다.

 

 

 이 방법에는 본인의 입맛에 맞는 방식으로 바꾸는 방법과 조금 빈티나보였던 따옴표 표시를 없애는 방법이 있는데 하나씩 파헤쳐 보도록 하자.

 

방법에 대해 알아보기 전에 왜? 인용구를 활용해야 하는지 알아보자.

서두를 작성하는 방법 중 가장 세련된 방식으로 서두에 인용구를 사용하면 짧은 경구를 통해 글의 전체 주제를 암시할 수 있고 자연스럽게 자신이 말하고자 하는 의미를 유추해낼 수 있다. 그래서 능숙한 필자일수록 인용구를 적절히 이용할수 있어야 한다.

 

 

 

기본적으로 티스토리에 적용되어 있는 인용구는 이 것이다. 인용구 사이즈에 비해 글자가 너무 작아보이고 따옴표가 있어서 왠지 빈티나 보이기도 한다. 바로 이것을

 

 

 

위와 같이 바꾸는 데 변경된 사항으로 

1. 따옴표 안보임

2. 글자 사이즈 자동으로 크게 설정

3. 배경색 변경

4. 인용구 네모박스 색깔 변경, 사이즈 설정

 

 

그럼 이제 어떻게 바꾸는지 알아보도록 하자

 

먼저 블로그관리 → HTML/CSS 편집 -> CSS 클릭

 

 

 

1. CSS 창에서 blockquete를 검색한다. (HTML 에서 검색하면 안나오니 꼭 CSS에서 검색하자.)

2. 검색창(CTRL+F)이 안열려는 경우가 가끔 발생하는데 800~900 사이에 보면 위에 같은 내용이 나와있다. 

 

검색이 됬으면 검색된 내용에 대해 알아보자

 

 

 

A. 폰트크기, 줄사이간격

 

 

 

빨간색으로 밑줄 친 곳을 보면 font: 20px/28px 되있는데

왼쪽이 폰트크기

오른쪽이 줄사이간격(워드에서 줄사이간격과 비슷한 기능이다.)

 

워드에서 바로 저 부분과 동일한 기능

 

 

B. 배경색상

 

 

영어로 써진대로 백그라운 칼라, 배경색상을 입력하는 곳이다.

 

빨강: #ff0000

주황: #ffbb00

노랑: #ffe400

초록: #1ddb16

파랑: #0054ff

남색: #0100ff

보라: #5f00ff

 

원하는 색상으로 넣으면 된다.

 

 

C. 따옴표 표시 없애기

 

 

 

이 부분에 /*(주석처리) ~ */ 를 넣어서 백그라운드이미지, 즉 따옴표 부분 기능을 상실시킨 것이다. 

 

 

D. 인용구 왼쪽 네모상자 크기 및 색깔 조절

 

 

 

● border - left: 20px → 왼쪽네모상자 가로넓이

● solid #FF5E00 → 왼쪽네모상자 색상

● padding: 8px → 왼쪽네모상자 세로넓이

 

 

원하는 색상, 크기에 맞게  조절해서 인용구를 작성하면 된다.

 

자세하게 풀어보진 못했지만 이 글을 읽는 유저들에게 도움이 됬으면 한다.

 

티스토리 - 파비콘, 아이콘 설정 및 만드는 방법

티스토리 - 메인 이미지 쉽게 만드는 법