라이브러리 불러오기
MDL을 사용하기 위해서는 HTML안에 MDL CSS와 JavaScript 사용을 선언해야 한다. 여러가지 호출 방법이 있지만, MDL에서는 CDN을 통해서 라이브러리를 호출하는 것을 권고한다.
Color Scheme 변경하기
디자인에 따라 프로젝트 맞는 scheme으로 변경하고 반영한다. 구글에서 정의한 material color set이 있는데 그 중 primary color와 accent color를 선택하면 된다.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>테스트 해보기
자 이제 호출했으면 button component로 테스트를 해 볼 수 있다. 특히 Ripple 같은 effect가 제대로 반영이 되는 지 확인해 본다. (Open in Codepen을 바로 이용한다.)
이상을 MDL을 처음 사용할 때 꼭 필요한 사항을 살펴보았다. 다음회 부터는 각 Component를 다루어 본다.
