w3.css

인용문

인용문 표시

w3-panel 클래스는 인용문을 표시하는 데 완벽한 클래스다.

인용문은 회색 배경, 왼쪽 테두리 막대 및 기울임꼴 글꼴 스타일로 표시되는 경우가 많다.

예제

<div class="w3-panel w3-leftbar w3-light-grey">
  <p class="w3-xlarge w3-serif">
  <i>"Make it as simple as possible, but not simpler."</i></p>
  <p>Albert Einstein</p>
</div>

큰 따옴표

큰 따옴표 인용문은 인터넷에서 자주 사용된다.

예제

<div class="w3-panel w3-leftbar w3-sand">
  <p class="w3-xxlarge w3-serif">
  <i>"Make it as simple as possible, but not simpler."</i></p>
  <p>Albert Einstein</p>
</div>

인용부호

표준 HTML <blockquote> 요소를 사용하는 경우 브라우저가 왼쪽 및 오른쪽 여백을 추가한다는 점에 유의하자.

“최대한 단순하게 만드세요. 하지만 단순하게 만들지 마세요.”

알베르트 아인슈타인

예제

<blockquote class="w3-panel w3-leftbar w3-light-grey">
  <p class="w3-large">
  <i>"Make it as simple as possible, but not simpler."</i></p>
  <p>Albert Einstein</p>
</blockquote>

HTML 기호 사용

앰퍼샌드 대신 표준 HTML 기호를 사용할 수 있다.

예제

<div class="w3-panel w3-light-grey">
  <span style="font-size:150px;line-height:0.6em;opacity:0.2">❝</span>
  <p class="w3-xlarge" style="margin-top:-40px">
  <i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit ..."</i></p>
  <p>Albert Einstein</p>
</div>

예제

<div class="w3-panel w3-center w3-leftbar w3-sand">
  <p><i class="w3-serif w3-xlarge">
  <span style="font-size:150px;line-height:0.6em;opacity:0.2">✔</span>
  Programming in C will slowly decline.<br>
  Programming in JavaScript will be more important.</i></p>
</div>

Font Awesome 아이콘 사용

Font Awesome 라이브러리의 아이콘을 사용할 수도 있다.

예제

<div class="w3-panel w3-leftbar">
  <p><i class="fa fa-quote-right w3-xxlarge"></i><br>
  <i class="w3-serif w3-xlarge">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i></p>
</div>

색상과 불투명도를 변경할 수도 있다.

예제

<div class="w3-panel w3-sand w3-leftbar">
  <p><i class="fa fa-quote-right w3-xxlarge w3-opacity"></i>
  <span class="w3-serif w3-xlarge">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</span></p>
</div>

검은색 인용문

예제

<div class="w3-panel w3-black">
  <p class="w3-large w3-serif">
  <i class="fa fa-quote-right w3-xxlarge w3-margin-right"></i>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
</div>

카드로 표시

예제

<div class="w3-panel w3-card-4 w3-light-grey" style="width:50%">
  <p class=" w3-large w3-serif">
  <i class="fa fa-quote-right w3-xxlarge w3-text-red"></i><br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
</div>

예제

<div class="w3-panel w3-card-4 w3-center" style="width:50%">
  <span style="font-size:100px">❝</span><br>
  <p style="margin-top:-60px">
  <i><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</b></i></p>
</div>

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기