Dev

Vuetify를 위한 Materialize 공부

January 6, 2019

Vuetify를 위한 Materialize 공부

Vuetify를 위한 Materialize 공부

<<Materialize Tutorial – YouTube>>을 진행하면서 알게된 내용을 정리한 내용 입니다. 자세한 사항은 앞의 링크를 참고하세요.

tl;dr

Materialize를 공부하는 이유는 Vue.js의 CSS 프레임워크에 대한 이해도를 조금 높이고 싶었기 때문이다. 나는 개인적으로 대부분의 CSS를 Bootstrap을 사용했다. 요즘은 CSS 유틸리티등을 사용하는 경향도 있긴 하지만, 서버쪽 업무를 진행했던 입장에서 가장 유명하고 많은 자료를 제공하는 Bootstrap이외에는 별다른 관심이 없었다. 회사의 홈페이지 개선 작업을 하면서 CSS와 관련된 내용을 조사하게 되었고, Materialize에 대해서 흥미가 생겼다. 또한 Vue.js에서 Vuetify라는 Materialize 기반의 패키지를 많이 사용한다고 해서 Vuetify를 공부하기 전에 Materialize을 가볍게 학습하였고, 그 내용을 간단하게 요약하였다.

설정

  • Materializef를 사용하기 위해선 CSS, 아이콘, jQuery를 포함시켜야 한다.
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">    
    <title>Learning Materialize</title>
</head>
<body>

<h1>Hey, sigmadream!</h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

Basic Text Style

  • Materialize은 12열(col)을 적용한 반응형 그리드 시스템을 사용한다. 그리드는 페이지의 레이아웃을 쉽게 정렬 할 수 있도록 도와준다. container 클래스는 그리드의 일부는 아니지만 내용 배치에 중요한 것으로 너비(width)의 70%로 설정된다. 대부분의 경우 HTML의 본문을 담기 위해서 container를 사용한다.
  • flow-text는 페이지의 요소가 유동적으로 크기 조정되는 동안 텍스트는 고정 된 크기를 유지하는 것을 개선하기 위한 것으로 텍스트 크기와 선 높이를 유동적으로 조정하여 사용자가 쉽게 읽을 수 있도록 하는 것이다. 넓이는 45-80자 사이로 유지되고 높이 배율은 작은 화면에서 더 커진다.
<div class="container">
    <h1>Hey, ninjas!</h1>
  <h2>h2 title</h2>
  <h3>h3 title</h3>
  <h4>h4 title</h4>
  <h5>h5 title</h5>
  <h6>h6 title</h6>
  <p>this is a paragraph</p>
  <p class="flow-text">This is flow text</p>
</div>

Hiding Content

  • hideshow 클래스는 특정 화면 크기에서 콘텐츠를 숨기거나 표시할 때 사용하는 클래스다. small은 모바일, med는 태블릿, large는 데스크탑을 뜻한다.
<div class="container">
  <h4 class="hide">Hide me on all screen sizes</h4>
  <h4 class="hide-on-small-only">Hide me on small screen sizes</h4>
  <h4 class="hide-on-med-only">Hide me on medium screen sizes</h4>
  <h4 class="hide-on-large-only">Hide me on large screen sizes</h4>
  <h4 class="hide-on-med-and-down">Hide me on medium & small screen sizes</h4>
  <h4 class="hide-on-med-and-up">Hide me on medium and large screen sizes</h4>
  <h4 class="show-only-on-small">Only show me on small screens</h4>
</div>

Colours

  • Material에서 사용하는 색상은 이 곳에서 확인 할 수 있다.
<div class="container">
  <h5 class="light-blue darken-1">Be yourself, everyone else is already taken</h5>
  <h5 class="orange lighten-4">We are all in the gutter, but some of us are looking at the stars</h5>
  <h5 class="purple darken-3 white-text">To live is the rarest thing in the world. Most people exist, that is all</h5>
  <h5 class="teal darken-2 yellow-text text-lighten-3">Experience is simply the name we give our mistakes</h5>
  <h5 class="yellow lighten-3 purple-text text-darken-2">Always forgive your enemies - nothing annoys them so much</h5>
