티스토리 (Fastboot 반응형스킨) 인용구 수정 방법

티스토리 글쓰기 기능 중에서 인용구 라는 항목이 있다. 여기에는 뭔가 중요한 내용을 넣는다던지, 필자 같은 경우는 현재 관련글을 작성할 때 사용하고 있다. 문장을 읽어 내려가는 도중에 유난히 확 튀는 부분으로 만들어 줄 수 있는 것이 인용구 기능이다.

피가되고 살이되는 블로그, 친절한효자손 취미생활!

글, 사진 및 이미지 ▶ CopyLeft(C) 유길용

#CopyLeft(C) 는 저작권의 반대개념으로, "모든것을 공유한다" 는 뜻 입니다#

#공유라는 개념은 그대로 복붙하시라는 개념이 아니라, 내용을 응용해서 가져가시라는 말씀입니다#

#사진과 이미지의 일부는 퍼온것도 있음을 밝힙니다#

티스토리 (Fastboot 반응형스킨) 인용구 수정 방법

물론 다른 방법으로도 얼마든지 중간중간 관련글을 디자인해서 멋지게 그리고 눈에 들어오게 만들 수 있지만, 번거롭기도 하고 매번 그렇게 수정하는 것도 일이기 때문에, 간편하게 티스토리의 기본 기능을 활용해 보는 것이다.

그 중에서도 블로그 스킨 중에 필자가 사랑하는 Fastboot 스킨에서 어떤 부분을 수정해야 인용구를 커스터마이징 할 수 있는지에 대한 내용을 한번 작성해 보고자 한다. 어렵지 않으니 바로 따라해보면 누구나 쉽게 적용할 수 있을 것이다.

참고로, 인용구는 바로 이 부분이다. 이 기능을 응용할 것이다.

당연히 HTML/CSS편집 부분으로 들어가야 한다.

여기서, blockquote를 검색하도록 한다. 만약 다른 스킨에서 이 부분이 검색이 되지 않는다면, 현재 위의 스샷처럼 되어있는 최대한 비슷한 코드를 찾아야 한다.

우선, 이 부분은 인용구 안에 들어갈 폰트의 사이즈와 줄 간격 조절 부분이다. 왼쪽이 폰트 크기이며, 오른쪽이 줄 사이 간격이다. 예를 들자면, 두 줄 짜리 문장이 있다면, 위의 문장과 아래 문장 사이의 간격을 조절하는 것이 오른쪽 PX인 것이다. 지금 위의 스샷은 20PX 짜리 글자 크기와 두 문장 위/아래 간격 사이는 20PX 로 이루어져 있다. 만약 오른쪽의 PX 수치를 줄여버리면 문장이 겹쳐져 글자가 합친것처럼 보일 것이다.

빨간색 박스 부분은 인용구의 백그라운드 색상 부분이다. 그리고 분홍박스는 왼쪽 포인트 부분 색상인데, 이건 밑에서 한번 더 추가설명을 할 것이다. 16진수 숫자를 사용한다.

위의 빨간색 박스안의 수치는 위에서 언급했던 포인트 부분의 넓이를 조절하는 것이다. 그리고 아래 분홍박스 부분은 글자와 전체 상자와의 간격을 조절하는 것이다.

자, 왼쪽의 높이 부분이 바로 padding 부분이다. 수치가 커질수록 높이도 늘어나게 된다. 그리고 왼쪽의 주황색 부분이 border-left 부분이다. 여기도 수치가 커질수록 넓이가 넓어질 것이다. 그리고 background-color 부분이 저기 노랑 부분이다. 이제 이해가 될 것이다. 그러면 자신이 커스텀으로 변경하고자 하는 부분의 수치를 어느정도 조절해야 좋을지를 알 수 있다.

이렇게해서, 최종적인 코드가 완성되었는데, 저기 주석처리된 부분(/* 부터 8/까지)이 어떤 기능이냐 하면, 원래 Fastboot 인용구는 큰 따옴표 이미지가 작게 들어가는건데, 그 부분은 굳이 필요 없어서 아예 기능을 빼버린 것이다. 그 아래 position 부분의 수치는 바로 해당 이미지가 들어갈 위치를 나타낸다. 필요 없어서 그냥 빼버렸다.

이렇게해서 완성된 내용이 현재 필자가 쓰는 바로 아래에 있는 관련글에서 인용구를 적용시킨 것이다. 이제 여러분들의 입맛에 따라 인용구를 한번 조절해 보도록 하자. 끝.