인용 서식 꾸미기

인용문을 예쁘게 꾸미면 블로그 스킨도 덩달아 예뻐진다. 검색해 보니 보기 좋은 인용이 참 많다. 그 가운데 하나를 골라 고쳐 보았다. 

번지가 앎에 관해 여쭈었다. 공자께서 말씀하셨다. "백성의 마땅한 바를 힘쓰고 귀신을 공경하되 멀리하면 안다고 말할 수 있다." 번지가 또 인에 관하여 여쭈었다. "인한 사람은 항상 어려운 큰일을 먼저 도모하고 자신을 위하여 얻는 일은 뒤로 한다. 그리하면 가히 인하다 말할 수 있다."

—논어
옹야편 20장

/* HTML */

<div class="quote-wrapper">
<div class="quote">
<h1>번지가 앎에 관해 여쭈었다. 공자께서 말씀하셨다. "백성의 마땅한 바를 힘쓰고 귀신을 공경하되 멀리하면 안다고 말할 수 있다." 번지가 또 인에 관하여 여쭈었다. "인한 사람은 항상 어려운 큰일을 먼저 도모하고 자신을 위하여 얻는 일은 뒤로 한다. 그리하면 가히 인하다 말할 수 있다."</h1>

<h4 data-ke-size="size20">&mdash;논어<br /><i>옹야편 20장</i></h4>

/*CSS */

/* center the blockquote in the page */
.quote-wrapper {
display: flex;
height: 100vh; /*세로 높이 100%*/
padding: 0 20px;
}
/* Blockquote main style*/

.quote {
position: relative;
font-family: 'SangSangRock', 'Noto Sans KR', sans-serif;
max-width: 650px;
margin: 40px auto;
align-self: center;
}

/* Blockquote header */
.quote h1 {
position: relative; /* for pseudos */
color: #666;
font-size: 1.2rem;
font-weight: normal;
line-height: 1.75;
margin: 0; border: 2px solid #fff;
border: solid 2px;
border-radius:20px;
padding: 40px;
}

/* Blockquote right double quotes */

.quote h1:after {
content:"";
position: absolute;
border: 2px solid #666;
border-radius: 0 50px 0 0;
width: 60px;
height: 60px;
bottom: -62px;
left: 50px;
border-bottom: none;
border-left: none;
z-index: 3;
}

.quote h1:before {
content:"";
position: absolute;
width: 80px;
border: 6px solid #fff;
bottom: -3px;
left: 50px;
z-index: 2;
}


/* Blockquote subheader */

.quote h4 {
position: relative;
color: #e74848;
font-size: 1.0em;
font-weight: 400;
line-height: 1.2;
margin: 0;
padding-top: 15px;
z-index: 1;
margin-left:150px;
padding-left:12px;
}

.quote h4:first-letter {
margin-left:-12px;
}

원본은 아래와 같다.

See the Pen Quote: Jared Spool • Web Site Usability: A Designer's Guide by Juan Pablo (@jupago) on CodePen.

https://devsnap.me/css-quote-styles 

40+ Beautiful CSS Blockquotes (Free Code + Demos)