Materialise를 사용한 Material Design의 간단한 소개 (A quick introduction to Material Design using Materialize)

이 글은 Arun KumarA quick introduction to Material Design using Materialize글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다.

Material Design이란 무엇입니까?

Material Design은 구글이 만든 디자인 언어입니다. material.io에 따르면 Material Design는 다음을 결합하는 것을 목표로 합니다.
…기술과 과학의 혁신과 가능성을 가진 좋은 디자인의 고전적 원리. 플랫폼과 기기 크기 전반에 걸쳐 통합 환경을 제공할 수 있는 단일 기반 시스템을 개발하는 것을 목표로 합니다. 모바일 원칙은 기본이지만 터치, 음성, 마우스 및 키보드는 모두 최우선의 입력 방법입니다.

Material Design을 사용하는 이유

Material Design은 모든 기기에서 원활한 사용자 환경을 제공합니다. 반응성 전환 및 애니메이션과 함께 그림자, 번개 등의 패딩과 깊이 효과와 함께 우아하고 사용자 친화적인 느낌을 줍니다. Google은 거의 모든 앱(예: 보관 및 일정관리)에서 Material Design를 사용합니다.

웹 앱에서 Material Design을 어떻게 사용할 수 있습니까?

Materialize는 부트스트랩과 유사한 응답성이 뛰어난 프론트 엔드 구성 요소 라이브러리입니다. Bootstrap이 제공하는 모든 기능을 제공하지만, 차이점은 Materialize가 Material Design 원칙을 따른다는 것입니다. 여기 예제 템플릿이 있습니다.
presentation

다음은 Materialize가 제공하는 기능 목록입니다.

  • Grid
  • Tables
  • Badges, buttons, breadcrumbs
  • Cards, chips, collections
  • Footer, forms
  • Navbar
  • 그리고 훨씬 더 많이!

시작하는 방법

Bootstrap과 달리 Materialize에는 Popper.js가 필요하지 않습니다. jQuery만 있으면 됩니다. 이 정도만 하면 됩니다. HTML에 이 내용을 추가하면 바로 사용할 수 있습니다!
<!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!--Compiled and minifed jQuery --> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

Colors

Materialize를 사용하면 원하는 색상의 클래스 이름을 지정하기만 하면 HTML 요소의 색상을 변경할 수 있습니다. 예를 들어 단락 태그를 빨간색으로 지정하려면 다음을 수행합니다.
<p class=”red”>Lorem Ipsum</p>
또한 다른 클래스 이름을 지정-lighten-1 또는 darken-1하여 색상을 밝게 하거나 어둡게 할 수도 있습니다. 예: <h1 class=”blue lighten-1”>Sample Text</h1> 1은 밝은 색의 경우 5까지의 숫자, 다크닝의 경우 4까지의 숫자로 대체할 수 있습니다. 숫자가 많을수록 더 밝은 색이나 어두운 색조를 적용할 수 있습니다.

Buttons

버튼을 구체화하려면 클래스 이름 btn을 지정합니다. 또한 다른 클래스 waves-effect를 줌으로써 시원한 애니메이션을 추가할 수 있습니다. 더 큰 버튼이 필요한 경우 btn-large 클래스를 사용할 수 있습니다. 예:
<button class=”btn”> Click </button> <!-- Materialized button without click animation --><button class="btn waves-effect"> Click </button> <!-- Materialized button with click animation --><button class="btn-large"> Click </button> <!-- Large Button -->

Shadow

Material design에서는 모든 요소가 얼마나 올라갔는지 또는 얼마나 페이지와 가까운지를 결정하는 z-depth가 있어야 합니다.
요소에 그림자 효과를 적용하려면 z-deep-2클래스를 사용할 수 있다(2는 숫자 1-5로 대체할 수 있습니다). 예:
<div class="z-depth-2"><!-- Really cool stuff --></div>

결론

단순한 설명만 했습니다. Materialize에는 transitions, cards, carousel, 및 modals과 같은 훨씬 더 많은 기능을 사용할 수 있습니다. 문서에서 모든 구성 요소를 사용하는 방법을 배울 수 있습니다. 클래스 이름은 매우 간단하며 grid는 responsive columns을 빠르게 만드는 데 매우 유용합니다.

이 글은 번역 글입니다. 원본 링크입니다.
https://medium.freecodecamp.org/an-quick-introduction-to-material-design-using-materialize-8a9b223c64f1


https://www.facebook.com/groups/224179755005643/
안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp