세상의 모든 지식

[Materializecss] 누구보다 빠르게 남들과는 다르게 반응형 웹 제작 - (1) 본문

특강/반응형 웹 기초

[Materializecss] 누구보다 빠르게 남들과는 다르게 반응형 웹 제작 - (1)

JuniorEinstein 2016. 11. 3. 00:44
728x90

안녕하세요! 첫 강의는 Materializecss를 이용한 반응형 웹 제작으로 시작하게 되었습니다!


Material 디자인은 구글에서 사용하고 있는 디자인 템플릿으로, 어느 플랫폼 상에서도 구글의 UX를 제공할 수 있는 디자인 시스템입니다.

Material 디자인에 대하여 더 자세하게 알아보고 싶다면 아래의 링크를 참고해 주시기 바랍니다.


design.google.com


사실 구글의 material 디자인과 materializecss는 아무런 연관성도 없습니다. materializecss는 안드로이드 기반의 어플리케이션에서 주로 사용되는 material 디자인은 웹 플랫폼에서도 사용할 수 있게 비슷하게 만들어 놓은 것입니다. materializecss 이외에도 material-ui.com 과 같이 material 디자인을 이용할 수 있는 프레임워크가 있습니다.


왜 머터리얼 디자인일까요? 구글은 머터리얼 디자인의 아이디어를 팬과 종이에서 얻었다고 설명하고 있습니다. 종이를 일정한 간격을 두고 쌓아 그 모양을 정면에서 바라보면 비스듬하게 생긴 그림자를 연출하는데요, 비스듬한 그림자와 빳빳한 느낌의 종이가 어우러지는 디자인이라고 설명할 수 있습니다. 구글의 머터리얼 디자인 가이드는 material.google.com 에서 확인할 수 있습니다.


그렇다면 이제 본격적으로 materializecss를 이용한 반응형 웹 제작을 시작해 보겠습니다. 우선 아래의 사이트에 접속합니다.

materializecss.com



중앙에 크게 그려진 '시작하기' 버튼을 눌러 시작합시다!


처음 시작하기 페이지에서는 Materializecss를 사용하기 위한 다양한 방법을 소개하고 있습니다.


  1. 제일 상단에 내려받기 버튼을 누르면 Materializecss의 css, js 파일을 직접 내려받을 수 있습니다.
  2. CDN은 Content Delivery Network의 줄인 말로, 사용자가 인터넷으로 Materializecss의 css, js 파일에 접근해 사용할 수 있는 방식입니다.
  3. 아래의 NPM과 BOWER은 각각 NPM 방식과. Bower에서 Materializecss를 사용할 때 설치 방법입니다.

이 강의에서는 CDN 방식으로 Materializecss를 사용해보려고 합니다. 물론 Materializecss를 직접 다운로드 받아 변경하는 방법도 있지만 그렇게 권장하는 방법은 아닙니다. 어디까지나 프레임워크는 활용하라고 있는 것이죠.

index.html 파일을 만들고,
페이지 중간 부분의 HTML 설정하기 탭의 내용을 붙여 넣습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
        <!--Import Google Icon Font-->
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
 
        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
 
    <body>
        <!--Import jQuery before materialize.js-->
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

cs

이렇게 되면 기본적으로 Materializecss를 사용할 수 있는 준비가 끝났는데요, 저희는 CDN과 한글 폰트를 이용하기 위한 설정을 몇 가지 해보겠습니다.


<head>에 아래의 코드를 추가합니다. 아래의 코드는 한글 유니코드 문자를 사용하기 위한 태그입니다.

1
<meta charset="utf-8">
cs


다음으로는 CDN을 이용하기 위해 파일을 직접 가져오는 구문인,

1
<link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
cs

와

1
<script type="text/javascript" src="js/materialize.min.js"></script>
cs

의 두 줄을 지워줍니다.


그리고 그 자리에 우리가 아까 CDN 탭에서 보았던

1
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
cs

와

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
cs

를 붙여 넣어 줍니다.


그렇게 되면 최종적인 형태는 다음과 같이 되겠군요!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
        <!--Import Google Icon Font-->
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
 
        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
 
    <body>
        <!--Import jQuery before materialize.js-->
        <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.8/js/materialize.min.js"></script>
    </body>
</html>
cs


자, 이제 Materializecss를 이용할 준비가 끝났습니다!

저는 다음 강의에서 다시 찾아 오도록 하겠습니다.


궁금하거나 막히는 부분이 있다면 언제나 댓글로 남겨 주시면 답변해 드리겠습니다!

728x90
공유하기 링크
Comments