인용문(blockquote) 스타일링

인용문(Blockquote) 스타일링 예제

다음은 인용문을 꾸미는 몇 가지 예제입니다.

style="white-space:pre-wrap;"
><blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</blockquote>

예제 1

blockquote {
  border: 1px solid #27a9e3;
  border-left: 10px solid #27a9e3;
  margin: 20px;
  padding: 20px;
}

class="codepen"
data-editable="true"
data-preview="true"
data-height="300"
data-theme-id="light"
data-default-tab="result"
data-user="LiveBlogger"
data-slug-hash="dyXMdXd"
style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="CSS styling blockquote 인용문 꾸미기 예제1"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

예제 2

blockquote:before {
  content: "\201C";
  color: #bcbcbc;
  float: left;
  font-size: 3em;
  font-family: Georgia;
  margin: -10px 10px 40px -10px;
}

class="codepen"
data-editable="true"
data-preview="true"
data-height="300"
data-theme-id="light"
data-default-tab="result"
data-user="LiveBlogger"
data-slug-hash="gOMrvMQ"
style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="CSS styling blockquote 인용문 꾸미기 예제2"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

예제 3

blockquote {
  background: url(//bit.ly/3sGEVx3) no-repeat;
  color: #bcbcbc;
  font-size: 1.5em;
  font-style: italic;
  padding: 24px 24px 24px 56px;
}

class="codepen"
data-editable="true"
data-preview="true"
data-height="380"
data-theme-id="light"
data-default-tab="result"
data-user="LiveBlogger"
data-slug-hash="LYRvNBe"
style="height: 380px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="CSS styling blockquote 인용문 꾸미기 예제3"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

인용문(blockquote) 스타일링

인용문(blockquote) 스타일링