[티스토리 팁] 제목 지정할 때 유용한 인용구 수정하기

 

 

 

 

 

티스토리 글쓰기를 하다 보면, 다양한 기능과 메뉴들이 있지만 인용구라는 항목이 가장 눈에 들어올 것입니다. 인용구라는 기능은 따옴표 모양으로 "가나 이렇게 되어있습니다. 인용구에는 무엇인가 중요한 내용이라던지, 관심가는 주제를 적을 수 있습니다. 모바일화면에서는 큰 따옴표로 표시되지만, PC화면에서는 왼쪽 세로 줄처럼 되어있습니다. 실제로 비교해보시면 쉽게 확인해보실 수 있습니다. 

 

▲ PC 화면에서 본 인용구

 

 

 

 

▲ 모바일 화면에서 본 인용구

 

포스팅이 길어지면, 자칫 독자들은 지루해지기 쉽습니다. 그래서 인용구를 추가하여 변화를 주면 글의 내용을 좀 더 쉽게 이해할 수 있게 합니다. 이러한 많은 장점이 있지만, 인용구를 사용해보니 회색의 세로줄 바로 고정되어 있습니다. 기본적으로 색상변경하는 메뉴는 제공하지 않더군요. 이 점이 정말 불편했습니다. 

 

물론 다른 방법, 포토샵으로 이미지를 만들어 글의 중간중간 넣어 사람의 눈을 확 끌수는 있겠으나, 이것도 만만치 않는 잡업이라 감히 추천드리는 방법은 아닙니다. 시간이 많은 블로거라면 정성스레 포스팅하여 양질의 콘텐츠를 생산할 수도 있겠지요. 

 

간편하게, 하지만 처음 사용자라면 약간 복잡한 HTML/CSS 편집 방법을 통해 인용구를 수정해보도록 하겠습니다. 

 

 

HTML/CSS 편집을 통한 인용구 수정하는 방법

인용구를 어떻게 수정해야 원하는 모양으로 만들 수 있는지 알아봅시다. 초보자분들도 그림보면서 차근차근 따라하면 손쉽게 바꾸실 수 있습니다. 물론 이 모양으로 사용해도 이쁘지만, 좀 더 수정하면 정말 더 이쁘겠죠? 

아래 사진의 따옴표 모양이 인용구 기능이며, "가나 와 적용취소 두 가지 버튼이 있다. 아래와 같이 입력하고 미리보기를 해보시면 쉽게 이해할 수 있습니다. 

 

 

1. 관리자 모드로 들어가서, 블로그 관리 메뉴중 꾸미기 → HTML/CSS 편집 탭을 클릭합니다.

 

2. CSS 편집 탬으로 진입해서, Ctrl+F(찾기) 단축키로 'blockquote' 검색합니다.

 

 

 

3. 소스 코드를 해석해보시기 바랍니다. 이 블로그는 티스토리에서 기본으로 제공하는 것이 아니라, 자체적으로 제작하여 만든 블로그라서 조금 상이합니다. 영어를 확인해보시고 알맞게 변형하시면 될 것 같습니다. 

4. 배경색 바꾸기 : Background-Color : #fafafa 

  - 인용구 배경색이 옅은 회색임을 알 수 있습니다. 원하는 색은 아래 HTML Color Picker 도구를 이용하여 변형하시기 바랍니다.

5. 왼쪽 보더(세로줄) 컬러 및 두께 변경 : Border-left : 5px solid #dddddd

  - 왼쪽 세로줄의 보더 및 색상 변경이 가능합니다. 

6. 인용구 높이(패팅) 수정하기 - padding : 1px 20px

  - 원하는 높이로 수정을 하시기 바랍니다. 

 

▲ CSS 소스코드 수정결화 화면

 

 

 

HTML Color Picker

https://html-color-codes.info/old/colorpicker.html

위의 링크에서 십진수 컬러 색상 테이블을 확인할 수 있습니다. 십진수를 넣어 색상을 알 수도 있고, 컬러 피커창에서 드래그하면 우측 하단 십진수 탭에서 값을 확인할 수도 있습니다. 

 

 

기본 디폴트 인용구와 비교해보시면 확실히 차이를 느끼실 수 있으시겠죠? 위와 같이 인용구를 수정해주시면, 사람들의 눈에 확 띄고, 이 블로그에 좀 더 머무르게 할 수 있겠죠? 모두 멋진 인용구를 만들어 보시기 바랍니다.