머티리얼 디자인 라이트-레이아웃

이 장에서는 Material Design Lite의 다양한 레이아웃에 대해 설명합니다. HTML5에는 다음과 같은 컨테이너 요소가 있습니다.

<div> − HTML 콘텐츠에 일반 컨테이너를 제공합니다.
<header> − 헤더 섹션을 나타냅니다.
<footer> − 바닥 글 섹션을 나타냅니다.
<article> − 기사를 나타냅니다.
<section> − 다양한 유형의 섹션에 대한 일반 컨테이너를 제공합니다.

MDL은 다양한 CSS 클래스를 제공하여 미리 정의 된 다양한 시각적 및 동작 향상을 컨테이너에 적용합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나열되어 있습니다.

Sr. 아니.	클래스 이름 및 설명
1	mdl-layout 컨테이너를 MDL 구성 요소로 식별합니다. 외부 컨테이너 요소에 필요합니다.
2	mdl-js-layout 레이아웃에 기본 MDL 동작을 추가합니다. 외부 컨테이너 요소에 필요합니다.
삼	mdl-layout__header 컨테이너를 MDL 구성 요소로 식별합니다. 헤더 요소에 필요합니다.
4	mdl-layout-icon 애플리케이션 아이콘을 추가하는 데 사용됩니다. 둘 다 표시되는 경우 메뉴 아이콘으로 재정의됩니다. 선택적 아이콘 요소.
5	mdl-layout__header-row 컨테이너를 MDL 헤더 행으로 식별합니다. 헤더 콘텐츠 컨테이너에 필요합니다.
6	mdl-layout__title 레이아웃 제목 텍스트를 식별합니다. 레이아웃 제목 컨테이너에 필요합니다.
7	mdl-layout-spacer 머리글 또는 서랍 안의 요소를 정렬하는 데 사용됩니다. 남은 공간을 채우기 위해 성장합니다. 일반적으로 요소를 오른쪽으로 정렬하는 데 사용됩니다. 레이아웃 제목을 따르는 div에서 선택 사항입니다.
8	mdl-navigation 컨테이너를 MDL 탐색 그룹으로 식별합니다. nav 요소에 필요합니다.
9	mdl-navigation__link 앵커를 MDL 탐색 링크로 식별합니다. 헤더 및 / 또는 서랍 앵커 요소에 필요합니다.
10	mdl-layout__drawer 컨테이너를 MDL 레이아웃 서랍으로 식별합니다. 서랍 컨테이너 요소에 필요합니다.
11	mdl-layout__content 컨테이너를 MDL 레이아웃 콘텐츠로 식별합니다. 주요 요소에 필요합니다.
12	mdl-layout__header--scroll 헤더를 콘텐츠와 함께 스크롤합니다. 헤더 요소에서 선택 사항입니다.
13	mdl-layout--fixed-drawer 서랍이 항상 표시되고 더 큰 화면에서 열립니다. 서랍 컨테이너 요소가 아닌 외부 컨테이너 요소에서 선택 사항입니다.
14	mdl-layout--fixed-header 작은 화면에서도 헤더를 항상 표시합니다. 외부 컨테이너 요소에서 선택 사항입니다.
15	mdl-layout--large-screen-only 작은 화면에서 요소를 숨 깁니다. mdl-layout의 모든 하위 항목에서 선택 사항입니다.
16	mdl-layout--small-screen-only 큰 화면에서 요소를 숨 깁니다. mdl-layout의 모든 하위 항목에서 선택 사항입니다.
17	mdl-layout__header--waterfall 여러 헤더 행으로 "폭포"효과를 허용합니다. 헤더 요소에서 선택 사항입니다.
18	mdl-layout__header--transparent 헤더를 투명하게 만들고 레이아웃 배경 위에 그립니다. 헤더 요소에서 선택 사항입니다.
19	mdl-layout__header--seamed 그림자가없는 헤더를 사용합니다. 헤더 요소에서 선택 사항입니다.
20	mdl-layout__tab-bar 컨테이너를 MDL 탭 표시 줄로 식별합니다. 헤더 내부의 컨테이너 요소에 필요합니다 (탭 레이아웃).
21	mdl-layout__tab 앵커를 MDL 탭 링크로 식별합니다. 탭 표시 줄 앵커 요소에 필요합니다.
22	is-active 탭을 기본 활성 탭으로 식별합니다. 탭 표시 줄 앵커 요소 및 연관된 탭 섹션 요소에서 선택 사항입니다.
23	mdl-layout__tab-panel 컨테이너를 탭 컨텐츠 패널로 식별합니다. 탭 섹션 요소에 필요합니다.
24	mdl-layout--fixed-tabs 기본 스크롤 가능 탭 대신 고정 탭을 사용합니다. 헤더 내부 컨테이너가 아닌 외부 컨테이너 요소에 대한 선택 사항입니다.

다음 예제는 mdl-layout 클래스를 사용하여 다양한 컨테이너의 스타일을 지정하는 방법을 보여줍니다.

