Front-End/CSS

[Materializecss] 색상, 이미지, Gird, 버튼, 테이블, Card 구성하기

CJun 2021. 6. 2. 16:32
반응형
 

Documentation - Materialize

 

materializecss.com

Materialize 사용방법

 

Materializecss 색상, 정렬

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <style>

    </style>
</head>
<body>
    <div class="teal center-align">
        Lorem ipsum dolor sit amet.
    </div>

    <div class="white-text center-align text-darken-2">
        Lorem ipsum dolor sit amet.
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>

    </script>
</body>
</html>

 

Materializecss 이미지

⭐여기에 상황에 맞게 아이콘을 사용하 실 수 있습니다.

 

Icons - Materialize

 

materializecss.com

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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 src="imgs/vienna.jpg" class="responsive-img circle">
    </div>

    <div class="row">
        <i class="material-icons teal-text">call</i>
    </div>

    <div class="video-container">
        <!-- iframe 태그로 동영상 삽입 -->
        <!-- 유튜브 영상 마우스 오른쪽 클릭 후 소스복사하고 붙여넣으면 끝 -->


    </div>

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

    </script>
</body>
</html>
Materialize Grid

<div class ="container">
        <div class ="row">

            <!-- 한행을 12개를 쓰겠다 => col s12 -->
            <div class="col s1 blue">1</div> 
            <div class="col s1 cyan">2</div>
            <div class="col s1 blue">3</div> 
            <div class="col s1 cyan">4</div> 
            <div class="col s1 blue">5</div> 
            <div class="col s1 cyan">6</div> 
            <div class="col s1 blue">7</div> 
            <div class="col s1 cyan">8</div>
            <div class="col s1 blue">9</div> 
            <div class="col s1 cyan">10</div>
            <div class="col s1 blue">11</div> 
            <div class="col s1 cyan">12</div> 
 
        </div>
    </div>
<div class ="container">
        <div class ="row">
            <div class="col s12 teal"><p>Lorem ipsum dolor sit amet.</p></div>
            <div class="col s12 m4 l2 xl3 blue"><p>Lorem ipsum dolor sit amet.</p></div>
            <div class="col s12 m4 l8 xl6 blue"><p>Lorem ipsum dolor sit amet.</p></div>
            <div class="col s12 m4 l2 xl3 blue"><p>Lorem ipsum dolor sit amet.</p></div>
        </div>
    </div>

 

Offset
: 컬럼을 일정 갯수만큼 좌측에 비우고 배치할때 사용
<!-- Offset : 컬럼을 일정갯수만큼 좌측에 비우고 배치할때 -->
    <div class ="row">
        <!-- flow-text : 글자크기가 반응형으로 나타남 -->
        <div class="col s12 blue white-text"><span class="flow-text">12</span></div>
        <div class="col s6 blue white-text"><span class="flow-text">6</span></div>

        <!-- offset-m4 4칸을 띄운다. -->
        <div class="col s3 m4 offset-m4 blue white-text"><span class="flow-text">offset-m4</span></div>
        <!-- offset-m8 8칸을 띄우고 입력한다. -->
        <div class="col s3 m8 offset-m8 blue white-text"><span class="flow-text">offset-m8</span></div>
    </div>

 

컬럼 순서 바꾸기
push, pull
<!-- 컬럼 순서 바꾸기 push, pull -->
    <div class ="row">
        <!-- 오른쪽으로 가는것이 push 몇칸은 띄어야할지는 m기준으로 작성하였음 -->
        <!-- 왼쪽으로 당기는것이 pull 몇칸은 띄어야할지는 m기준으로 작성하였음 -->
        <div class="col s12 m4 push-m4 blue white-text"><span class="flow-text">1</span></div>
        <div class="col s12 m4 pull-m4 blue white-text"><span class="flow-text">2</span></div>
        <div class="col s12 m4 blue white-text"><span class="flow-text">3</span></div>

    </div>

 

Materializecss 버튼

<!-- 버튼 -->
    <div class="container">
        <div class="row">
            <a class="btn waves-effect waves-light waves-red">wireless</a>

            <!-- flat은 터치하면 색깔이 나게끔 -->
            <a class="btn-flat btn waves-effect waves-light waves-teal"><i class="material-icons left">cloud</i>클라우드</a>
            <!-- floating은 가운데 배치 -->
            <a class="btn-floating btn waves-effect waves-light waves-yellow"><i class="material-icons">wifi</i>와이파이</a>
        
            <button class="btn waves-effect waves-light">보내기<i class="material-icons right">send</i></button>
        
        </div>
    </div>

 

Materializecss table

<!-- 테이블 -->
    <div class="container">
        <table class="striped responsive-table">
            <thead class="blue">
              <tr>
                  <th>Name</th>
                  <th>Item Name</th>
                  <th>Item Price</th>
              </tr>
            </thead>
    
            <tbody>
              <tr>
                <td>Alvin</td>
                <td>Eclair</td>
                <td>$0.87</td>
              </tr>
              <tr>
                <td>Alan</td>
                <td>Jellybean</td>
                <td>$3.76</td>
              </tr>
              <tr>
                <td>Jonathan</td>
                <td>Lollipop</td>
                <td>$7.00</td>
              </tr>
            </tbody>
          </table>
    </div>

 

Materializecss Cards

<!-- Card -->
    <div class="row">
      <div class="col s12 m6">
        <div class="card">
          <div class="card-image">
            <img src="imgs/budapest.jpg">
            <span class="card-title">Card Title</span>
            <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
          </div>
          <div class="card-content">
            <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
          </div>
        </div>
      </div>
    </div>
반응형

'Front-End > CSS' 카테고리의 다른 글

[CSS] Grid 그리드(레이아웃) 정리  (0) 2021.05.24
[CSS] Flexbox(레이아웃) 정리  (0) 2021.05.17
[CSS] Position속성(fixed, relative, absolute, static) 정리  (0) 2021.05.16
[CSS] Box박스 모델 및 글꼴 사용법 정리  (0) 2021.05.14
[CSS] StyleSheet스타일시트 및 선택자 사용법 정리  (0) 2021.05.13

'Front-End/CSS'의 다른글

  • 현재글[Materializecss] 색상, 이미지, Gird, 버튼, 테이블, Card 구성하기

관련글

댓글

티스토리툴바