</div>

Text Formatting

  • container grey lighten-2 box valign-wrapper에서 grey lighten-2는 배경과 글자의 색상을 뜻하며,valign-wrapper은 세로로 정렬하는 컨테이너에 클래스에 추가하면 쉽게 세로로 가운데에 배치 할 수 있다.
  • truncate는 긴 텍스트를 자르면서 줄임표로 표시하는 것이다.
<div class="container">
  <h5 class="center-align">Center alignment</h5>
  <h5 class="left-align">Left alignment</h5>
  <h5 class="right-align">Right alignment</h5>
</div>

<div class="container grey lighten-2 valign-wrapper">
    <h5>Vertical alignment</h5>
</div>

<div class="container">
  <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec sem dictum, consectetur ex vitae, feugiat quam. Sed quis sodales urna. Donec tincidunt faucibus diam a ullamcorper.</p>
</div>

Button

  • waves-effect는 모든 요소에 적용 할 수 있다. 클릭하게 되면 해당 객체가 반응한다. pulse는 주의를 집중하기 위해서 사용하는 것으로 플로팅 버튼만 적용할 수 있다.
<div class="container">
  <h4>Buttons</h4>
  <a href="#" class="btn waves-effect waves-light">Normal button</a>
  <a href="#" class="btn-small">Small button</a>
  <a href="#" class="btn-large">Large button</a>
  <a href="#" class="btn indigo waves-effect waves-light">Indigo button</a>
  <a href="#" class="btn disabled">Disabled button</a>
  <h4>Floating button</h4>
  <a href="#" class="btn-floating pulse pink"></a>
  <h4>Other elements</h4>
  <div class="btn">I am a div tag</div>
</div>

Icons

<div class="container">
    <h4>Icons</h4>
    <i class="material-icons red-text">error</i>
    <i class="material-icons yellow-text text-darken-2">warning</i>
    <i class="material-icons grey-text">cloud</i>
    <i class="material-icons light-blue-text">folder</i>
    <h4>Icons on Buttons</h4>
    <a href="#" class="btn indigo">
        <span>Send</span>
        <i class="material-icons right">send</i>
    </a>
    <a href="#" class="btn pink waves-effect waves-light">
        <span>Email</span>
        <i class="material-icons left">email</i>
    </a>
    <h4>Icons on Floating Buttons</h4>
    <a href="#" class="btn-floating light-blue pulse">
        <i class="material-icons">add</i>
    </a>
    <a href="#" class="btn-floating red pulse">
        <i class="material-icons">remove</i>
    </a>
    <a href="#" class="btn-floating orange pulse">
        <i class="material-icons">edit</i>
    </a>
</div>

Responsive Grid

  • 그리드는 12 개의 열(columns)을 사용할 수 있다. 브라우저의 크기에 관계없이이 열은 항상 동일한 너비를 갖는다.
  • 열(column)을 만들기 위해 내부 divcol 클래스를 추가하면 된다.
  • s는 모바일, m은 태블릿, l은 데스크탑, xl은 1200px이상의 데스크탑을 뜻한다.
<div class="container">
    <h4>Grids</h4>
    <div class="row">
        <div class="col s3">content</div>
        <div class="col s3">content</div>
        <div class="col s3">content</div>
        <div class="col s3">content</div>
    </div>
    <div class="row">
        <div class="col s6 m3">content</div>
        <div class="col s6 m3">content</div>
        <div class="col s6 m3">content</div>
        <div class="col s6 m3">content</div>
    </div>
    <div class="row">
        <div class="col s12 m6 l4 xl2">content</div>
        <div class="col s12 m6 l4 xl2">content</div>
        <div class="col s12 m6 l4 xl2">content</div>
        <div class="col s12 m6 l4 xl2">content</div>
        <div class="col s12 m6 l4 xl2">content</div>
        <div class="col s12 m6 l4 xl2">content</div>
    </div>
    <div class="row">
        <div class="col s12 m8">content</div>
        <div class="col s12 m4">content</div>
        <div class="col s12 m4">content</div>
        <div class="col s12 m8">content</div>
    </div>
