w3.css
머티리얼 디자인
머티리얼 디자인은 2014년 Google에서 디자인했으며 이후 많은 Google 애플리케이션에 채택되었다.
머티리얼 디자인은 종이와 잉크를 연상시키는 요소를 사용한다.
또한 요소에는 사실적인 그림자와 호버 효과가 있다.
예제
<!DOCTYPE html> <html lang="en"> <title>W3.CSS Case</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <h1>My first W3.CSS website!</h1> <p>This site will grow as we add more ...</p> <p>This is another paragraph.</p> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
기본 예시
예제 보기W3.CSS를 사용한 머티리얼 디자인 룩
W3.CSS는 “머티리얼 디자인” 모양으로 애플리케이션을 디자인하기 위한 완벽한 스타일시트다.
예제
<div class="w3-border" style="background-color:#dfe5e8;padding-bottom:32px;min-width:400px"> <div class="w3-bar w3-large w3-text-white w3-opacity" style="background-color:#303e45"> <a href="javascript:void(0)" class="w3-bar-item w3-button "><i class="fa fa-home"></i></a> <span class="w3-bar-item"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">다운로드</font></font></span> <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right"><i class="fa fa-search"></i></a> </div> <div class="w3-container w3-content" style="max-width:600px;min-width:400px"> <p class="w3-opacity"><b><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">오늘</font></font></b></p> <div class="w3-panel w3-white w3-card-4" style="padding-right:0"> <span class="w3-right w3-padding w3-opacity w3-hover-red"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">X</font></font></span> <p class="w3-text-blue"><b><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">email.zip</font></font></b></p> <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">https://www.w3schools.com/lib/email.zip</font></font></p> <p class="w3-text-blue"><a href="javascript:void(0)"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">폴더에 표시</font></font></a></p> </div> <p class="w3-opacity"><b><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">어제</font></font></b></p> <div class="w3-panel w3-white w3-card-4" style="padding-right:0"> <span class="w3-right w3-padding w3-opacity w3-hover-red"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">X</font></font></span> <p class="w3-text-blue"><b><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">email.zip</font></font></b></p> <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">https://www.w3schools.com/lib/email.zip</font></font></p> <p class="w3-text-blue"><a href="javascript:void(0)"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">폴더에 표시</font></font></a></p> </div> <div class="w3-panel w3-white w3-card-4" style="padding-right:0"> <span class="w3-right w3-padding w3-opacity w3-hover-red"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">X</font></font></span> <p class="w3-text-blue"><b><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">email.zip</font></font></b></p> <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">https://www.w3schools.com/lib/email.zip</font></font></p> <p class="w3-text-blue"><a href="javascript:void(0)"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">폴더에 표시</font></font></a></p> </div> </div> </div>
기본 예시
예제 보기머티리얼 디자인 룩(색상 테마)
Places to Visit
Cinque Terre
The Cinque Terre (five lands) is a portion of the Italian Riviera. The coastline with five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggioreis a UNESCO World Heritage Site.
Monterosso
Monterosso al Mare is located at the center of a small natural gulf, protected by a small artificial reef,in the Riviera of La Spezia. It is the northernmost village of the Cinque Terre.
Vernazza
Vernazza is another of the five towns in the region. Vernazza is the fourth town heading north. It has no car traffic, and is one of the truest”fishing villages” on the Italian Riviera.
Europe Italy
예제
<div class="w3-row w3-padding w3-theme-d2 w3-xlarge">
<div class="w3-quarter">
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-bars"></i></a>
</div>
</div>
<div class="w3-half">
<input type="text" class="w3-amber w3-border-0 w3-padding" style="width:100%">
</div>
<div class="w3-quarter">
<div class="w3-bar w3-xlarge">
<a href="#" class="w3-bar-item w3-button w3-left"><i class="fa fa-search"></i></a>
<a href="#" class="w3-bar-item w3-button w3-right"><img class="w3-hide-small w3-circle" src="img_avtar.jpg" style="height:40px;"></a>
</div>
</div>
</div>
<div class="w3-container w3-padding-32 w3-theme-d1">
<h1>Places to Visit</h1>
</div>
<div class="w3-row-padding w3-theme">
<div class="w3-third w3-section">
<div class="w3-card-4">
<img src="img_5terre.jpg" style="width:100%">
<div class="w3-container w3-white">
<h4>Cinque Terre</h4>
<p>The Cinque Terre (five lands) is a portion of the Italian Riviera. The coastline with five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore
is a UNESCO World Heritage Site.</p>
</div>
</div>
</div>
<div class="w3-third w3-section">
<div class="w3-card-4">
<img src="img_monterosso.jpg" style="width:100%">
<div class="w3-container w3-white">
<h4>Monterosso</h4>
<p>Monterosso al Mare is located at the center of a small natural gulf, protected by a small artificial reef,
in the Riviera of La Spezia. It is the northernmost village of the Cinque Terre.</p>
</div>
</div>
</div>
<div class="w3-third w3-section">
<div class="w3-card-4">
<img src="img_vernazza.jpg" style="width:100%">
<div class="w3-container w3-white">
<h4>Vernazza</h4>
<p>Vernazza is another of the five towns in the region. Vernazza is the fourth town heading north. It has no car traffic, and is one of the truest
"fishing villages" on the Italian Riviera.
</div>
</div>
<br><br><br>
</div>
</div>
<div class="w3-container w3-theme-d4">
<p class="w3-large">Europe Italy</p>
</div>
기본 예시
예제 보기머티리얼 디자인 룩(탐색 모음)
상태 표시줄:
12:30
툴바:
탭 표시줄/검색 표시줄:
다 같이:
12:30
예제
<div class="w3-container w3-padding-small w3-theme-d3">
<div class="w3-right">
<i class="fa fa-volume-up"></i>
<i class="fa fa-wifi"></i>
<i class="fa fa-battery-2"></i>
12:30
</div>
</div>
<div class="w3-bar w3-theme w3-xlarge">
<a class="w3-bar-item w3-button" href="#"><i class="fa fa-bars"></i></a>
<span class="w3-bar-item">Title</span>
<a class="w3-bar-item w3-button w3-right" href="#"><i class="fa fa-search"></i></a>
</div>
<div class="w3-bar w3-theme">
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-hover-white">Link 1</a>
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-hover-white">Link 2</a>
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-hover-white">Link 3</a>
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-hover-white">Link 4</a>
</div>
기본 예시
예제 보기머티리얼 디자인 룩(다채로운 카드)
참고
W3C School - W3.CSS Material Design