보안 전공생의 공부

Materialize 설치, 사용 방법 본문

WEB/Vue

Materialize 설치, 사용 방법

수잉 2021. 5. 3. 21:10

스마트폰, 태블릿, PC 등 다양한 장치의 각각의 화면 크기에 맞춰

적절한 페이지를 보여주기 위해 반응형(responsive)을 구현해야 한다.

 

Materialize는 CSS, 자바스크립트, HTML로 작성된 UI라이브러리다.

이를 이용하면 장치에 따라 특정 콘텐츠는 감추고, 다른 콘텐츠는 보이도록 할 수 있으며

짧은 시간 내 반응형 애플리케이션을 만들 수 있다.

 

▶Materialize 설치

 

materializecss.com/getting-started.html

 

Getting Started - Materialize

Materialize comes in two different forms. You can select which version you want depending on your preference and expertise. To start using Materialize, all you have to do is download one of the options below.

materializecss.com

 

위 사이트를 들어가면 CSS, NPM 등으로 설치하는 방법을 설명하고 있다.

 

[CSS 이용할 경우]

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

[NPM 이용할 경우]

  npm install materialize-css@next

 

 

▶색, 정렬

배경색을 설정할 때는 color lighten or darken 형식을 사용하고, 1~5까지 범위 적용가능하다. lightn일 경우, 숫자가 클수록 배경색이 더 옅어진다. darken은 그 반대이다.

 

텍스트 색은 color-text 형식을 사용한다. 설정은 class 속성에 정의해 사용한다.

class="teal", class="teal darken-3", class="white-text teal darken-5"
class="white-text teal darken-5"

텍스트의 정렬은 좌측 정렬 -> .left-align  우측 정렬 -> .right-align  중앙 정렬 -> .center-align을 

class 속성에 추가하면 적용된다.

 

<예시>

<html lang="en">
<head>
    <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
    <div class="blue lighten-4 center-align">
        과제가 넘모 많다...
    </div>

    <div class="white-text teal darken-2">
        종강 마렵다...
    </div>
</body>
</html>

실행화면은 밑과 같다.

색, 정렬의 실행결과

 

 

 

▶Image, Icon

다양한 장치에서 각자의 화면 크기에 맞게 Image를 나타내려면

class 속성값으로 responsive-img를 설정해 사용할 수 있다.

<img class="responsive-img" src="flower.jpg">

 

웹페이지를 디자인하는데 SNS, 이메일 등과 같이 필요한 아이콘들은 

밑의 링크를 이용하면 된다.

fonts.google.com/icons?family=Material+Icons

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

 

<link href="https:fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

위의 코드를 materialize.min.css 다음 라인에 추가한 후

class 속성에 material-icons를 추가해 사용한다.

<i class="material-icons">call</i>

 

<예시>

basic 폴더를 새로만들어서 index.html 파일을 새로 만들었다.

그리고 다음과 같은 코드를 작성하였다.

<html lang="en">
<head>
    <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https:fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
    <div class="row">
        <img class="responsive-img" src="./img/flower.jpg" alt="">
    </div>

    <div class="row">
        <i class="material-icons small teal-text">call</i>
        <i class="material-icons small teal-text">mail</i>
    </div>
</body>
</html>

 

실행결과는 다음과 같다.

사진의 크기는 페이지의 크기에 맞게 조절되는 것을 확인할 수 있었다.

 

▶Video

video를 반응형으로 나타나개 하려면 

class 속성에 video-container로 설정하고 iframe을 이용해 재생할 동영상을 설정한다.

 

<예시>

<html lang="en">
<head>
    <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https:fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
    <iframe width="1280" height="720" src="https://youtube.com/embed/E9grdgOGdJU"
     frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;
     picture-in-picture" allowfullscreen></iframe>
    </div>
</body>
</html>

"http://youtube.com/embed/E9grdgOGdJU" 부분에 원하는 동영상을 임베딩할 수 있다.

 

동영상에 마우스 우클릭-copy embed code-복사 하면 된다.

 

실행결과

실행 결과 동영상이 페이지의 크기에 맞게 삽입되었다.

 

 

▶Grid

동일한 크기의 12 column으로 한 행(row)가 구성된다.

1 2 3 4 5 6 7 8 9 10 11 12
1 2 3 4 5 6 7 8 9 10 11 12

그리드를 이용하면 웹페이지의 레이아웃이 수월해짐

 

container class를 이용하면 컨텐츠가 페이지의 중앙에 윈도우 너비의 약 70%정도를 차지하도록 배치된다.

14 column을 삽입하면 어떻게 될까?

실행결과

첫 행에 12column이 배치되고 두번째 행에 2column이 배치되는 것을 확인할 수 있다!

 

container class를 제거하면 컨텐츠가 페이지의 중앙에 윈도우 너비의 100%를 차지하도록 배치된다.

실행결과

 

 

▶반응형 레이아웃

그리드를 이용해 장치에 따라 레이아웃할 수 있는데

밑의 표처럼 미리 정의된 class 속성값을 추가하면 가능하다.

  Phone <=600px Table >600px PC >992px Large PC >1200px
class 속성 s m l xl
container 너비 90% 85% 70% 70%
column 수 12 12 12 12

 

s12 : 화면크기<=600px일 때 한 행을 차지함 <- 스마트폰과 연관된 s

m4 : 600px<화면크기<992px <-table과 연관된 m

l2 : 992~1200px보다 작을 때 <-pc와 연관된 l

x13 : 1200px<= 화면크기

pc화면

폰으로 보았을 때, 태블릿으로 보았을 때 레이아웃 설정이 달라진다 ! 

 

▶Offset

기본적으로 레이아웃은 좌측->우측으로 배치된다.

좌측을 비우고 우측에 배치하고 싶을 때 offset 옵션을 이용한다.

좌측 외부 여백을 증가시켜 우측에 배치하게 되는 것이다.

 

class="col offset-s|m|l|xl-number"

-s,m,l,xl은 장치를 나타냄 / number는 1~11사이의 값을 설정 가능

 

<예시>

실행결과

'WEB > Vue' 카테고리의 다른 글

Materialize(2) - Navbar, Slider  (0) 2021.05.24
Materialize(1) - Button, Table, Card, Navbar  (0) 2021.05.17
슬롯(slot)  (0) 2021.03.15
이벤트 버스 - 관계 없는 컴포넌트 간 통신  (0) 2021.02.27
컴포넌트 정의 및 등록 / 컴포넌트 간의 통신  (0) 2021.01.27
'WEB/Vue' Related Articles more
Comments