</div>

Depth & Shadows

  • z-depth를 사용하면 그림자 효과를 쉽게 적용 할 수 있다. z-0은 기본적으로 그림자를 제거하는 데 사용 할 수 있다.
<style>
    .col > div{
        background: lightblue;
        height: 120px;
    }
</style>

<div class="container">
    <h4>Shadows & Depth</h4>
    <div class="row">
        <div class="col s2">
            <div></div>
        </div>
        <div class="col s2">
            <div class="z-depth-1"></div>
        </div>
        <div class="col s2">
            <div class="z-depth-2"></div>
        </div>
        <div class="col s2">
            <div class="z-depth-3"></div>
        </div>
        <div class="col s2">
            <div class="z-depth-4"></div>
        </div>
        <div class="col s2">
            <div class="z-depth-5"></div>
        </div>
    </div>
</div>

  • navbar-fixed는 탐색 바를 고정할 때 사용하며, 내부 구성 요소는 container를 사용하길 권장하며 ul을 사용하여 항목을 추가한다.
  • data-* 속성을 사용해서 sidenav와 연결할 수 있다.
<div class="navbar-fixed">
  <nav class="nav-wrapper indigo">
    <div class="container">
      <a href="#" class="brand-logo">Site Title</a>
      <a href="#" class="sidenav-trigger" data-target="mobile-links">
        <i class="material-icons">menu</i>
      </a>
      <ul class="right hide-on-med-and-down">
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="" class="btn white indigo-text">Login</a></li>
      </ul>
    </div>
  </nav>
</div>

<ul class="sidenav" id="mobile-links">
  <li><a href="">Home</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Contact</a></li>
</ul>

Cards

  • card 클래스를 사용하고 내부를 card-{image, content, action}등으로 나눠서 카드 형태의 모양을 구성할 수 있다. 자세한 사항은 Cards를 참고하자.
<div class="container">
  <h2>Cards</h2>
  <div class="row">
    <div class="col s12 l6">
      <div class="card">
        <div class="card-image">
          <img src="https://dummyimage.com/600x400/000/fff" alt="">
          <a href="" class="halfway-fab btn-floating pink pulse">
            <i class="material-icons">favorite</i>
          </a>
        </div>
        <div class="card-content">
          <span class="card-title">Mango & Chickpea Curry</span>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis aliquam orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </div>
        <div class="card-action">
          <a href="">More details</a>
          <a href="">View Ingredients</a>
        </div>
      </div>
    </div>
    <div class="col s12 l6">
      <div class="card">
        <div class="card-image">
          <img src="https://dummyimage.com/600x400/000/fff" alt="">
          <a href="" class="halfway-fab btn-floating pink pulse">
            <i class="material-icons">favorite</i>
          </a>
        </div>
        <div class="card-content">
          <span class="card-title">Rainbow Pasta Salad</span>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis aliquam orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </div>
        <div class="card-action">
          <a href="">More details</a>
          <a href="">View Ingredients</a>
        </div>
      </div>
    </div>
  </div>
</div>

Collections

  • 목록을 그룹화하여 표현하는 것으로 collection 클래스를 사용하고, 그룹의 세부 목록은 collection-item 클래스를 적용하면 된다.
