티스토리 블로그 가독성 높이기: 인용구와 리스트 CSS로 예쁘게 꾸미는 꿀팁

티스토리 블로그를 운영하다 보면 글을 어떻게 더 깔끔하고 읽기 좋게 만들 수 있을지 고민하게 되죠. 오늘은 인용구(Quote)와 리스트(List)를 활용해서 가독성도 챙기고 검색 엔진(SEO) 점수도 올리는 방법을 알려드릴게요. CSS 코드를 조금만 수정해도 블로그 글의 분위기가 확 달라지고 독자들이 글에 더 집중하게 만들 수 있답니다.

인용구와 리스트, 왜 중요할까요?

독자들에게 정보를 더 체계적으로 전달하고 싶다면 인용구와 리스트는 정말 중요한 요소예요. 인용구는 외부 자료나 전문가의 의견을 가져올 때 사용하면 글의 신뢰도를 높여주는 역할을 해요. 리스트는 복잡한 내용을 순서대로 정리해서 독자가 핵심 내용을 한눈에 파악할 수 있게 도와주죠.

이 두 가지를 잘 활용하는 건 단순히 글을 예쁘게 꾸미는 것을 넘어서요. 독자가 페이지에 머무는 시간을 늘려주고 정보를 확실하게 전달하기 때문에, 결과적으로 티스토리 블로그의 검색 순위에도 긍정적인 영향을 미친답니다.

SEO 관점에서 본 확실한 장점

인용구와 리스트 꾸미기는 디자인뿐만 아니라 검색 엔진 최적화(SEO) 측면에서도 꽤 큰 이득이 있어요.

글이 술술 읽혀요: 검색 엔진은 사용자가 읽기 편한 글을 좋아해요. 리스트로 내용을 나누면 훑어보기 좋고, 인용구로 포인트를 주면 지루하지 않게 끝까지 읽을 수 있죠.
핵심 내용이 돋보여요: 중요한 키워드나 주장을 시각적으로 딱 구분해 주니까, 검색 로봇이 “아, 이 글의 주제는 이거구나”라고 더 쉽게 이해할 수 있어요.
검색 결과에 더 잘 나와요: 특히 순서가 있는 리스트(ol)를 잘 쓰면 구글 검색 결과에서 목록 형태로 보여주는 ‘스니펫’에 노출될 확률이 높아져서 클릭을 더 많이 받을 수 있어요.

CSS를 이용해서 나만의 스타일을 입히면 시각적인 완성도까지 올라가니, 글의 매력과 전달력을 동시에 잡을 수 있겠죠? 아래에서 소개할 코드를 활용해 내 블로그를 한 단계 업그레이드해 보세요.

인용구(Quote) 스타일링 예시

인용구는 글의 근거를 제시하거나 분위기를 환기할 때 참 유용해요. 티스토리 ‘스킨 편집’의 CSS 탭에 아래 코드를 추가해서 사용해 보세요.

1. 깔끔한 배경 이미지 스타일

첫 번째는 인용구 이미지를 배경으로 넣어서 깔끔하게 연출하는 방식이에요. 가운데 정렬이라 시선이 모이는 효과가 있어요.

#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: none;
}

실제로 적용하면 아래처럼 보여요. 출처를 밝힐 때 쓰면 신뢰감이 쑥 올라간답니다.

정보의 출처를 명확히 밝히면 글의 신뢰도가 훨씬 높아집니다.

2. 왼쪽 테두리로 강조하는 스타일

왼쪽에 굵은 선을 넣고 배경색을 연하게 깔아서 중요한 메시지임을 강조하는 스타일이에요. 모바일에서 봐도 가독성이 좋아서 자주 쓰는 방식이랍니다.

#article-view blockquote[data-ke-style=style2] {
border-left: 0.5rem solid #cb0000;
padding: 1rem 1.5rem;
color: #4d0000;
background-color: #ffe6e6;
line-height: 1.75;
font-size: 1em;
text-align: left;
margin: 1rem 0;
}

