[티스토리 블로그 꾸미기] 인용문 꾸미기 2탄 (블록 스타일)

안녕하세요! 지난번에 인용문 꾸미기 1탄 따옴표 스타일에 이어, 이번에는 인용문 꾸미기 2탄 (블록 스타일)에 대해 알려드리겠습니다.

이번 작업은 1탄보다 쉽기 때문에 따라 하기 쉽습니다.

이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다.

 

스킨 편집 들어가기

관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.

새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다.

'꾸미기' 탭에서 '스킨 편집'을 클릭하면 새로운 창이 열립니다. 이 창의 오른쪽 상단에 'html 편집'을 클릭합니다.

 

CSS 코드 바꾸기

우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다.

html 편집 창에서 우측 상단에 'HTML ❘ CSS ❘ 파일업로드' 옵션 중 'CSS'를 클릭합니다.

 

기본 설정 확인

 

블록 스타일의 기본 설정은 왼쪽 테두리가이 회색으로 되어 있는 것을 확인할 수 있습니다.

블록 스타일의 기본 설정은 왼쪽 테두리가 회색입니다.

 

블록 스타일 변경하기

 

CSS 파일 내에서 코드 있는 부분 아무 곳이나 클릭한 후, Ctrl+F를 눌러 검색창을 띄웁니다.

검색창에 아래 코드를 복사하여 검색합니다. 따옴표 스타일을 완성했다면, 보통 3808번째 줄에 있습니다.

#article-view blockquote[data-ke-style='style2']

CSS 파일 내에서 #article-view blockquote[data-ke-style='style2']를 검색합니다.

이제 아래 블록 스타일 코드를 복사하여 기존 코드와 교체하거나, 값만 수정합니다.

#article-view blockquote[data-ke-style='style2'] {
  border-left: 5px solid rgb(0, 191, 255); /* 왼쪽 테두리 스타일 */
  padding: 1px 0 0 12px; /* 텍스트 여백 */
  color: #333; /* 글자색 */
  line-height: 1.5; /* 문단 여백 */
  text-align: left; /* 텍스트 왼쪽 정렬 */
}

여러분이 원하는 스타일에 따라 테투리 색상 및 두께, 여백, 글자색을 수정하세요.

코드를 복사하여 붙여 넣거나, 값만 수정합니다.

 

미리보기

변경된 내용을 미리보기로 확인하여 원하는 스타일대로 적용되었는지를 확인합니다.

미리보기로 변경된 블록 스타일을 확인합니다.

 

결론

 

이번 글에서는 인용문 스타일 중 블록 스타일을 꾸미는 방법을 알아보았습니다.

스킨 편집 메뉴에서 CSS 코드를 수정하여 블록 스타일의 테두리 색상, 두께, 글자색을 변경하는 방법을 설명드렸습니다. 따옴표 스타일과 마찬가지로, 여러분이 원하는 색상으로 변경하여 진행하는 것을 권장드립니다.

다음 글에서는 인용문 꾸미기 3탄 (박스 스타일)에 대해 소개하겠습니다. 기대해 주세요!

궁금한 점이나 문제가 있으면 댓글로 알려주세요!