Materialise-환경 설정

이 장에서는 Materialise에 적합한 환경을 설정하는 다양한 측면에 대해 설명합니다.

옵션 온라인 시도

Materialise 프로그래밍 환경을 온라인으로 설정하여 사용 가능한 모든 예제를 온라인으로 컴파일하고 실행할 수 있습니다. 읽고있는 내용에 대한 확신을 제공하고 다양한 옵션으로 프로그램을 확인할 수 있습니다. 모든 예제를 자유롭게 수정하고 온라인에서 실행하십시오.

CodingGround 에서 제공되는 온라인 컴파일러를 사용하여 다음 예제를 시도해보십시오.
<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body>
      <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>
이 튜토리얼에서 제공하는 대부분의 예제의 경우, 온라인 컴파일러로 이동하는 오른쪽 상단의 웹 사이트 코드 섹션에서 Try it 옵션을 찾을 수 있습니다. 그러니 그것을 활용하고 학습을 즐기십시오.

Materialise를 사용하는 방법?

Materialise를 사용하는 방법은 두 가지가 있습니다.

Local Installation − 당신은 materialize.min.css 과 materialize.min.js 로컬 컴퓨터에 파일을 저장하고 HTML 코드에 포함합니다.

CDN Based Version − 다음을 포함 할 수 있습니다. materialize.min.css 과 materialize.min.js CDN (Content Delivery Network)에서 직접 HTML 코드로 파일을 가져옵니다.

로컬 설치

이동 http://materializecss.com/getting-started.html 사용 가능한 최신 버전을 다운로드하십시오.
그런 다음 다운로드 한 materialize.min.js 웹 사이트의 디렉토리에있는 파일 (예 : / js 및 materialize.min.css / css에서.

예

포함 css 과 js 다음과 같이 HTML 파일의 파일.

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" href = "/materialize/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "/materialize/materialize.min.js"></script>             
   </head>
  
   <body>
      <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

다음 결과가 생성됩니다.

CDN 기반 버전

다음을 포함 할 수 있습니다. materialize.min.js 과 materialize.min.css CDN (Content Delivery Network)에서 직접 HTML 코드로 파일을 가져옵니다. cdnjs.cloudflare.com 최신 버전의 콘텐츠를 제공합니다.

이 자습서에서는 cdnjs.cloudflare.com CDN 버전의 라이브러리를 사용하고 있습니다.

예

위의 예를 다음을 사용하여 다시 작성하십시오. materialize.min.css 과 materialize.min.js cdnjs.cloudflare.com CDN에서.

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js">
      </script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body>
      <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

다음 결과가 생성됩니다-