이렇게 적용돼요. 강조하고 싶은 문장이 있다면 이 스타일을 활용해 보세요.

왼쪽 테두리와 은은한 배경색으로 독자의 시선을 사로잡을 수 있어요.

3. 박스 형태로 구분하는 스타일

연한 회색 배경과 테두리를 둘러서 본문과 내용을 확실하게 구분하고 싶을 때 쓰면 좋은 스타일이에요.

#article-view blockquote[data-ke-style=style3] {
border: 1px solid #661c1c;
background: #fcfcfc;
text-align: left;
padding: 21px 25px 20px 25px;
color: #666;
line-height: 1.75;
margin: 1rem 0;
}

적용 예시예요. 본문 흐름을 끊지 않으면서도 참고 내용을 넣기에 딱 좋죠.

박스 형태로 디자인되어 본문과 시각적으로 명확하게 분리되는 효과가 있습니다.

리스트(List) 스타일링 예시

글이 길어질 때 리스트를 쓰면 독자의 피로도를 확 낮출 수 있어요. 그냥 점이나 숫자로만 표시하는 것보다 훨씬 보기 좋은 스타일들을 소개할게요.

1. 배경과 테두리로 박스 만들기

리스트 전체에 배경색과 테두리를 줘서 하나의 정보 덩어리처럼 보이게 하는 방법이에요. 중요한 요약 정보를 담을 때 유용해요.

#tt-body-page ul[data-ke-list-type=disc] {
position: relative;
width: fit-content;
border: 1px solid #222;
padding: 10px 20px 10px 15px;
background-color: #eaf1ff;
list-style-type: disc;
margin-left: 15px;
line-height: 1.7;
}

이렇게 적용하면 리스트 자체가 하나의 박스처럼 보여서 주목도가 높아져요.

중요한 내용을 박스 안에 담아 시각적으로 강조해 보세요.

2. 동그라미 마커와 말줄임 효과

항목마다 왼쪽에 동그라미 마커와 선을 넣고, 내용이 길어지면 깔끔하게 말줄임표(…)로 처리해 주는 세련된 스타일이에요.

#tt-body-page ul[data-ke-list-type=circle] li {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 1em;
line-height: 1.5;
padding: 0.5rem 1.5rem;
border-left: 0.5rem solid #666;
background-color: #eeebeb;
color: #4d0000;
}

긴 문장도 지저분하지 않고 깔끔하게 정리된 느낌을 줄 수 있어요.

항목별 구분이 명확하고 긴 내용도 깔끔하게 보여주는 디자인이에요.

3. 라벨이 붙은 번호 리스트

순서가 있는 리스트(ol) 위에 “LIST”라는 라벨을 붙여서 마치 잡지의 한 부분처럼 보이게 만드는 팁이에요. 단계별 방법를 작성할 때 정말 잘 어울려요.

#tt-body-page ol:before {
content: "LIST";
display: block;
width: 120px;
background-color: #fff;
text-align: center;
font-size: 18px;
font-weight: 700;
margin: -60px auto 10px;
padding: 10px 0;
border: 1px solid #dadada;
box-shadow: -7px 6px 11px rgba(0, 0, 0, .8);
}

단순한 번호 목록이 훨씬 전문적으로 보이죠? (참고: 이 스타일은 CSS 탭에 추가해야 제대로 보여요)

단계별 설명이나 순서를 나타낼 때 아주 적합한 디자인입니다.

작은 차이가 블로그를 바꿉니다

인용구와 리스트를 적재적소에 사용하는 것만으로도 글이 훨씬 체계적으로 변해요. 여기에 오늘 알려드린 CSS 스타일링까지 더한다면, 보기에도 좋고 검색 엔진도 좋아하는 매력적인 블로그가 될 거예요. 어렵게 생각하지 말고 하나씩 적용해 보면서 내 블로그의 완성도를 높여보세요.