[블로그 팁] 티스토리 블로그 인용구 스타일 변경하기

대부분의 블로거들이 티스토리에서 블로그를 운영하는 이유는 자유도 때문일 것입니다.

그래서 오늘은 티스토리에서 사용할 수 있는 인용구 스타일을 바꾸는 방법을 포스팅하려고 합니다.

먼저 인용구는 위에 표에서 " 표시되어있는 것을 누르시면 사용할 수 있다는 것은 다들 알고 계실텐데요.

인용구는 보통 드라마 리뷰 포스팅에서 대사에 자주 사용합니다.

당연히, 티스토리 블로그에서는 이러한 인용구도 블로거 마음대로 변경할 수 있습니다.

그럼, 블로그 인용구 변경을 변경해볼까요.

먼저, 블로그 관리 > 꾸미기 > 스킨 편집으로 들어갑니다.

스킨 편집에서 html 편집으로 들어갑니다.

그러면, 아래처럼 HTML / CSS / 파일업로드 탭이 있는 것을 확인하실 수 있을 거에요.

여기서, CSS 탭을 누르시면, 아래와 같은 CSS 스타일 코드가 나오는 것을 확인할 수 있습니다.

이제 인용구와 관련된 코드를 확인 해야 할텐데요.

인용구와 관련된 코드는 코드 내에서 blockquote 를 검색하여, 아래와 같은 부분을 찾아주시기 바랍니다.

검색 방법은 Ctrl + F 를 누르시고, 검색하실 단어를 입력하시면 되겠습니다.

그럼, 위의 코드에 대해서 설명하겠습니다.

font: 14px/20px italic Times, serif;

14px 은 인용구 내의 폰트 사이즈를 말하고, 20px는 줄 사이의 간격을 말합니다.

italic Times와 serif는 폰트 스타일을 뜻합니다.

background-color: #FFFFFF;

인용구의 배경색을 말합니다. 기존에는 #EEEEEE로 설정되어 있을텐데, 저의 경우에는 #FFFFFF로 설정하였습니다.

둘의 차이는 아래 이미지를 확인해주세요.

[인용구 배경색 #EEEEEE]

[인용구 배경색 #FFFFFF]

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

gif는 이미지를 뜻한다는 것을 유추하실 수 있으시겠죠? 인용구의 " 이미지를 뜻합니다.

background-position: top 10px left 10px;

인용구내의 따옴표가 들어가는 위치를 표시합니다. 위치를 변경하고자 하시면 숫자를 변경해보세요.

background-repeat: no-repeat;

background-repeat로 배경 이미지의 반복 여부와 반복 방향을 정합니다.

여기서 no-repeat는 반복하지 않겠다는 뜻입니다. 그 외의 여러 방법이 있는데, 자세한 내용은 찾아보시면 될 것 같습니다.

border-left: 10px solid #F5A431;

인용구 앞부분의 네모난 부분 스타일을 설정하는 부분입니다. 두께와 색상을 변경할 수 있습니다.

padding: 23px;

인용구의 글자와 네모칸의 간격(공백?)을 설정하는 부분입니다. 

이상으로 인용구에 대한 설명을 마치겠습니다. 도움이 되셨다면 좋아요 한번씩 클릭해주세요. :)