7. Material Design 이해하기 - Grid 편

Material Desgin 

적용하기

Material Design 공식 홈페이지에 한글로 정말 자세히 나와있다.

>>Material Design Get Started>>

Material Design이 제공하는 디자인에 대해 알아보기 전에,

웹사이트의 레이아웃을 결정하고 설계하는데 도움을 주는 Grid System에 대해 먼저 알아보자.

Grid

html code>

    <div class="container">
        <div class="row">
            <div class="col s12"><p>s12</p></div>
        </div>
 
        <div class="row">
            <div class="col s12 m4 l2"><p>s12 m4 l2</p></div>
            <div class="col s12 m4 l8"><p>s12 m4 l8</p></div>
            <div class="col s12 m4 l2"><p>s12 m4 l2</p></div>
        </div>
 
        <div class="row">
            <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
            <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
            <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
            <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
        </div>
    </div>

Bootstrap 을 사용해봤다면 익숙한 사용방법일거라 생각한다.

제공하는 시스템도 거의 동일하다.

데스크탑일 경우에는 Large 에 해당하는 l 값에 숫자를,

태블릿일 경우에는 Medium 에 해당하는 m 값에 숫자를,

모바일일 경우에는 Small 에 해당하는 s 값에 숫자를 추가해준다.

CSS를 약간 적용해서 어떻게 달라지는지 확인해보자.

    <style>
    .col.s12{
        background-color: #ccc;
        border: solid black 1px;
        margin-top: 50px;
    }
    .col.s12.m4.l2{
        background-color: #CE93D8;
        border: solid black 1px;
    }
    .col.s12.m4.l8{
        background-color: #FCAC45;
        border: solid black 1px;
    }
    .col.s12.m6.l3{
        background-color: #42A5F5;
        border: solid black 1px;
    }
    </style>

Desktop

Tablet>

Mobile>

각각 해당하는 출력 device에 맞춰 Grid를 적용한다.

Material Design - Grid 끝.