티스토리 뷰

Dev.FrontEnd/HTML_CSS

7. Material Design 이해하기 - Grid 편

글쓰는 개발자 _Jbee 2016. 7. 12. 11:34



Material Desgin 

적용하기

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

>>Material Design Get Started>>


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

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

Grid

html code>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    <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>
cs


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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    <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>
cs



Desktop


Tablet>

Mobile>


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



Material Design - Grid 끝.



«   2021/10   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
Total
1,486,218
Today
39
Yesterday
331