반응형
완전 초보일 때는 인용 스타일 바꾸기도 쉽지 않다. 티스토리에서 기본으로 제공하는 인용 스타일이 네 가지 있다. 그런데 살짝 맘에 들지 않아서 바꾸고 싶다면 CSS를 손보면 된다. 스킨마다 다르지만 blockquote를 찾으면 된다.
.article blockquote {
background-color: #F3F6FB; /*배경색*/
padding: 25px 45px; /*안쪽 여백*/
line-height: 1.75em; /*줄 높이*/
font-size: 1.0em !important;
border-left: 4px solid #E4E8F0; /*왼쪽 테두리: 굵기 4px 실선 solid 색 #E4E8F0*/
border-right: 1px solid #E4E8F0; /*오른쪽 테두리*/
border-top: 1px solid #E4E8F0; /*위쪽 테두리*/
border-bottom: 1px solid #E4E8F0; /*아래쪽 테두리*/
margin: 30px auto; /*바깥 여백*/
color: #2D2424; /*글씨 색*/
border-radius: 5px; /*테두리 둥글게*/
}
.article blockquote:before { /*배경에 있는 따옴표 먼저 불러들임*/
font-family: 'FontAwesome'; /*따옴표 글꼴*/
content: "\f10d"; /*따옴표*/
font-size: 50px; /*따옴표 크기*/
position: absolute; /*따옴표 위치*/
margin-left: -20px;
margin-top: -10px;
color: rgba(0, 0, 0, 0.1); /*따옴표 색깔*/
}
적용된 모습은 아래와 같다. 첫 번째 스타일은 자동으로 글꼴을 바탕꼴(Noto Serif KR)로 정한다.
배워 때에 맞추어 익히니 또한 기쁘지 아니한가! 뜻을 같이 하는 벗이 먼 곳에서 찾아오니 또한 즐겁지 아니한가! 남들이 알아주지 않아도 노여워하지 않으니 또한 군자가 아니겠는가?
학이편 1장
따라서 기본 글꼴로 보려면 두 번째 이후의 것을 택한다.
배워 때에 맞추어 익히니 또한 기쁘지 아니한가! 뜻을 같이 하는 벗이 먼 곳에서 찾아오니 또한 즐겁지 아니한가! 남들이 알아주지 않아도 노여워하지 않으니 또한 군자가 아니겠는가?
학이편 1장
스타일을 여러 가지로 쓰고 싶다면 스타일마다 다르게 정해주어야 한다.
#tt-body-page blockquote[data-ke-style='style1'] { /*style1을 위한 스타일*/ position: relative; margin: auto; box-sizing: border-box; padding: 34px 0!important; background: none!important; }
반응형
