1. Google Material IO 사이트에서 웹 템플릿 가져오기
https://material-components.github.io/material-components-web-catalog/#/component/card?type=basic
<div class="mdc-card demo-card">
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0">
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url("https://material-components.github.io/material-components-web-catalog/static/media/photos/3x2/2.jpg");"></div>
<div class="demo-card__primary">
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Our Changing Planet</h2>
<h3 class="demo-card__subtitle mdc-typography mdc-typography--subtitle2">by Kurt Wagner</h3>
</div>
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Visit ten places on our planet that are undergoing the biggest changes today.</div>
</div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button"> <span class="mdc-button__ripple"></span> Read</button>
<button class="mdc-button mdc-card__action mdc-card__action--button"> <span class="mdc-button__ripple"></span> Bookmark</button>
</div>
<div class="mdc-card__action-icons">
<button class="mdc-icon-button mdc-card__action mdc-card__action--icon--unbounded" aria-pressed="false" aria-label="Add to favorites" title="Add to favorites">
<i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
<i class="material-icons mdc-icon-button__icon">favorite_border</i>
</button>
<button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon--unbounded" title="Share" data-mdc-ripple-is-unbounded="true">share</button>
<button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon--unbounded" title="More options" data-mdc-ripple-is-unbounded="true">more_vert</button>
</div>
</div>
</div>2. 참조를 위한 CSS 와 Javascript file CDN 위치 가져오기
https://material.io/develop/web/getting-started
<head>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
3. Report - Card 템플릿 복사해서 Material.io Card 템블릿 생성
4. 복사한 템플릿 내용 조정하여 Row Templates 에 입력
<li class="demo-li #CARD_MODIFIERS#">
<div class="mdc-card demo-card">
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0">
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url("#CARD_IMAGE#");"></div>
<div class="demo-card__primary">
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">#CARD_TITLE#</h2>
<h3 class="demo-card__subtitle mdc-typography mdc-typography--subtitle2">#CARD_SUBTITLE#</h3>
</div>
<div class="demo-card__secondary mdc-typography mdc-typography--body2">#CARD_BODY#</div>
</div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<a href="CARD_LINK" class="mdc-button mdc-card__action mdc-card__action--button"> <span class="mdc-button__ripple"></span> 세부설명</button>
<button class="mdc-button mdc-card__action mdc-card__action--button"> <span class="mdc-button__ripple"></span> 카트담기</button>
</div>
<div class="mdc-card__action-icons">
<button class="mdc-icon-button mdc-card__action mdc-card__action--icon--unbounded" aria-pressed="false" aria-label="Add to favorites" title="Add to favorites">
<i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
<i class="material-icons mdc-icon-button__icon">favorite_border</i>
</button>
<button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon--unbounded" title="Share" data-mdc-ripple-is-unbounded="true">share</button>
<button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon--unbounded" title="More options" data-mdc-ripple-is-unbounded="true">more_vert</button>
</div>
</div>
</div>
</li>
댓글 없음:
댓글 쓰기