티스토리 북클럽 인용구 스타일 2 꾸미기: 더욱 세련되고 눈에 띄게!

티스토리 북클럽 스킨을 사용하시는 분들이라면 기본으로 제공되는 인용구 스타일 외에 조금 더 개성 있고 세련된 스타일을 적용하고 싶으실 수 있습니다. 특히 인용구 스타일 2는 깔끔하면서도 포인트를 줄 수 있는 많이 쓰는 인용구입니다.

css를 활용하여 색상, 테두리, 배경, 등을 변경하고 나아가 아이콘을 추가하여 시각적인 효과를 극대화하는 방법, 블로그 글의 가독성을 높이고 독자들의 눈길을 사로잡는 인용구를 만들어 보세요!

기본적인 css 구조 이해하기

티스토리 북클럽 스킨에서 인용구 스타일은 일반적으로 다음과 같은 HTML 구조와 CSS 클래스를 가집니다. 'style2' 수정해서 꾸미는 방법을 알아보겠습니다.

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

이 HTML 구조를 바탕으로 CSS를 사용하여 다양한 스타일을 적용할 수 있습니다. 티스토리 관리 페이지의 [꾸미기] > [스킨 편집] > [CSS] 탭에서 아래 설명드릴 CSS 코드를 추가하거나 수정하여 인용구 스타일을 변경할 수 있습니다.

1. 인용구 스타일 꾸미기

인용구의 텍스트 색상, 배경색, 테두리 색상 등을 변경하여 블로그 디자인과의 조화를 이루거나 강조 효과를 줄 수 있습니다.

CSS 텍스트 / 테두리 꾸미기 예시 :

#article-view blockquote[data-ke-style='style2'] {
  border-color: #279473;    /* 테두리 색상: 밝은 청록색 */
  border-width: 0 0 0 10px; /* 테두리 두께: 위, 아래, 오른쪽은 0, 왼쪽은 10px */
  border-style: solid;      /* 테두리 스타일: 실선*/
  /*(solid실선, dashed 점선, dotted점, dotted두줄) */
  padding: 10px 20px;      /* 안쪽 여백: 위/아래 10px, 좌/우 20px */
  color: #279473;          /* 글자 색상: 밝은 청록색 */
  line-height: 1.75;       /* 줄 간격: 1.75배 */
  font-size: 0.875em; /* 글자 크기: 기본 크기의 0.875배 (em, px 등 단위 사용) */
  text-align: center; /* 글자 정렬: 가운데(left 왼쪽, right오른쪽, center가운데) */
  font-weight: bold; /* 글자 굵기: 굵게 (bold, normal, lighter)*/
  border-bottom: 1px solid #279473; /* 아래 테두리: 1px 실선, 밝은 청록색 */
  border-right: 10px solid #279473; /* 오른쪽 테두리: 10px 실선, 밝은 청록색 */
  border-top: 1px solid #279473; /* 위 테두리: 1px 실선, 밝은 청록색 */
  border-left: 1px solid #279473; /* 왼쪽 테두리: 1px 실선, 밝은 청록색 */
}

위 코드를 조합해서 아래 인용구처럼 사용하시면 원하는 스타일로 인용구를 사용하게 깔끔하게 수정하실 수 있습니다. 예를 들어 왼쪽 테두리와 밑줄이 있는 인용문으로 수정한다면 다음고 같이 수정할 수 있습니다. 아래 코드와 수정전과 수정 후 이미지와 수정할 부분입니다.

밑줄을 추가하고 내부 여백과 텍스트 색상과 테두리 색상을 수정한 예입니다.

밑줄 추가한 후 테두리 스타일만 수정하였습니다.

다음은 양쪽 테두리와 밑줄 글자는 중앙으로 수정하였습니다.

text-align 속성의 다른 값들

text-align 속성은 left 외에도 다음과 같은 값들을 가질 수 있습니다.
right: 텍스트를 오른쪽으로 정렬합니다.
center: 텍스트를 가운데로 정렬합니다.
justify: 텍스트를 양쪽으로 정렬합니다. 단어 사이의 간격을 조정하여 왼쪽과 오른쪽 가장자리를 모두 채웁니다. 마지막 줄은 일반적으로 왼쪽 정렬됩니다.
start: 텍스트를 요소의 시작 방향으로 정렬합니다. 왼쪽에서 오른쪽으로 읽는 언어(예: 한국어, 영어)에서는 left와 동일하게 동작하고, 오른쪽에서 왼쪽으로 읽는 언어(예: 아랍어, 히브리어)에서는 right와 동일하게 동작합니다.
end: 텍스트를 요소의 끝 방향으로 정렬합니다. 왼쪽에서 오른쪽으로 읽는 언어에서는 right와 동일하게 동작하고, 오른쪽에서 왼쪽으로 읽는 언어에서는 left와 동일하게 동작합니다.

border-style 속성

이 속성은 요소의 테두리 모양을 결정합니다. 테두리는 요소 주변에 그려지는 선으로, 시각적으로 요소를 강조하거나 구분하는 데 사용됩니다.
border-style 속성은 단독으로 사용될 수도 있지만, 일반적으로 border-width (테두리 두께) 및 border-color (테두리 색상) 속성과 함께 사용하여 완전한 테두리 스타일을 정의합니다.

solid 값:

solid는 border-style 속성의 값 중 하나로, 끊어지지 않는 하나의 실선으로 테두리를 표시합니다. 이는 가장 일반적이고 기본적인 테두리 스타일입니다.

주석 부분 설명:

/* 테두리 스타일: 실선*/ 은 CSS 주석으로, 코드에 대한 설명을 제공합니다. 브라우저는 이 부분을 무시하고 스타일 적용에 영향을 주지 않습니다.
/*(solid실선, dashed 점선, dotted점, dotted두줄) */ 이 부분 역시 주석이며, border-style 속성에 사용할 수 있는 다른 주요 값들을 간략하게 설명하고 있습니다.

border-style 속성의 주요 값:

주석에서 언급된 값들을 포함하여 border-style 속성에 사용할 수 있는 몇 가지 주요 값들은 다음과 같습니다.

solid: 일반적인 실선 테두리를 표시합니다.
dashed: 점선 테두리를 표시합니다. 각 선분 사이에는 간격이 있습니다.
dotted: 점으로 이루어진 테두리를 표시합니다.
double: 두 줄의 실선 테두리를 표시합니다. 두 선 사이에는 약간의 간격이 있습니다.
groove: 3D 효과의 움푹 들어간 테두리를 표시합니다. 테두리의 바깥쪽이 더 어둡게, 안쪽이 더 밝게 표현됩니다.
ridge: groove와 반대로 3D 효과의 튀어나온 테두리를 표시합니다. 테두리의 바깥쪽이 더 밝게, 안쪽이 더 어둡게 표현됩니다.
inset: 요소 전체가 움푹 들어간 효과를 줍니다. 주로 입력 필드나 버튼 등에 사용됩니다.
outset: inset과 반대로 요소 전체가 튀어나온 효과를 줍니다.
none: 테두리를 표시하지 않습니다. border-width나 border-color를 설정해도 border-style이 none이면 테두리가 보이지 않습니다.
hidden: none과 유사하게 테두리를 숨깁니다. 테이블 테두리 충돌 시 우선순위가 다를 수 있습니다.