[머티리얼 디자인 툴킷]'머티리얼 디자인 라이트'에 대해 조사했다.(MDL)
3479 단어 JavaScriptCSS
개시하다
'머티리얼 디자인 라이트(MDL)'에 대해 조금 조사해 봤기 때문에 요약해 보겠습니다.
「 Material Design Lite 」
2015년 7월 6일에 구글은 재료 디자인을 구축하는 데 사용되는 도구 도구 도구 도구 도구 도구를 발표했다.
Material Design Lite의 "Lite"에 대한 의존성은 작고 인코딩 크기는 작음(27K 바이트로 압축)
간편한 설치와 사용 등의 의미를 담고 있다.
이 도구 모음을 사용하여 터미널마다 최적화(회전)
웹 사이트를 간단하게 구축할 수 있다.
이런 느낌의 디자인은 누구나 간단하게 실현할 수 있다.
재료 설계는
2014년 6월 구글이 발표한 모바일 OS'안드로이드 5.0'에 따르면
채택된 디자인 개념(지침).
간단하고 직관적인 사용자 인터페이스는 모니터 사이즈에 따라 디자인이 최적화된 것이 특징이다.
당장 사용해 보세요.
MDL(Material Design lite) 사용 준비
다음 태그만 <head> 태그에 포함됩니다.<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
상기 라벨을 삽입하면 공식 사이트 참조를 바탕으로 사이트를 구축할 것이다.
예를 들어 텍스트 필드를 실현하려면<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample1">
<label class="mdl-textfield__label" for="sample1">Text...</label>
</div>
</form>
웹 사이트<body>에 복제
이러한 텍스트 필드를 생성할 수 있습니다.
이외에도 다양한 요소로 재료 설계를 간단하게 실현할 수 있다.
자세한 내용은 공식 참고를 보십시오.
이런 형식으로 각종 소자들을 실현하는 데 사용되는 샘플 코드가 있기 때문이다
Material Design lite 사용법을 배우면서 시도해보는 게 좋을 것 같아요.
안 쓴 게 생각도 못했어요.
내가 설치하면서 넘어진 점을 수시로 업데이트하고 싶어요.
끝맺다
끝까지 읽어주셔서 감사합니다.
보기에는 간단하지만 멋있게 꾸미기는 어렵다.
공식 사이트 패션 w
Reference
이 문제에 관하여([머티리얼 디자인 툴킷]'머티리얼 디자인 라이트'에 대해 조사했다.(MDL)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Futo_Horio/items/a5e37d9bd6f63077ed70
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
2015년 7월 6일에 구글은 재료 디자인을 구축하는 데 사용되는 도구 도구 도구 도구 도구 도구를 발표했다.
Material Design Lite의 "Lite"에 대한 의존성은 작고 인코딩 크기는 작음(27K 바이트로 압축)
간편한 설치와 사용 등의 의미를 담고 있다.
이 도구 모음을 사용하여 터미널마다 최적화(회전)
웹 사이트를 간단하게 구축할 수 있다.
이런 느낌의 디자인은 누구나 간단하게 실현할 수 있다.
재료 설계는
2014년 6월 구글이 발표한 모바일 OS'안드로이드 5.0'에 따르면
채택된 디자인 개념(지침).
간단하고 직관적인 사용자 인터페이스는 모니터 사이즈에 따라 디자인이 최적화된 것이 특징이다.
당장 사용해 보세요.
MDL(Material Design lite) 사용 준비
다음 태그만 <head> 태그에 포함됩니다.<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
상기 라벨을 삽입하면 공식 사이트 참조를 바탕으로 사이트를 구축할 것이다.
예를 들어 텍스트 필드를 실현하려면<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample1">
<label class="mdl-textfield__label" for="sample1">Text...</label>
</div>
</form>
웹 사이트<body>에 복제
이러한 텍스트 필드를 생성할 수 있습니다.
이외에도 다양한 요소로 재료 설계를 간단하게 실현할 수 있다.
자세한 내용은 공식 참고를 보십시오.
이런 형식으로 각종 소자들을 실현하는 데 사용되는 샘플 코드가 있기 때문이다
Material Design lite 사용법을 배우면서 시도해보는 게 좋을 것 같아요.
안 쓴 게 생각도 못했어요.
내가 설치하면서 넘어진 점을 수시로 업데이트하고 싶어요.
끝맺다
끝까지 읽어주셔서 감사합니다.
보기에는 간단하지만 멋있게 꾸미기는 어렵다.
공식 사이트 패션 w
Reference
이 문제에 관하여([머티리얼 디자인 툴킷]'머티리얼 디자인 라이트'에 대해 조사했다.(MDL)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Futo_Horio/items/a5e37d9bd6f63077ed70
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample1">
<label class="mdl-textfield__label" for="sample1">Text...</label>
</div>
</form>
끝까지 읽어주셔서 감사합니다.
보기에는 간단하지만 멋있게 꾸미기는 어렵다.
공식 사이트 패션 w
Reference
이 문제에 관하여([머티리얼 디자인 툴킷]'머티리얼 디자인 라이트'에 대해 조사했다.(MDL)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Futo_Horio/items/a5e37d9bd6f63077ed70텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
