티스토리 블로그 꾸미기 팁 #1, 인용구 만들기

안녕하세요 토로토 입니다. 

인용구를 사용하면 글을 더욱 효과적으로 적을 수 있습니다. 서브 제목을 만들 때, 혹은 다른 글에서 사용한 문구들을 인용할 때 등 여러가지 방법으로 사용할 수 있는데요, 저는 보통 서브 제목을 만들 때 사용합니다. 근데 가끔씩 어떤 스킨들은 인용구가 제대로 설정이 되어있지 않을 때가 있습니다. 제 스킨 역시 마찬가지였는데요, 그래서 기본 티스토리 스킨과 현제 스킨을 비교해 가면서 찾아본 결과 인용구를 만드는데 성공했습니다. 

html/css 편집 창에 "blockquote" 가 안보인다? 

인터넷에 찾아보니 모두 css 편집 창에서 "blockquote" 를 찾아서 바꾸라고 하는데, 제가 사용중인 스킨에는 blockquote 가 안보이더라고요. 스킨을 만드신 분이 까먹은 건지 일부러 안 넣은 건지... 그래서 예상치 못하게 css 를 공부하게 됬습니다. 그러면서 여러가지 스킨들을 서로 비교하고 현재 스킨을 가지고도 여러가지 실험을 해 보던 중 어떻게 해야 인용구가 설정이 되는지 알았습니다.

먼저 티스토리 관리자 메뉴에서 "꾸미기 > 스킨 편집" 을 클릭해 주세요.

그 다음 "html 편집" 버튼을 클릭해 줍시다. 그러면 html/css 편집 창이 뜹니다. 

blockquote 를 추가하기 위해서는 먼저 스킨을 만드신 분이 코드를 작성할 때 사용한 클래스의 이름을 알아야 합니다. 먼저 html 편집 창에서 "Ctrl + F" 를 눌러서 "article_rep_desc" 를 찾아 줍시다. 아래 사진을 보시면 "class" 라고 되어있는 곳을 표시해 뒀는데요, 첫번째는 조금 올라가서 <s_permalink_article_rep> 바로 아래에, 두번째는

안녕하세요 토로토 입니다. 

인용구를 사용하면 글을 더욱 효과적으로 적을 수 있습니다. 서브 제목을 만들 때, 혹은 다른 글에서 사용한 문구들을 인용할 때 등 여러가지 방법으로 사용할 수 있는데요, 저는 보통 서브 제목을 만들 때 사용합니다. 근데 가끔씩 어떤 스킨들은 인용구가 제대로 설정이 되어있지 않을 때가 있습니다. 제 스킨 역시 마찬가지였는데요, 그래서 기본 티스토리 스킨과 현제 스킨을 비교해 가면서 찾아본 결과 인용구를 만드는데 성공했습니다. 

html/css 편집 창에 "blockquote" 가 안보인다? 

인터넷에 찾아보니 모두 css 편집 창에서 "blockquote" 를 찾아서 바꾸라고 하는데, 제가 사용중인 스킨에는 blockquote 가 안보이더라고요. 스킨을 만드신 분이 까먹은 건지 일부러 안 넣은 건지... 그래서 예상치 못하게 css 를 공부하게 됬습니다. 그러면서 여러가지 스킨들을 서로 비교하고 현재 스킨을 가지고도 여러가지 실험을 해 보던 중 어떻게 해야 인용구가 설정이 되는지 알았습니다.

먼저 티스토리 관리자 메뉴에서 "꾸미기 > 스킨 편집" 을 클릭해 주세요.

그 다음 "html 편집" 버튼을 클릭해 줍시다. 그러면 html/css 편집 창이 뜹니다. 

blockquote 를 추가하기 위해서는 먼저 스킨을 만드신 분이 코드를 작성할 때 사용한 클래스의 이름을 알아야 합니다. 먼저 html 편집 창에서 "Ctrl + F" 를 눌러서 "article_rep_desc" 를 찾아 줍시다. 아래 사진을 보시면 "class" 라고 되어있는 곳을 표시해 뒀는데요, 첫번째는 조금 올라가서 <s_permalink_article_rep> 바로 아래에, 두번째는 바로 위에 있습니다. 스킨 제작자 마다 이름이 다를 수 있기 때문에 이 두 클래스의 이름을 잘 기억해두시기 바랍니다. 저는 "item_detail" 과 "article_main" 이네요. 

