CSS 프레임워크 - Materialize CSS

Materialize CSS

Materialize CSS는 Material Design*에 기반한 반응형 프론트엔드 프레임워크다.

 

*Material Design이란?

모바일, 데스크톱 등 다양한 디바이스들을 아우르며, 누구나 알아볼 수 있도록 직관적이고 일관된 구글의 디자인 가이드라인이다. 2014년 구글이 스마트폰에 적용하면서 보급되었다.

 

Materialize 로고

 

Setup 하기

다운로드

다운로드

 

CDN

 <!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

 

NPM

npm install materialize-css@next

 

Bower

bower install materialize

 

프로젝트 구조

MyWebsite/
|--css/
| |--materialize.css
|
|--fonts/
| |--roboto/
|
|--js/
| |--materialize.js
|
|--index.html

 

 

사용법

예시 1: 색상 적용

인라인으로 스타일을 지정하기 때문에 클래스 명에 필요한 색상명을 삽입하면 된다. 자세히

<div class="card-panel teal lighten-2">
	This is a card panel with a teal lighten-2 class
</div>

텍스트에 색상을 입힐 때는 색상 클래스명 뒤에 -text를 붙이면 된다.

<div class="card-panel">
    <span class="blue-text text-darken-2">
    	This is a card panel with dark blue text
    </span>
</div>

 

예시1: Pagination

  <ul class="pagination">
    <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
    <li class="active"><a href="#!">1</a></li>
    <li class="waves-effect"><a href="#!">2</a></li>
    <li class="waves-effect"><a href="#!">3</a></li>
    <li class="waves-effect"><a href="#!">4</a></li>
    <li class="waves-effect"><a href="#!">5</a></li>
    <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
  </ul>

 

 

공식 문서

https://materializecss.com/

Documentation - Materialize