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


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



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

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

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

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

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


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


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


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




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




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




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




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




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




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




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




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


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


[친절한효자손] 티스토리 블로그 사용법



"친절한효자손 취미생활" 을 검색!


이 글을 공유하기

댓글(16)

  • 2017.01.23 22:52 신고

    감사합니다ㅎ 항상 블로그 꾸미는데에 좋은 정보 얻어가요!

  • 2017.04.20 19:58 신고

    항상 잘보고 있습니다 ! 근데 다른건 할줄 알겠는데 밑줄?같은건 어떻게 하나요??

  • 2017.04.20 20:01 신고

    그 인용구에서 바닥부분이요!
    ______ << 이런거요~~

    • 2017.04.20 20:02 신고

      잉? 인용구 디자인은 좌측에만 네모 생기는 건데요... 바닥을 굳이 넣을 수는 있겠지만 그건저도 당장은 모르겠습니다

  • 2017.04.21 13:03 신고

    저는 그대로 하는데도 왜 안바뀌는 걸까요..

  • 2017.09.15 12:37 신고

    많이 배워갑니다. 워낙 몰라서 하나하나 따라하고 있는데 되는것도 있고 제가 잘못해서 적용이 안되는 것도 있고 한데 어쨋든 많은 도움이 되고있습니다^^ 감사합니다.

  • 2017.12.03 21:22 신고

    항상 잘보고 있습니다.
    다름이 아니라 저기 인용구 따옴표 주석처리 한거있잔아요
    주석처리를 하니.. 글자가 밑으로 내려간듯보여요
    따음표가 있으면 딱 맞는위치이긴한데 글자 위치조정은 못하는지요?
    그리고 저위에 썸네일바로위 저거 인용구를 수정해서 작업한거 같은데..어찌하는지좀 알려주시면 안될런지요ㅜ

    • 2017.12.03 21:25 신고

      안녕하세요 방법이 있을텐데 강제로 위로 올리는 태그가 있는데.... 그 자세한 내막은 저도 잘 모르겠습니다. ㅜㅜ

Designed by JB FACTORY