인용문
명언, 인용, 시/운문 - 텍스트에 깊이를 더하는 CSS
/* class="quote" 지정 필요 */
.quote {
padding: 0.8em 1em; /* 안쪽 여백 */
border-left: 3px solid #BDC3C7; /* 왼쪽 선 — 3px=두께, #색상 */
color: #555555; /* 글자 색상 */
font-style: italic; /* 기울임체 */
line-height: 1.8em; /* 줄 간격 */
margin: 1.5em 1em; /* 바깥 여백 */
}<div class="quote">
<p>"진정한 용기란 두려움이 없는 것이 아니라, 두려움보다 더 중요한 것이 있다고 판단하는 것이다."</p>
</div>border-left: 3px solid #BDC3C7 — 왼쪽에 세로선을 넣어 인용문임을 표시합니다.
font-style: italic — 기울임체. 인용문을 본문과 구분하는 가장 기본적인 방법입니다.
class 기반이라 같은 책 안에서 .quote-poem, .quote-dialogue 등 변형을 만들기도 쉽습니다.
/* class="quote-bg" 지정 필요 */
.quote-bg {
padding: 1em 1.2em;
background-color: #F8F6F3; /* 배경색 — 연한 베이지 */
border-left: 4px solid #D4883A; /* 왼쪽 선 — 4px=두께, #색상 */
color: #555555;
font-style: italic; /* 기울임체 */
line-height: 1.8em;
margin: 1.5em 0;
}<div class="quote-bg">
<p>"변화는 한순간에 일어나지 않는다. 매일의 작은 선택들이 모여 만들어진다."</p>
</div>기본 인용문에 배경색을 추가한 버전입니다. 더 눈에 띄는 인용 블록이 됩니다.
background-color: #F8F6F3 — 연한 베이지 배경이 따뜻한 느낌을 줍니다.
왼쪽 선 색상과 배경색 조합을 바꾸면 전혀 다른 분위기가 됩니다.
/* class="quote-marks" 지정 필요 */
.quote-marks {
position: relative;
padding: 1em 1.5em 1em 2.5em; /* 왼쪽 여백 넓게 (따옴표 공간) */
color: #555555;
font-style: italic;
line-height: 1.8em;
margin: 1.5em 1em;
}
.quote-marks::before {
content: "\201C"; /* 큰 따옴표 — \201C = “ */
position: absolute;
left: 0; top: -0.2em;
font-size: 3em; /* 따옴표 크기 — 숫자↑ 커짐 */
color: #DDDDDD; /* 따옴표 색상 */
line-height: 1;
}<div class="quote-marks">
<p>"하루를 시작할 때, 오늘이 마지막 날이라면 어떻게 보낼지 생각해보라."</p>
</div>큰 따옴표 장식이 인용문 왼쪽에 크게 나타납니다.
::before로 가짜 요소를 만들어 장식용 따옴표를 넣습니다.
\201C는 유니코드 왼쪽 큰따옴표(“)입니다.
/* class="quote-simple" 지정 필요 */
.quote-simple {
padding: 0.5em 2em; /* 좌우 넓은 여백 */
color: #777777; /* 연한 글자색 */
font-style: italic; /* 기울임체 */
line-height: 1.8em;
margin: 1.5em 0;
}<div class="quote-simple">
<p>"삶이 있는 한, 희망은 있다."</p>
</div>테두리나 배경 없이 이탤릭체와 여백만으로 인용문을 표현합니다.
가장 간결한 인용 스타일입니다. 본문 흐름을 크게 방해하지 않으면서도 인용임을 알 수 있어요.
좌우 넓은 여백(padding: 0.5em 2em)이 인용문을 본문과 구분해줍니다.
/* class="quote-center" 지정 필요 */
.quote-center {
padding: 1em 2em;
text-align: center; /* 가운데 정렬 */
color: #555555;
font-style: italic;
line-height: 1.8em;
margin: 1.5em 0;
}<div class="quote-center">
<p>"모든 위대한 여정은 한 걸음에서 시작된다."</p>
</div>가운데 정렬 인용문입니다. 짧은 명언이나 격언에 잘 어울립니다.
긴 문장보다는 1~2줄 짧은 인용에 효과적입니다.
/* class="quote-border" 지정 필요 */
.quote-border {
padding: 1em 1.5em;
border: 1px solid #DDD; /* 전체 테두리 */
border-radius: 0.3em; /* 둥근 모서리 */
color: #555555;
font-style: italic;
line-height: 1.8em;
margin: 1.5em 0;
text-align: center;
}<div class="quote-border">
<p>"행복은 목적지가 아니라 여행하는 방법이다."</p>
</div>사방에 테두리가 있는 인용문 박스입니다.
왼쪽 선만 있는 기본형보다 더 독립된 블록 느낌을 줍니다.
둥근 모서리(border-radius: 0.3em)가 부드러운 인상을 줍니다.
/* class="quote-source" + class="source" 지정 필요 */
.quote-source {
padding: 0.8em 1.2em;
border-left: 3px solid #2FA599;
color: #555555;
font-style: italic;
line-height: 1.8em;
margin: 1.5em 1em;
}
.quote-source .source {
display: block;
text-align: right;
font-style: normal; /* 출처는 기울임 해제 */
font-size: 0.85em;
color: #999999;
margin-top: 0.5em;
}<div class="quote-source">
<p>"가장 큰 영광은 한 번도 실패하지 않음이 아니라, 실패할 때마다 다시 일어서는 데 있다."</p>
<span class="source">- 공자</span>
</div>인용문 아래에 출처(저자)를 표시합니다.
.source 클래스로 출처만 오른쪽 정렬 + 작은 글씨 + 기울임 해제합니다.
명언집, 서평, 에세이 등에서 자주 사용하는 패턴입니다.
/* class="quote-highlight" 지정 필요 */
.quote-highlight {
padding: 1em 1.5em;
text-align: center;
color: #333333;
font-size: 1.3em; /* 큰 글씨 — 숫자↑ 커짐 */
font-style: italic;
line-height: 1.6em;
margin: 2em 1em;
border-top: 1px solid #DDD; /* 위 선 */
border-bottom: 1px solid #DDD; /* 아래 선 */
}<div class="quote-highlight">
<p>"당신의 이야기가 누군가의 희망이 됩니다."</p>
</div>Pull quote 스타일입니다. 핵심 메시지를 크게 강조할 때 사용합니다.
font-size: 1.3em — 본문보다 30% 큰 글씨로 시선을 끕니다.
위아래 가로선이 인용 영역을 명확히 구분합니다. 챕터 시작이나 핵심 문장에 적합합니다.
/* class="quote-double" 지정 필요 */
.quote-double {
padding: 0.8em 1em 0.8em 1.5em;
border-left: 6px double #BDC3C7; /* 이중선 — double=이중 */
color: #555555;
font-style: italic;
line-height: 1.8em;
margin: 1.5em 1em;
}<div class="quote-double">
<p>"진정한 변화는 불편함 속에서 시작된다."</p>
</div>border-left: 6px double — 이중선(=)으로 왼쪽 선을 표시합니다.
기본 실선(solid)보다 격식 있는 느낌입니다. 두께를 6px 이상으로 해야 이중선이 잘 보입니다.
solid= 실선 (─)double= 이중선 (═)dashed= 대시선 (- -)dotted= 점선 (. .)
/* class="poem" 지정 필요 */
.poem {
padding: 1em 2em;
font-style: italic; /* 기울임체 */
line-height: 2.2em; /* 줄 간격 — 넓게 */
color: #555555;
text-align: center; /* 가운데 정렬 */
margin: 2em 0;
}
.poem p {
margin: 0;
}<div class="poem">
<p>봄이 오면</p>
<p>산에 들에 진달래 피고</p>
<p>나는 당신을 생각합니다</p>
</div>시, 가사, 운문 등 문학적 텍스트를 위한 포맷입니다.
line-height: 2.2em — 일반 본문(1.8em)보다 줄 간격을 넓혀 여유로운 느낌을 줍니다.
text-align: center — 시는 가운데 정렬이 일반적입니다.
각 행을 별도 <p> 태그로 넣으면 행 간격을 CSS로 조절할 수 있습니다.
/* class="poem-left" 지정 필요 */
.poem-left {
padding: 1em 1.5em 1em 3em; /* 왼쪽 넓은 여백 */
font-style: italic;
line-height: 2.2em;
color: #555555;
margin: 2em 0;
}
.poem-left p {
margin: 0;
}<div class="poem-left">
<p>나 보기가 역겨워</p>
<p>가실 때에는</p>
<p>말없이 고이 보내 드리우리다</p>
</div>왼쪽 정렬 시/운문입니다. 한국 시 형식에 더 자연스럽습니다.
padding-left: 3em — 왼쪽 들여쓰기로 본문과 구분합니다.
가운데 정렬이 부담스러울 때 사용하세요. 긴 시에 특히 적합합니다.
/* class="poem-border" 지정 필요 */
.poem-border {
padding: 1.5em 2em;
border-top: 1px solid #CCC; /* 위 선 */
border-bottom: 1px solid #CCC; /* 아래 선 */
font-style: italic;
line-height: 2.2em;
color: #555555;
text-align: center;
margin: 2em 1em;
}
.poem-border p {
margin: 0;
}<div class="poem-border">
<p>풀이 눕는다</p>
<p>비를 몰아오는 동풍에</p>
<p>풀은 눕고</p>
<p>드디어 울었다</p>
</div>위아래 가로선으로 시의 영역을 구분합니다.
본문 사이에 시가 삽입될 때, 시작과 끝을 명확히 표시해줍니다.
시집보다는 에세이나 자기계발서에 시를 인용할 때 적합합니다.
/* class="dialogue" + class="speaker" 지정 필요 */
.dialogue {
margin: 1.5em 0;
line-height: 1.8em;
color: #333333;
}
.dialogue p {
margin: 0.4em 0;
padding-left: 1em; /* 대사 들여쓰기 */
text-indent: -1em; /* 첫줄 내어쓰기 (이름 정렬) */
}
.speaker {
font-weight: bold;
color: #1A5C54; /* 화자 이름 색상 */
}<div class="dialogue">
<p><span class="speaker">민수:</span> "오늘 뭔가 달라진 것 같지 않아?"</p>
<p><span class="speaker">지은:</span> "글쎄, 하늘이 좀 더 맑아 보여."</p>
<p><span class="speaker">민수:</span> "그것도 있지만, 나 자신이 달라진 것 같아."</p>
</div>소설이나 에세이에서 대화문을 정돈되게 표시합니다.
text-indent: -1em + padding-left: 1em — 내어쓰기(hanging indent)로 이름 정렬이 깔끔해집니다.
.speaker 클래스로 화자 이름만 따로 색상, 굵기를 줄 수 있습니다.
화자별로 다른 색상을 쓰면 누가 말하는지 빠르게 구분됩니다.