반응형
Materialize CSS
Materialize CSS는 Material Design*에 기반한 반응형 프론트엔드 프레임워크다.
*Material Design이란?
모바일, 데스크톱 등 다양한 디바이스들을 아우르며, 누구나 알아볼 수 있도록 직관적이고 일관된 구글의 디자인 가이드라인이다. 2014년 구글이 스마트폰에 적용하면서 보급되었다.
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>
공식 문서
Documentation - Materialize
materializecss.com
반응형
'웹_프론트엔드 > 로드맵 챌린지' 카테고리의 다른 글
테스트 프레임워크 - Jest (0) | 2022.03.11 |
---|---|
CSS 프레임워크 - Bulma (0) | 2022.03.10 |
CSS 프레임워크 - Bootstrap (부트스트랩) (0) | 2022.03.07 |
CSS 프레임워크 - Chakra (차크라) (0) | 2022.03.04 |
CSS 프레임워크 - Tailwind CSS (0) | 2022.03.03 |