여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. w3.css - 인용문
w3.css – 인용문
3개월전 작성
4개월전 수정

w3.css

인용문

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mata vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.

인용문 표시

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 기호를 사용할 수 있다.

Symbol Code
#8810
#9986
#10077
#10078
#10080
#10004

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper.
Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper.
Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.

예제
<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>

 



Programming in C will slowly decline.
Programming in JavaScript will be more important.

예제
<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 라이브러리의 아이콘을 사용할 수도 있다.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mata vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.

예제
<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>

 

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


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mata vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.

예제
<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>

 

검은색 인용문


Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut non mata vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.

예제
<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>

카드로 표시



Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut non mata vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.

예제
<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>

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mata vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.

예제
<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
밍구
공부 목적 블로그