기본 INDIGO-PINK 팔레트에서 다음과 같은 방법 중 하나의 사용자 지정 팔레트로 전환 할 수 있습니다.
이 기사의 데모에서 수행 한 것처럼 Google의 CDN을 사용하는 경우 다음을 수행하십시오.
html 페이지의
를 교체하십시오.
예를 들어 의 경우, 재료 설계 팔레트에서 선택한 색상이 1 차, Accent만큼 호박색이라고 가정 해 봅시다. Google CDN에서 호스팅 된 MDL 스타일 시트의 URL은 다음과 같습니다.<span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span> <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"</span>></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span> <span>href<span>="https://fonts.googleapis.com/icon?family=Material+Icons"</span>></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span>
로그인 후 복사
로그인 후 복사
당신은 끝났습니다!
서버에서 컴파일 된 MDL 파일을 호스팅하려면 MDL 웹 사이트가 다루었습니다. 여기에 사용자 정의 및 미리보기 도구가 있습니다.이 도구는 대화식 컬러 휠에서 기본 및 악센트 색상 팔레트를 선택할 수 있습니다. 그런 다음 선택한 테마의 CSS를 다운로드하여 프로젝트에 바로 연결할 수 있습니다.
이 기사의 HTML 데모는 기본 인디고 핀크 팔레트를 사용하지만 위에 요약 된 방법 중 하나를 사용하여 다른 색상 선택을 실험 할 수 있습니다.
MDL 레이아웃 구성 요소
MDL은 레이아웃, 버튼, 카드, 스위치 등을 포함하여 일반적으로 사용되는 많은 웹 구성 요소를 제공합니다. 재료 설계 라이트의 레이아웃 구성 요소를 사용하여 HTML 템플릿의 구조 구축을 시작하십시오.
mdl .mdl-layout .mdl-js-layout의 클래스와 컨테이너 요소 내부의 전체 레이아웃을 동봉합니다.
html 문서의 태그를 시작한 후 다음 코드 스 니펫을 추가하여 시작하십시오.
MDL은 레이아웃에 CSS Flexbox를 사용합니다. .mdl-layout 요소는 플렉스 방향 특성이 열로 설정된 플렉스 컨테이너입니다.
레이아웃 구성 요소에는 다음 4 개의 하위 구성 요소가 포함되어 있습니다
탐색 레이아웃
그리드
탭
바르는
내비게이션에 탭을 사용하는
다음 옵션 중에서 선택하여 내비게이션을 구축 할 수 있습니다.
투명 헤더
고정 서랍, 헤더 없음
고정 헤더
고정 헤더 및 서랍
스크롤 헤더
폭포 헤더 - 페이지 스크롤에서 계약하는 헤더
MDL 탐색 레이아웃 섹션에서 위의 옵션을 살펴보고 프로젝트를 위해 각각을 실험 할 수 있습니다.
이 기사와 함께 제공되는 HTML 데모의 경우 탭 구성 요소를 사용하여 탭 내비게이션을 선택했습니다. 탭의 아름다움은 컨텐츠가 상호 배타적 인 화면으로 구분되지만 모든 섹션은 같은 페이지에 물리적으로 배치된다는 것입니다. 즉, 사용자가 탭 내비게이션 링크를 클릭하면 서버가 브라우저에 새 페이지를로드 할 때까지 기다릴 필요가 없습니다. 모든 컨텐츠를 즉시 사용할 수 있으므로 사이트 방문자에게 즐거운 경험을 제공합니다.
탭 헤더 레이아웃을 신속하게 작성하려면 다음 단계를 따르십시오.
이전에 코딩 한 레이아웃 컨테이너 요소에 두 개의 클래스를 추가하십시오-.mdl-layout-fixed-header 및 .mdl-layout-fixed-tabs :
네임 스케이션 된 BEM 클래스를 사용하여 MDL이 CSS를 구성하는 방법에 유의하십시오. BEM 방법론에 익숙하지 않은 경우 BEM과 함께 일하는 경우 - Patrick Catanzariti의 최고 개발자의 조언은 훌륭한 개요를 제공합니다.
다음, 다음과 같이 섹션을 코딩하십시오
<span><span><span><script</span> src<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"</span>></span><span>
</span></span><span><span></span><span><span></script</span>></span></span>
로그인 후 복사
로그인 후 복사
<span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span> <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"</span>></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span> <span>href<span>="https://fonts.googleapis.com/icon?family=Material+Icons"</span>></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span>
로그인 후 복사
로그인 후 복사
서랍은 디자인을 어수선하지 않고 위젯, 공유 버튼 및 웹 페이지에 추가 내비게이션 링크를 추가하는 데 적합합니다.
섹션 직후에 추가 한 코드 스 니펫을 사용하여 아래 코드를 작성하여 레이아웃에 서랍 구성 요소를 추가하십시오 : .
이 스 니펫을 실제로 보거나 탭 내비게이션 및 서랍 구성 요소의 전체 구현을 위해 데모 프로젝트의 소스 코드를 검사하십시오.
재료 설계 라이트 그리드
재료 설계 Lite는 데스크탑 화면에 12 열 그리드, 태블릿 용 8 열 그리드 (최대 800px), 모바일 스크린 크기 (최대 500px)의 4 열 그리드를 사용합니다.
당신은 컨테이너 요소 내부의 그리드 열을 .mdl-grid 클래스로 둘러 쌉니다.
기본적으로 그리드 열 컨테이너 요소는 화면의 전체 너비에 걸쳐 있습니다. 이것이 당신이 원하는 것이 아니라면, 스타일 시트에서 폭을 정의하는 것은 당신에게 달려 있습니다. .
예를 들어,이 기사의 데모 프로젝트는 전체 화면과 중앙 박스 섹션을 모두 구현합니다.
레이아웃은 각 섹션을 다른 .mdl-grid 요소로 줄이고 박스 섹션에 CSS 최대 폭 값이 960px의 추가 사용자 정의 클래스를 제공하여 달성됩니다.
html :
및 CSS :
또한 그리드 열 사이에 여백이 없으면 MDL은 그리드 열 컨테이너 요소에 추가 할 수있는 편리한 클래스가 있습니다.
이것은 당신에게 다음과 같은 것을 줄 것입니다 :
다음으로 .mdl-cell 클래스와
요소를 추가하여 .mdl-grid 요소 내부의 열을 빌드합니다. 다음은 3 열 그리드의 코드입니다 :
기본 열 크기를 재정의하려면 1에서 12까지의 숫자가있는 .mdl- 셀-{number} -col 클래스를 추가해야합니다. 여기 2 열 그리드의 코드는 다음과 같습니다. : <span><span><span><script</span> src<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"</span>></span><span>
</span></span><span><span></span><span><span></script</span>></span></span>
로그인 후 복사
로그인 후 복사
Codepen의 라이브 데모를 확인하십시오
디자인이 필요한 경우 MDL은 특정 화면 크기로 열을 숨기는 편리한 유틸리티 클래스를 제공합니다.
.mdl-cell- 헤드-드 스크 탑은 데스크탑 화면 크기 (840px보다 넓음) 를 숨 깁니다.
.
.mdl-cell- 헤드 폰은 모바일 화면 크기 (최대 480px 미만)의 열을 숨 깁니다.
이것을 실제로 보려면 데모 프로젝트의 환영 섹션을 다양한 화면 크기로 봅니다. 곧 목록 항목 옆에있는 장식용 분홍색 원이 작은 화면에서 볼 수 없음을 알게 될 것입니다 : -
-
재료 디자인 라이트 카드 구성 요소
카드 UI 패턴은 특히 Pinterest와 같은 웹 사이트 덕분에 꽤 오랫동안 인기를 얻고 있습니다.
자재 설계가 카드 구성 요소를 정의하는 방법은 다음과 같습니다
카드는 더 자세한 정보에 대한 진입 지점 역할을하는 재료 시트입니다. 카드에는 사진, 텍스트 및 단일 주제에 대한 링크가 포함될 수 있습니다.
재료 설계 사양
다른 유형의 콘텐츠를 단일 카드에 추가 할 수 있지만 핵심 주제와 관련이 있는지 확인하십시오. 또한 너무 많은 정보 나 카드 내부에 너무 많은 링크와 버튼을 배치하지 마십시오. 오히려 사용자에게 주제에 대한 자세한 정보를 제공 한 전용 페이지를 지적하십시오.
MDL 카드 구성 요소를 사용하여 페이지에 간단한 카드를 추가하는 방법은 다음과 같습니다.
당신은 컨테이너 요소 내부의 카드 내용을 .mdl-card 클래스로 랩합니다. .mdl-shadow- {number} dp 클래스를 사용하면 Drop Shadow의 깊이를 제어 할 수 있습니다.
다음, 다음 카드 섹션에 컨테이너를 추가합니다.
.mdl-card__title class 를 사용하여 카드 제목
.mdl-card__media class 를 사용하는 카드 미디어
를 사용한 카드 텍스트 콘텐츠
마지막으로, 당신은 제목 태그가 .mdl-card__title-text 클래스를 가지고 있는지 확인하기 위해 적절한 컨텐츠 로이 구조를 살펴 봅니다.
Codepen의 라이브 스 니펫은 다음과 같습니다
Codepen에서 Sitepoint (@sitepoint)의 펜 재료 디자인 Lite Cards 참조.
. mdl-cell 클래스가있는 요소에 적절한 .mdl-card 클래스를 추가하여 그리드 셀을 카드 구성 요소로 바꿀 수도 있습니다.
동반 데모 프로젝트 에서이 접근법을 찾을 수 있습니다. 반응 형 타일 레이아웃을 달성하는 좋은 방법입니다.
결론
이 기사는 Google의 재료 디자인 라이트 라이브러리를 탐색하고 실제 HTML 웹 템플릿에 실습에 관한 것입니다.
MDL은 예를 들어 Bootstrap과 같은 포괄적 인 프레임 워크가 아닙니다. 응용 프로그램이 가장 필요한 모든 구성 요소와 스타일에 대해 다루지는 않습니다. 따라서 일부 기능을 직접 코딩 할 것으로 예상됩니다.
그러나 도서관은 여전히 진화하고 있으며 향후 릴리스에서 새로운 것들로 우리를 놀라게 할 수 있습니다. 또한 웹은 디자이너와 개발자를위한 리소스의 풍부한 재료 설계 생태계를 제공하며 대부분 무료입니다.
당신은 MDL 웹 사이트의 템플릿과 함께이 기사에 HTML 템플릿을 사용할 수 있습니다.
최고의 재료 UI 테마에 대한 가이드를 확인하십시오.
Google의 재료 설계 라이트에 대한 자주 묻는 질문 (FAQ)
MDL (Material Design Lite)이란 무엇이며 재료 설계와 어떻게 다른가?
MDL (Material Design Lite)은 모든 장치에서 통합 된 사용자 경험을 제공하기 위해 Google이 개발 한 설계 철학입니다. 그리고 플랫폼. 디지털 경험을 만들기위한 이론, 자원 및 도구를 결합한 포괄적 인 설계 시스템 인 Material Design의 가벼운 버전입니다. Material Design은 다양한 도구, 지침 및 구성 요소를 포함하는 완벽한 설계 언어이지만 MDL 은이 시스템의 하위 집합으로 구현하기 쉬운보다 간단하고 가벼운 프레임 워크를 제공합니다. 전체 재료 설계 시스템의 복잡성없이 현대적이고 세련된 사용자 인터페이스를 만들고자하는 개발자에게 특히 유용합니다. 재료 디자인 lite로 어떻게 시작할 수 있습니까?
시작하려면 시작하십시오. Material Design Lite를 사용하면 프로젝트에 MDL CSS 및 JavaScript 파일을 포함해야합니다. 이 파일은 공식 MDL 웹 사이트에서 다운로드하거나 CDN (Content Delivery Network)에서 직접 포함시킬 수 있습니다. 이 파일을 포함 시키면 HTML 코드에서 MDL 구성 요소를 사용해야합니다. MDL 웹 사이트는 각 구성 요소를 사용하는 방법을 이해하는 데 도움이되는 포괄적 인 설명서 및 예제를 제공합니다.
재료 설계 라이트의 주요 구성 요소는 무엇입니까?
재료 설계 라이트는 다양한 구성 요소를 포함합니다. 사용자 인터페이스를 빌드하는 데 사용할 수 있습니다. 여기에는 버튼, 확인란, 텍스트 필드, 슬라이더 등이 포함됩니다. 각 구성 요소는 일관되고 현대적인 모양과 느낌을 제공하도록 설계되었으며 특정 요구에 맞게 사용자 정의 할 수 있습니다. MDL 웹 사이트는 코드 예제 및 사용 지침을 포함하여 각 구성 요소에 대한 자세한 문서를 제공합니다. 상업 프로젝트에 재료 설계 라이트를 사용할 수 있습니까?
예, 재료 디자인은 오픈 소스이며 개인 및 상업 프로젝트 모두에 무료로 사용할 수 있습니다. 라이센스 조건을 준수하면 소프트웨어를 자유롭게 사용, 수정 및 배포 할 수있는 Apache License 2.0에 따라 라이센스가 부여됩니다. 재료 설계는 다른 설계 프레임 워크와 어떻게 비교됩니까?
재료 설계 라이트는 가볍고 사용하기 쉬운 프레임 워크로 현대적이고 매끄러운 느낌을 제공합니다. 간단하고 간단한 API 및 포괄적 인 문서로 쉽게 구현할 수 있도록 설계되었습니다. 다른 디자인 프레임 워크와 비교할 때 MDL은 덜 포괄적이지만 복잡하지 않으므로 본격적인 프레임 워크의 오버 헤드없이 간단하고 효과적인 디자인 시스템을 원하는 개발자에게는 적합한 선택입니다. 모든 브라우저와 호환 되는가?
Material Design Lite는 Chrome, Firefox, Safari 및 Edge를 포함한 모든 최신 브라우저와 호환되도록 설계되었습니다. 그러나 이전 브라우저 나 최신 웹 표준을 완전히 지원하지 않는 브라우저에서는 예상대로 작동하지 않을 수 있습니다. 내 브랜드에 맞게 재료 설계 라이트를 사용자 정의 할 수 있습니까? 고도로 사용자 정의 할 수 있습니다. 브랜드의 시각적 정체성에 맞게 색상, 글꼴 및 기타 디자인 요소를 변경할 수 있습니다. MDL 웹 사이트는 귀하의 요구에 맞게 프레임 워크를 사용자 정의하는 방법에 대한 자세한 지침을 제공합니다.
재료 설계는 반응 형 디자인을 지원합니까? 여기에는 다양한 화면 크기 및 방향에 적응하는 레이아웃을 만들 수있는 반응 형 그리드 시스템이 포함되어 있습니다. 이로 인해 데스크탑과 모바일 장치 모두에서 멋지게 보이는 웹 사이트와 앱을 쉽게 만들 수 있습니다.
재료 설계 라이트에 어떻게 기여할 수 있습니까?
오픈 소스 프로젝트, 재료 설계 lite 지역 사회의 기여를 환영합니다. 버그를보고하거나 새로운 기능을 제안하거나 코드 변경을 제출하여 기여할 수 있습니다. 모든 기부금은 MDL 웹 사이트에서 이용할 수있는 프로젝트의 기여 가이드 라인을 따라야합니다. 자료 설계에 대해 더 많은 리소스를 찾을 수있는 곳은 어디입니까? 시작합니다. 모든 MDL 구성 요소에 대한 포괄적 인 문서, 코드 예제 및 사용 지침을 제공합니다. 또한 MDL에 대한 자세한 내용과 프로젝트에서 효과적으로 사용하는 방법에 대해 더 많이 배우는 데 도움이되는 많은 온라인 자습서, 기사 및 비디오가 있습니다.
재료 설계 사양 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
