개요

mdui의 CDN과 가장 간단한 페이지 템플릿을 통해 mdui 사용을 시작해 보겠습니다.

mdui 2 문서를 읽고 계십니다!

mdui 1 문서를 읽으려면 www.mdui.org/docs/를 방문하세요.

빠른 시작

mdui를 사용하는 가장 간단한 방법은 CDN에서 직접 CSS 및 JS 파일을 가져오는 것입니다.

npm을 통해 mdui를 설치하려면 설치 섹션을 참조하세요.

파일 가져오기

다음 코드를 페이지의 <head> 태그에 추가하세요:

<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css" />
<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>

컴포넌트의 icon 속성(예: <mdui-button icon="search"></mdui-button>의 icon 속성)을 사용해야 하는 경우 아이콘의 CSS 파일도 가져와야 합니다. Material Icons 아이콘 사용을 참조하세요.

mdui는 서드파티 라이브러리에 의존하지 않으며, 위 파일을 가져오면 정상적으로 작동합니다.

가장 간단한 페이지 템플릿

다음은 가장 간단한 페이지 템플릿으로, 더 많은 컴포넌트와 콘텐츠를 추가하여 웹사이트를 구축할 수 있습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
    <meta name="renderer" content="webkit"/>

    <link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
    <script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
    <!-- 컴포넌트의 icon 속성을 사용하는 경우 아이콘의 CSS 파일도 가져와야 합니다 -->

    <title>Hello, world!</title>
  </head>
  <body>
    <mdui-button>Hello, world!</mdui-button>
  </body>
</html>

다음 장

설치