인용과 리스트 CSS 코드로 블로그 글 시각화하기

인용과 리스트를 활용한 티스토리 블로그 글 스타일링

블로그 글을 더욱 풍부하고 구조적으로 만들고 싶으신가요? 그렇다면 인용(Quote)과 리스트(List) 스타일링을 적극 활용해보세요.

이 글에서는 티스토리 블로그에서 인용과 리스트를 효과적으로 활용하는 방법과 CSS로 스타일을 커스터마이징하는 예시를 소개합니다. SEO 관점에서도 글의 가독성과 신뢰도를 높이는 데 중요한 요소이니, 꼭 활용해 보세요.

인용과 리스트로 구조적이고 매력적인 글 만들기

인용과 리스트 꾸미기는 티스토리 블로그 글을 풍부하게 구성하고, 정보를 체계적으로 전달하는 데 매우 효과적입니다.

인용은 글의 신뢰성을 높이고 검증을 돕는 역할을 하며, 리스트는 독자가 내용을 단계별로 쉽게 이해할 수 있도록 구성합니다.

CSS를 활용해 인용과 리스트에 자신만의 스타일을 적용하면 시각적인 완성도까지 더할 수 있어, 글의 개성과 전달력을 모두 향상시킬 수 있습니다.

CSS로 인용과 리스트 스타일 꾸미기

• 인용(Quote) : 외부 자료나 출처를 명시해 글의 신뢰성을 높이고, 독자가 정보의 근거를 명확히 파악할 수 있도록 도와줍니다.
• 리스트(List) : 글의 내용을 정리하고 단계별로 구성해 독자의 이해도와 집중력을 높입니다.

또한, 리스트는 각 항목의 중요도에 따라 정보를 순차적으로 나열할 수 있어 글의 논리성과 명확성을 강화합니다. 인용과 리스트를 적절히 조합하면, 글 전체의 구조가 간결해지고 독자는 핵심 정보를 빠르게 파악할 수 있습니다.

아래에서는 티스토리에서 제공하는 기본 인용과 리스트 요소를 CSS를 통해 스타일링한 다양한 예시를 소개합니다.

인용 꾸미기 코드

1. 인용 스타일 1 (이미지 배경형)

인용 이미지를 사용한 기본적인 인용 스타일입니다.

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. 인용 스타일 2

왼쪽 테두리와 연한 배경색으로 강조한 스타일입니다.

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. 인용 스타일 3

연한 회색 배경과 테두리로 시각적인 구분 효과를 준 스타일입니다.

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;
}

리스트 꾸미기 코드

리스트 스타일 1

디스크 마커와 배경색, 테두리로 강조된 스타일입니다.

• 리스트 항목 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

원형 마커와 좌측 강조선, 말줄임 처리로 디자인한 스타일입니다.

• 리스트 항목 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

숫자 리스트 위에 "LIST" 라벨을 표시하고 배경/테두리 효과를 더한 스타일입니다.

1. 리스트 항목 3

#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 스타일링을 더한다면, 시각적인 매력은 물론 독자의 머무는 시간도 늘어나 SEO에도 긍정적인 영향을 줄 수 있습니다.