Google의 Material Design Lite에 대한 실질적인 소개

2014 년 Google은 견고한 설계 원칙, 다양한 플랫폼 및 장치에서 일관된 사용자 경험, 기술 및 과학적 혁신을 모으기위한 시각적 언어 인 Material Design Specification을 게시했습니다.

2015 년 7 월, Google 릴리스 자료 디자인 Lite는 웹 사이트에 재료 설계 모양과 느낌을 더 쉽게 추가 할 수 있도록 설계된 프론트 엔드 라이브러리입니다. 이 기사에서는 재료 설계의 다음 기본 원칙과 구성 요소와 MDL (Material Design Lite) 라이브러리를 사용하여 구현하는 방법에 중점을 둡니다.

타이포그래피

색상

레이아웃 카드

키 테이크 아웃

Google의 MDL (Material Design Lite)은 웹 프로젝트에 재료 설계 미학의 구현을 단순화하는 프론트 엔드 라이브러리로 다양한 플랫폼에서 일관된 사용자 경험을 더 쉽게 유지할 수 있도록하는 프론트 엔드 라이브러리입니다.

CSS 및 JavaScript 파일 용 Google의 CDN을 사용하여 MDL을 프로젝트에 통합하거나 파일을 직접 다운로드하고 호스팅하여 Bower 및 NPM을 포함한 다양한 환경에 사용할 수있는 자세한 설정 지침을 사용하여 프로젝트에 통합 할 수 있습니다. 도서관은 로봇 및 NOTO 글꼴을 사용하여 강력한 타이포그래피 시스템을 제공하여 광범위한 스크립트를 지원하고 일관된 타이포그래피 스케일을 적용하기 위해 사전 정의 된 클래스를 제공합니다. MDL은 사용자 정의 가능한 색상 시스템을 제공하여 개발자가 사전 정의 된 팔레트에서 기본 및 악센트 색상을 선택할 수 있도록하여 유용성 가이드 라인을 유지하면서 시각적 호소력을 향상시킬 수 있습니다. 레이아웃, 카드 및 탭과 같은 주요 MDL 구성 요소는 반응 형 및 모듈 식으로 설계되어 Flexbox 및 BEM 방법론을 활용하여보다 체계적이고 확장 가능한 CSS 아키텍처를 용이하게합니다.
데모 프로젝트 이 기사의 데모 프로젝트를 Kaptain Kitty라고합니다. 이 기사에서 논의하는 재료 설계 개념 및 MDL 구성 요소를 웹 페이지에 적용하는 방법을 설명하는 HTML 템플릿입니다. 기사에 뛰어 들면서 재료 디자인 라이트를 페이스에 넣으려면 좋아하는 코드 편집기와 최신 최신 브라우저가 필요합니다.
• . 코드 펜에서 데모 프로젝트와 그 소스 코드를 볼 수 있습니다 : Codepen에서 sitepoint (@sitepoint)의 재료 설계 lite를 사용하여 펜 데모 템플릿을 참조하십시오. <.> 시작하자. 프로젝트에 재료 설계 라이트를 포함하여 프로젝트에 MDL을 포함시킬 때 다음 옵션이 있습니다.
  [Google의 CDN] (콘텐츠 전달 네트워크)를 사용하여 필요한 CSS 및 JavaScript 파일을로드하십시오.
  • 미니스트 CSS 및 JavaScript 파일을 다운로드하여 서버에서 호스팅하십시오. Github의 MDL 프로젝트에서 소스 코드를 다운로드하여 구축하십시오. Bower를 사용하여 프로젝트를 관리하는 경우 다음 명령을 입력하여 bower_components 폴더에 MDL 라이브러리 파일을 설치할 수 있습니다. NPM이 선택한 패키지 관리자 인 경우 다음 명령을 실행하여 node_modules 폴더에 mdl 파일을 설치하십시오.
  Google은 CDN에서 호스팅되는 CSS 및 JavaScript 파일을 사용하는 것이 좋습니다. 이 기사의 데모 페이지에서 찾을 수있는 메소드입니다.
  • 먼저 HTML 문서의 섹션에 MDL CSS 파일, Google의 재료 디자인 아이콘 및 프로젝트 스타일 시트에 대한 참조를 포함시켜 자신의 사용자 정의를 추가 할 예정입니다.
  다음, 닫는 태그 직전에 MDL JavaScript 파일에 대한 참조를 추가하십시오 :
  • 재료 디자인의 타이포그래피 Lite
  영어 및 영어와 같은 언어 (라틴어, 그리스어 및 키릴 문자)를위한 재료 디자인의 선택된 서체는 로봇과 Noto입니다. Noto는 또한 중국어, 일본어 및 한국과 같은 조밀 한 스크립트를 지원하며 동남아시아 및 중동 언어 (예 : 아랍어, 힌디어 등)와 같은 키 큰 대본을 지원합니다. 프로젝트에 로보토 글꼴 파일을 포함하려면 HTML 문서의 섹션 상단에 다음 태그를 추가하십시오.
  • 라틴어, 그리스어 및 키릴 문자의 경우, 재료 설계 사양은 12, 14, 16, 20 및 34의 타이포그래피 척도를 권장합니다. 특정 클래스 세트를 추가하여 MDL을 사용하여 재료 설계 타이포그래피 원리를 적용 할 수 있습니다. 마크 업. 예를 들어, .mdl-typography--display-2에

    태그 및 .mdl-typography를

    태그에 추가하면 각각 45px와 34px의 글꼴 크기 값이 추가됩니다. :
  MDL은 타이포그래피 스케일, 접근성 및 가독성 원리를 구운 여러 클래스를 가지고 있습니다. 이로 인해 액세스하는 데 사용되는 장치에 관계없이 읽을 수있는 아름다운 텍스트 콘텐츠를 더 쉽게 표시 할 수 있습니다. 전체 타이포그래피 클래스 목록을 보려면 Github의 MDL 타이포그래피 구성 요소 페이지를 방문하십시오. MDL 프로젝트의 색상 선택 MDL 라이브러리 스타일 시트 파일 이름을 기록하십시오 :

  ationation.indigo-pink.min.css . 이름은 스타일 시트에서 구현 된 재료 설계 색상 팔레트를 가리 킵니다. 기본 색상 팔레트는 인디고를 기본 색상으로, 핑크를 악센트 색상으로 사용합니다. 그러나 당신은 이것들에 붙어 있지 않습니다. 다음은 사용자 정의 색상 팔레트를 해결하는 방법과 MDL을 사용하여 구현하는 방법에 대한 재료 설계의 권장 사항입니다. 재료 설계 색상 원리 재료 디자인은 대담하고 음소거 된 색상, 그림자 및 하이라이트를 결합하는 것을 좋아합니다.

  색상은 예상치 못한 생명이어야합니다.

  Google 자재 디자인 사양 그러나 웹 페이지에서 임의의 색상이 튀는 것은 아닙니다. 상당히 반대. 재료 디자인은 조화롭게 함께 작동하는 광범위한 아름다운 컬러 팔레트를 제공합니다. 색상을 쉽게 선택할 수 있도록 팔레트의 각 색상에는 숫자 라벨과 16 진 색상 값이 있습니다. 재료 설계 지침은 500 색을 기본 색상으로 나타냅니다. 다른 색상은 악센트 색상으로 가장 잘 사용됩니다 웹 사이트의 사용자 정의 색상 선택을 수행 할 때 Material Design은 기본 팔레트에서 3 개의 색조와 2 차 팔레트에서 1 개의 악센트 색상을 선택할 것을 권장합니다. 예는 다음과 같습니다.

  악센트 색상 사용을 링크, 기본 작업 버튼 및 스위치 및 슬라이더와 같은 일부 구성 요소로 제한하십시오. 바디 텍스트에 악센트 색상을 사용하지 마십시오 :
  또한, 재료 설계 지침은 페이지의 넓은 영역과 앱 바의 악센트 색상을 사용하여 권장하지 않습니다. 특히 중요한 것은 플로팅 액션 버튼과 배경 모두에 동일한 색상을 사용하지 않는 것입니다.
  이제 재료 설계 색상 가이드 라인에 대한 확실한 이해를 얻었으므로 이제 MDL 프로젝트를 위해 멋진 색상을 선택할 차례입니다. 방법은 다음과 같습니다. 재료 설계에서 기본 색상 팔레트를 사용자 정의합니다 기본 INDIGO-PINK 팔레트에서 다음과 같은 방법 중 하나의 사용자 지정 팔레트로 전환 할 수 있습니다. 이 기사의 데모에서 수행 한 것처럼 Google의 CDN을 사용하는 경우 다음을 수행하십시오.

  html 페이지의

  섹션 섹션에서 태그의 HREF 속성 내부의 MDL 스타일 시트 파일로 URL을 찾으십시오.

  는 선택한 1 차 색상으로 인디고
  를 교체하고 좋아하는 악센트 색상으로

  핑크

  를 교체하십시오.

  예를 들어 의 경우, 재료 설계 팔레트에서 선택한 색상이 1 차, Accent만큼 호박색이라고 가정 해 봅시다. Google CDN에서 호스팅 된 MDL 스타일 시트의 URL은 다음과 같습니다.

  <span><span><span><link> 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> 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> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span></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> src<span >="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"</script></span>></span><span>
  </span></span><span><span></span><span><span></span>></span></span>

  마지막으로 해당 콘텐츠 패널을 추가해야합니다

  <span><span><span><link> 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> 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> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span></span></span></span>

  가있는 패널에는 .is- active 클래스가 있으며 기본적으로 표시됩니다. 서랍 구성 요소에 추가 내용을 배치합니다 데모는 서랍 섹션도 사용합니다. 서랍은 버튼을 클릭하여 숨기고 보여줄 수있는 측면 패널입니다. 또한 서랍을 열고 고정하여 콘텐츠가 항상 전망하게 유지되도록 선택할 수도 있습니다.

  서랍은 디자인을 어수선하지 않고 위젯, 공유 버튼 및 웹 페이지에 추가 내비게이션 링크를 추가하는 데 적합합니다.

  섹션 직후에 추가 한 코드 스 니펫을 사용하여 아래 코드를 작성하여 레이아웃에 서랍 구성 요소를 추가하십시오 : .

  이 스 니펫을 실제로 보거나 탭 내비게이션 및 서랍 구성 요소의 전체 구현을 위해 데모 프로젝트의 소스 코드를 검사하십시오. 재료 설계 라이트 그리드 재료 설계 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> src<span >="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"</script></span>></span><span>
  </span></span><span><span></span><span><span></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에 대한 자세한 내용과 프로젝트에서 효과적으로 사용하는 방법에 대해 더 많이 배우는 데 도움이되는 많은 온라인 자습서, 기사 및 비디오가 있습니다.

위 내용은 Google의 Material Design Lite에 대한 실질적인 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!