고정 서랍

고정 된 서랍이 있지만 헤더가없는 템플릿을 만들려면 다음 MDL 클래스가 사용됩니다.

mdl-layout − div를 MDL 구성 요소로 식별합니다.
mdl-js-layout − 외부 div에 기본 MDL 동작을 추가합니다.
mdl-layout--fixed-drawer − 서랍이 항상 표시되고 더 큰 화면에서 열립니다.
mdl-layout__drawer − div를 MDL 레이아웃 서랍으로 식별합니다.
mdl-layout-title − 레이아웃 제목 텍스트를 식별합니다.
mdl-navigation − div를 MDL 탐색 그룹으로 식별합니다.
mdl-navigation__link − 앵커를 MDL 탐색 링크로 식별합니다.
mdl-layout__content − div를 MDL 레이아웃 콘텐츠로 식별합니다.

mdl_fixeddrawer.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <!--  No header, and the drawer stays open on larger screens (fixed drawer).-->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
      
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

결과

결과를 확인하십시오.

고정 헤더

추가 MDL 클래스를 따르는 고정 헤더로 템플릿을 생성하기 위해 사용됩니다.

mdl-layout--fixed-header − 작은 화면에서도 헤더를 항상 표시합니다.

mdl_fixedheader.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <!-- Always shows a header, even in smaller screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">Home</a>
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">About</a>
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
      
         <main class = "mdl-layout__content">
            <div class = "page-content">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

결과

결과를 확인하십시오.

고정 헤더 및 서랍

고정 헤더와 고정 서랍이있는 템플릿을 만들려면 다음과 같은 추가 MDL 클래스가 사용됩니다.

mdl-layout--fixed-drawer − 서랍이 항상 표시되고 더 큰 화면에서 열립니다.
mdl-layout--fixed-header − 작은 화면에서도 헤더를 항상 표시합니다.

mdl_fixedheader.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">Home</a>
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">About</a>
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

결과

결과를 확인하십시오.

스크롤링 헤더

스크롤 헤더가있는 템플릿을 생성하기 위해 다음과 같은 MDL 클래스가 사용됩니다.

mdl-layout--header--scroll − 헤더를 내용과 함께 스크롤합니다.

mdl_scrollingheader.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <!--  Uses a header that scrolls with the text, rather than 
         staying locked at the top -->
      <div class = "mdl-layout mdl-js-layout ">
         <header class = "mdl-layout__header mdl-layout__header--scroll">      
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "">Home</a>
                  <a class = "mdl-navigation__link" href = "">About</a>      
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
            </div>
         </main>
      </div>
   
   </body>
</html>

결과

결과를 확인하십시오.

계약 헤더

페이지가 아래로 스크롤 될 때 축소되는 헤더가있는 템플릿을 생성하기 위해 다음 MDL 클래스가 사용됩니다.

mdl-layout__header--waterfall − 여러 헤더 행으로 "폭포"효과를 허용합니다.

mdl_waterfallheader.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout ">
         <header class = "mdl-layout__header mdl-layout__header--waterfall">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
            </div>
            
            <!-- Bottom row, not visible on scroll -->
            <div class = "mdl-layout__header-row">
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "">Home</a>
                  <a class = "mdl-navigation__link" href = "">About</a>      
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
            </div>
         </main>
      </div>
   
   </body>
</html>

결과

결과를 확인하십시오.

스크롤 가능한 탭이있는 고정 헤더

스크롤 가능한 탭이있는 헤더가있는 템플릿을 만들려면 다음 MDL 클래스가 사용됩니다.

mdl-layout__tab-bar − 컨테이너를 MDL 탭 바로 식별합니다.
mdl-layout__tab − 앵커를 MDL 탭 링크로 식별합니다.
mdl-layout__tab-panel − 컨테이너를 탭 콘텐츠 패널로 식별합니다.

mdl_scrollabletabheader.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>          
            </div>
         
            <!-- Tabs -->
            <div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
               <a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
               <a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
               <a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>     
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
               <div class = "page-content">Tab 1 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
               <div class = "page-content">Tab 2 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
               <div class = "page-content">Tab 3 Contents</div>
            </section>
         </main>
      </div>
   
   </body>
</html>

결과

결과를 확인하십시오.

고정 탭이있는 고정 헤더

고정 탭이있는 헤더로 템플릿을 생성하려면 다음과 같은 추가 MDL 클래스가 사용됩니다.

mdl-layout--fixed-tabs − 기본 스크롤 탭 대신 고정 탭을 사용합니다.

mdl_fixedtabheader.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
         <header class = "mdl-layout__header">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>          
            </div>
         
            <!-- Tabs -->
            <div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
               <a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
               <a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
               <a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>     
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
               <div class = "page-content">Tab 1 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
               <div class = "page-content">Tab 2 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
               <div class = "page-content">Tab 3 Contents</div>
            </section>
         </main>
      </div>
   
   </body>
</html>

결과

결과를 확인하십시오.