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

 

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는 “머티리얼 디자인” 모양으로 애플리케이션을 디자인하기 위한 완벽한 스타일시트다.

다운로드

오늘

X

email.zip

https://www.w3schools.com/lib/email.zip

폴더에 표시

어제

X

email.zip

https://www.w3schools.com/lib/email.zip

폴더에 표시

X

email.zip

https://www.w3schools.com/lib/email.zip

폴더에 표시

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

 

툴바:

Title

 

탭 표시줄/검색 표시줄:

 

다 같이:

12:30
Title
예제
<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>
기본 예시
예제 보기

머티리얼 디자인 룩(다채로운 카드)

스포츠

소식

음악
참고
Mingg`s Diary
밍구
공부 목적 블로그