<div class="container">
  <h2>Collections</h2>
  <ul class="collection with-header">
    <li class="collection-header"><h4>Customers</h4></li>
    <li class="collection-item avatar">
      <i class="material-icons circle blue">person</i>
      <span class="title">Ryu</span>
      <p class="grey-text">black-belt</p>
      <a href="" class="secondary-content">
        <i class="material-icons light-blue-text">email</i>
      </a>
    </li>
    <li class="collection-item avatar">
      <i class="material-icons circle blue">person</i>
      <span class="title">Yoshi</span>
      <p class="grey-text">orange-belt</p>
      <a href="" class="secondary-content">
        <i class="material-icons light-blue-text">email</i>
      </a>
    </li>
    <li class="collection-item avatar">
      <i class="material-icons circle blue">person</i>
      <span class="title">Crystal</span>
      <p class="grey-text">brown-belt</p>
      <a href="" class="secondary-content">
        <i class="material-icons light-blue-text">email</i>
      </a>
    </li>
    <li class="collection-item">Mario</li>
    <li class="collection-item">Luigi</li>
    <li class="collection-item">Bowser</li>
  </ul>
</div>

Modals

  • 모달을 통해 대화 상자, 확인 메시지, 사용자에게 알려야 할 사항 등에 적용할 때 모달 id를 트리거 링크에 추가하면 된다. 모달의 닫기 버튼은 modal-close 클래스만 적용하면 된다.
<div class="container">
  <h2>Modals</h2>

  <a class="btn orange modal-trigger" href="#terms">Terms & Conditions</a>

  <div id="terms" class="modal">
    <div class="modal-content">
      <h4>Terms & Conditions</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae finibus mi, egestas dignissim metus. Fusce tempus elementum metus. Donec eu nibh fringilla, dignissim arcu eu, ultrices ante. Cras consectetur risus id mi condimentum aliquam.</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close btn orange">Agree</a>
    </div>
  </div>

</div>

<script>
  $(document).ready(function(){
    $('.modal').modal();
  });
</script>

Project

  • HTML5에서 제공하는 <header>태그에 background , @media등은 별도의 CSS로 적용 가능하다.
