[티스토리 스킨] 인용문 스타일

티스토리는 인용문(blockquote)에 따옴표, 좌측선, 박스의 3가지 스타일을 제공하고 있습니다. 인용문 스타일을 각각 혹은 일괄로 수정하는 방법을 정리했습니다.

---

기본 구문

기본적으로 티스토리 인용문 스타일은 다음처럼 특성 선택자(attribute selector)로 작동합니다. 특성 선택자에 대해 더 알고 싶다면, 참고자료를 확인하세요.

<blockquote data-ke-style="style1">...</blockquote>

#tt-body-page blockquote[data-ke-style='style1'] {...}

CSS 첫 부분의 #tt-body-page는 페이지 id로, 글 화면에서 출력되는 값입니다. 홈 화면이나 목록 등 다른 종류의 페이지에도 인용문 스타일을 적용하고 싶다면 추가로 설정할 필요가 있습니다. 페이지 id에 대한 상세는 여기를 참고하세요.

더불어 인용문 기본 스타일은 티스토리의 content.css에 포함되어 있어, 스킨 css에는 인용문 관련 스타일이 없는 경우도 있습니다.

참고: style1 코드

현재 style1에 적용되는 기본 코드는 다음과 같습니다.

#tt-body-page blockquote {
    margin: 20px auto 0;
}

#tt-body-page blockquote[data-ke-style='style1'] {
    text-align: center;
    background: url(https://t1.daumcdn.net/keditor/dist/0.4.9/image/blockquote-style1.svg) no-repeat 50% 0;
    padding: 34px 0 0 0;
    font-size: 15pt;
    color: #333;
    line-height: 23pt;
    border: 0 none;
}

스타일 수정

선택자별 적용

기존 스타일을 수정하고 싶은 경우, 각 선택자의 CSS를 수정하면 됩니다. 예를 들어 첫번째 스타일에 줄간격과 글자 크기를 조정하고 싶다면 다음처럼 되겠죠.

#tt-body-page blockquote[data-ke-style='style1'] {
    line-height: 150%;
    font-size: 0.9em;
}

일괄 적용

선택자와 무관하게 모든 인용문에 동일한 스타일을 적용하고 싶은 경우에는, 선택자 없이 blockquote에 원하는 스타일을 추가하면 됩니다. 예를 들면 다음과 같이 되겠네요.

#tt-body-page blockquote {
	font-style: italic;
}

다만, 선택자에 해당 설정이 있다면 이 설정이 우선되기 때문에 잘 작동하지 않을 수 있습니다. 이런 경우에는, 각 선택자마다 재설정해도 되고, 설정을 덮어쓰도록 !important 속성을 적용해도 됩니다.

#tt-body-page blockquote {
	color: red !important;
}

목록에 적용

조금 옛날 방식으로 목록에 바로 본문 전체가 출력되도록 한 적이 있습니다. 이 경우, 앞의 예에서처럼 글 화면(tt-body-page)으로 한정하여 코드를 작성하면, 목록 화면에서는 인용문 스타일이 적용되지 않습니다.

이런 경우에는 페이지 타입보다는 글 본문을 둘러싼 div로 한정하여 설정하면 되겠습니다.

.content-entry blockquote[data-ke-style='style1'] {
    line-height: 150%;
    font-size: 0.9em;
}

본문 밖에서 인용문이 사용되는 경우는 흔치 않은 만큼 전체 blockquote에 스타일을 적용해도 무방한 경우가 많을 겁니다.

참고자료

https://tistory.github.io/document-tistory-skin/common/global.html
https://www.w3schools.com/css/css_attribute_selectors.asp
https://www.w3schools.com/css/css_important.asp