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> 요소를 사용하는 경우 브라우저에서 왼쪽 및 오른쪽 여백을 추가합니다.
"Make it as simple as possible, but not simpler."
Albert Einstein
예시
<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 기호를 사용할 수 있습니다.
| 상징 | 암호 |
|---|---|
| ≪ | #8810 |
| ✂ | #9986 |
| ❝ | #10077 |
| ❞ | #10078 |
| ❠ | #10080 |
| ✔ | #10004 |
고통 그 자체가 사랑, 주 저장 시스템이다. 삶의 덩어리는 곰의 따뜻한 미소가 아닙니다. 항아리의 웃음 복잡한 것은 없습니다.
고통 그 자체가 사랑, 주 저장 시스템이다. 삶의 덩어리는 곰의 따뜻한 미소가 아닙니다. 항아리의 웃음 복잡한 것은 없습니다.
예시
<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 라이브러리의 아이콘을 사용할 수도 있습니다.
예시
<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>