이제 css 편집 창으로 넘어와 줍시다. 그 다음 방금 찾았던 클래스 이름을 검색하는데요, <s_permalink_article_rep> 바로 밑에 있었던 클래스 이름을 검색해 줍시다. 저는 "item_detail" 을 검색했는데, 검색 결과 총 3개가 검색되었습니다. 제일 처음으로 검색된 코드 바로 아래에 blockquote 코드를 삽입해 줍시다. 

.[첫번째 클래스 이름] .[두번째 클래스 이름] blockquote {padding:: 10px 20px; margin: 0 auto 28px; border-left: 10 px solid #adadad }

blockquote 원하는 대로 수정하기

코드를 틀리지 않고 제대로 적용하셨다면 정상적으로 인용구가 나타납니다. 다만 위에서 알려드린 코드는 티스토리 기본 스킨 인용구 스타일인데요, 코드를 수정하시면 원하지는 색과 두께를 가진 인용구를 만드실 수 있습니다. 코드들을 하나씩 설명해 드릴게요. 

padding: 10px 20px

아래 사진에 보이는 것 같이 수직선의 높이와 수직선과 텍스트의 간격을 설정합니다. 첫번째 숫자는 높이, 두번째 숫자는 간격입니다.

margin: 0

margin 은 인용구의 시작 위치를 지정하는데요, 아래 사진에 보이시는 것처럼 마진을 설정한 값 만큼 글보다 안쪽에 위치합니다.

border-left: 10px solid #adadad

border-left 는 수직선의 두께와 색상을 설정합니다. 10 px 부분이 두께를 나타나고 solid #adadad 가 색상입니다. solid 외에도 dotted, dashed 등 여러가지가 있으니 검색해 보세요. 

구글에 #adadad 라고 검색해 보시면 구글에서 제공하는 색상 값 표시 기능이 있습니다. 여기에서 원하는 색을 찾아보시면 되겠습니다.

인용구에는 수직선 뿐 아니라 이미지, 상자, 등 여러가지 스타일들이 있습니다. 블로그 특성에 맞춰서 알맞는 인용구 스타일을 찾아 잘 활용해 보세요!

바로 위에 있습니다. 스킨 제작자 마다 이름이 다를 수 있기 때문에 이 두 클래스의 이름을 잘 기억해두시기 바랍니다. 저는 "item_detail" 과 "article_main" 이네요. 

이제 css 편집 창으로 넘어와 줍시다. 그 다음 방금 찾았던 클래스 이름을 검색하는데요, <s_permalink_article_rep> 바로 밑에 있었던 클래스 이름을 검색해 줍시다. 저는 "item_detail" 을 검색했는데, 검색 결과 총 3개가 검색되었습니다. 제일 처음으로 검색된 코드 바로 아래에 blockquote 코드를 삽입해 줍시다. 

.[첫번째 클래스 이름] .[두번째 클래스 이름] blockquote {padding:: 10px 20px; margin: 0 auto 28px; border-left: 10 px solid #adadad }

blockquote 원하는 대로 수정하기

코드를 틀리지 않고 제대로 적용하셨다면 정상적으로 인용구가 나타납니다. 다만 위에서 알려드린 코드는 티스토리 기본 스킨 인용구 스타일인데요, 코드를 수정하시면 원하지는 색과 두께를 가진 인용구를 만드실 수 있습니다. 코드들을 하나씩 설명해 드릴게요. 

padding: 10px 20px

아래 사진에 보이는 것 같이 수직선의 높이와 수직선과 텍스트의 간격을 설정합니다. 첫번째 숫자는 높이, 두번째 숫자는 간격입니다.

margin: 0

margin 은 인용구의 시작 위치를 지정하는데요, 아래 사진에 보이시는 것처럼 마진을 설정한 값 만큼 글보다 안쪽에 위치합니다.

border-left: 10px solid #adadad

border-left 는 수직선의 두께와 색상을 설정합니다. 10 px 부분이 두께를 나타나고 solid #adadad 가 색상입니다. solid 외에도 dotted, dashed 등 여러가지가 있으니 검색해 보세요. 

구글에 #adadad 라고 검색해 보시면 구글에서 제공하는 색상 값 표시 기능이 있습니다. 여기에서 원하는 색을 찾아보시면 되겠습니다.

인용구에는 수직선 뿐 아니라 이미지, 상자, 등 여러가지 스타일들이 있습니다. 블로그 특성에 맞춰서 알맞는 인용구 스타일을 찾아 잘 활용해 보세요!