W3.CSS 카드

1 개요

W3.CSS Cards

W3.CSS 카드

2 예시: 기본

<link rel="stylesheet" href="//www.w3schools.com/lib/w3.css">

<div class="w3-container">
  <div class="w3-card-2">
    <p>w3-card-2</p>
  </div>
  <div class="w3-card-2 w3-yellow">
    <p>w3-card-2 w3-yellow</p>
  </div>
  <div class="w3-panel w3-card-2">
    <p>w3-panel w3-card-2</p>
  </div>
  <div class="w3-panel w3-card-2 w3-yellow">
    <p>w3-panel w3-card-2 w3-yellow</p>
  </div>  
  <div class="w3-panel w3-card-4">
    <p>w3-panel w3-card-4</p>
  </div>
  <div class="w3-panel w3-card-4 w3-yellow">
    <p>w3-panel w3-card-4 w3-yellow</p>
  </div>  
</div>

3 예시: 헤더, 푸터

<link rel="stylesheet" href="//www.w3schools.com/lib/w3.css">

<br>
<div class="w3-container">
  <div class="w3-card-4">
    <header class="w3-container w3-blue">
      <h1>Header</h1>
    </header>
    <div class="w3-container">
      <p>우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨 새로 스물여덟 자를 만드니 사람마다 하여금 쉽게 익혀 매일 쓰기에 편안하게 하고자 할 따름이다.</p>
    </div>
    <footer class="w3-container w3-blue">
      <h5>Footer</h5>
    </footer>
  </div>
</div>

4 예시: 그림 카드

<link rel="stylesheet" href="//www.w3schools.com/lib/w3.css">

<br>
<div class="w3-container">
  <div class="w3-card-4" style="width:92%;max-width:300px;">
    <img src="http://www.w3schools.com/w3css/img_avatar3.png" alt="Avatar" style="width:100%;opacity:0.85">
    <div class="w3-container">
      <h4><b>John</b></h4>
      <p>Architect and engineer</p>
    </div>
  </div>
</div>
<br>
<br>

5 같이 보기

• W3.CSS 패널
• W3.CSS

6 참고

• http://www.w3schools.com/w3css/w3css_cards.asp