<style>
    header {
        background: url(https://dummyimage.com/wqxga) center;
        background-size: cover;
        min-height: 1000px;
    }
    @media screen and (max-width: 670px){
        header{
            min-height: 500px;
        }
    }
</style>

...

<header>
    <nav class="nav-wrapper transparent">
        <div class="container">
            <a href="#" class="brand-logo">Photo SigmaDREAM</a>
            <ul class="right hide-on-med-and-down">
                <li><a href="#">Photo's</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>
</header>
  • 기본적인 nav를 사용해서 네비게이션바를 작성하는 코드로, sidebar를 사용하기 위해서 jQuery와 연동해야 된다.
<header>
    <nav class="nav-wrapper transparent">
        <div class="container">
            <a href="#" class="brand-logo">Photo SigmaDREAM</a>
            <a href="#" class="sidenav-trigger" data-target="mobile-menu">
                <i class="material-icons">menu</i>
            </a>
            <ul class="right hide-on-med-and-down">
                <li><a href="#">Photo's</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <ul class="sidenav grey lighten-2" id="mobile-menu">
                <li><a href="#">Photo's</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>
</header>

<script>
    $(document).ready(**function**(){
        $('.sidenav').sidenav();
    });
</script>
  • pushpull을 사용한 콘텐츠 배치방법은 아래를 참고하자.
<style>
...
.section {
    padding-top: 4vw;
    padding-bottom: 4vw;
}
</style>

<section class="container section" id="photos">
    <div class="row">
        <div class="col s12 l4">
            <img src="https://dummyimage.com/xga" alt="" class="responsive-img materialboxed">
        </div>
        <div class="col s12 l6 offset-l1">
            <h2 class="indigo-text text-darken-4">Portraits</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
    </div>
    <div class="row">
        <div class="col s12 l4 push-l7 offset-l1">
            <img src="https://dummyimage.com/xga" alt="" class="responsive-img materialboxed">
        </div>
        <div class="col s12 l6 pull-l5 right-align offset-l1">
            <h2 class="indigo-text text-darken-4">Cityscapes</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
    </div>
    <div class="row">
        <div class="col s12 l4">
            <img src="https://dummyimage.com/xga" alt="" class="responsive-img materialboxed">
        </div>
        <div class="col s12 l6 offset-l1">
            <h2 class="indigo-text text-darken-4">Nature</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
    </div>
</section>

<script>
    $(document).ready(**function**(){
        $('.sidenav').sidenav();
        $('.materialboxed').materialbox();
    });
</script>
  • parallax 효과를 내기 위해선 상위 div 태그에 parallax-container를 적용하고 하위 divparallax를 적용하면 된다.
<div class="parallax-container">
    <div class="parallax">
        <img src="https://dummyimage.com/wqxga" alt="" class="responsive-img">
    </div>
</div>
  • tabs 클래스를 적용하면 손쉽게 Tabs 형태의 매뉴를 구성할 수 있다.
<section class="container section" id="services">
    <div class="row">
        <div class="col s12 l4">
            <h2 class="indigo-text text-darken-4">Ehat I do...</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
        <div class="col s12 l6 offset-l2">
            <ul class="tabs">
                <li class="tab col s6">
                    <a href="#photography" class="indigo-text text-darken-4">Photograph</a>
                </li>
                <li class="tab col s6">
                    <a href="#editing" class="indigo-text text-darken-4">Editing</a>
                </li>
            </ul>
            <div class="col s12" id="photography">
                <p class="flow-text indigo-text text-darken-4">PHOTOGRAPHY</p>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
            <div class="col s12" id="editing">
                <p class="flow-text indigo-text text-darken-4">EDITING</p>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
        </div>
    </div>
</section>

<script>
    $(document).ready(**function**(){
        $('.sidenav').sidenav();
        $('.materialboxed').materialbox();
        $('.parallax').parallax();
        $('.tabs').tabs();
    });
</script>

  • footbox는 페이지의 아랫 부분에 있도록 페이지의 구조를 HTML5 태그 3개(<header>, <main>, <footer>) 이내로 유지하는 것을 추천한다.
<footer class="page-footer grey darken-3">
    <div class="container">
        <div class="row">
            <div class="col l6 s12">
                <h5>About Me</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
            </div>
            <div class="col l4 offset-l2 s12">
                <h5 class="white-text">Connect</h5>
                <ul>
                    <li><a class="grey-text text-lighten-3" href="#">Facebook</a></li>
                    <li><a class="grey-text text-lighten-3" href="#">Twitter</a></li>
                    <li><a class="grey-text text-lighten-3" href="#">Linked In</a></li>
                    <li><a class="grey-text text-lighten-3" href="#">Instagram</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer-copyright grey darken-4">
        <div class="container center-align">&copy; 2018 Photo Ninja</div>
    </div>
</footer>
  • tooltipped 클래스와 jQuery를 사용하여 툴팁을 사용할 수 있다. 툴팁은 주로 그래픽 요소에 대한 작은 텍스트 알림이다.
  • scrollspy는 특정 부분을 화면의 가운데에 위치시키는 것 jQuery의 플러그인 기능으로, 해당 영역으로 스크롤된다.
<script>
    $(document).ready(**function**(){
        $('.sidenav').sidenav();
        $('.materialboxed').materialbox();
        $('.parallax').parallax();
        $('.tabs').tabs();
        $('.datepicker').datepicker({
            disableWeekends: **true**,
            yearRange: 1
        });
        $('.tooltipped').tooltip();
        $('.scrollspy').scrollSpy();
    });
</script>

...

<li><a href="#" class="tooltipped btn-floating btn-small indigo darken-4" data-position="bottom" data-tooltip="Instagram">
    <i class="fab fa-instagram"></i>
</a></li>
<li><a href="#" class="tooltipped btn-floating btn-small indigo darken-4" data-position="bottom" data-tooltip="Facebook">
    <i class="fab fa-facebook"></i>
</a></li>
<li><a href="#" class="tooltipped btn-floating btn-small indigo darken-4" data-position="bottom" data-tooltip="Twitter">
    <i class="fab fa-twitter"></i>
</a></li>

<section class="container section scrollspy" id="photos">
...
</section>