티스토리 블로그의 인용구 색상과 두께 변경 및 수정방법

티스토리 블로그에서 글쓰는 기능 중 인용구라는 기능이 있습니다. 인용이란 남의 말이나 글을 자신의 말이나 글 속에 끌어서 쓴다는 의미이지만 저 같은 경우에는 뭔가 중요한 내용을 넣는다던지, 특별히 강조하고 싶은 내용 등 넣고 싶은것을 넣기도 합니다. 어쨌거나 저쨌거나 예쁘게 작성되어 가독성이 좋으면 될테니까요. 그럼 티스토리 블로그 인용구 변경 및 설정상태 수정하는 방법에 대해 알아봅시다.

인용구 기능은 아래 아이콘 " (큰따옴표) 모양입니다.

1. 티스토리관리 > HTML/CSS편집 > CSS에 들어갑니다.

2. CSS에서 CTRL + F를 눌러 blockquote를 검색해서 찾습니다.

 blockquote를 찾았으면 이제 본인 입맛에 맞게 꾸며주시면 됩니다. 위 네모박스에 대해 순서데로 설명드리자면!

font:14px/20px   

14px는 인용구 안에 들어갈 폰트의 사이즈이고, 20px는 줄사이 간격(크기) 입니다. 두 줄의 글이 있으면 윗 줄과 아랫줄 사이의 간격을 조절하는 것이 20px 입니다. 만약 오른쪽의 20px를 14px보다 낮으면 글이 겹쳐보이게 되니 주의하세요.

background-color : #EEEEEE;

인용구의 배경에 들어갈 색상입니다. 저는 현재 회색으로 설정해놓은 상태입니다. 제 블로그 전체가 회색빛 배경이라 이렇게 해두었습니다. 16진수 숫자의 색상이 사용되는데, 이 색상은 글씨 색상 입힐 때 잘 나타나니 참고바랍니다.

background-image:url(images/iconBlockquote.gif); 

이 부분은 인용구에 큰 따옴표의 이미지를 사용한다는 의미입니다. 저는 불필요해서 주석처리 (/* ~~ */) 하였습니다. 다른 이미지를 넣어서 사용하실 수도 있습니다.

background-position:top 10px left 10px;

인용구의 따옴표 포지션입니다. 저는 사용하지 않기에 주석처리 하였습니다.

background-repeat :no-repeat;

인용구에 배경을 사용했을 때 배경색상이나 설정한 인용구(이미지)의 크기를 반복하는지에 대한 설정입니다.

가로, 세로로 반복하게도 설정할 수 있으나, 계속 반복.. 즉 크기가 계속 커지므로 no-repeat 상태입니다.

border-left: 10px solid #F5A431;

인용구 포인트(머리말 부분 네모난 색상) 두께와 F5A431색상코드입니다.

padding:23px

인용구의 글자와 전체 상자와의 간격을 조절 / 설정할 수 있습니다.

3. 위 2번 내용을 참고하여 본인의 입맛에 맞게 인용구를 꾸며보세요!

저는 위와 같이 최종 설정을 했습니다. 참고사항 하나 말씀드리자면, 글쓰는 화면에서는 설정변경한 상태가 적용이 안되어있습니다만, 미리보기를 하시거나, 글을 발행하시면 정상적으로 바뀐데로 노출되는 것을 확인하실 수 있습니다.