menuMDUI문서
color_lens
머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 mdui 2가 출시되었습니다. mdui 2 개발 문서 보기.

카드

카드는 특정 데이터 세트가 포함된 컨테이너입니다. 사진, 텍스트, 링크 등 다양한 관련 정보를 포함할 수 있습니다.

호출 방식

카드 컴포넌트는 순수 CSS로 작성되었으며, HTML 코드만 작성하면 바로 적용됩니다.

관련 읽기

Material Design 가이드라인: 컴포넌트 - 카드

스타일

전체 HTML 구조

아래는 카드에서 미리 정의된 스타일 요소들이 모두 포함된 전체 HTML 구조입니다.

codeplay_arrow
예시
<div class="mdui-card">

  <!-- 카드의 헤더. 아바타, 제목, 부제목을 포함합니다. -->
  <div class="mdui-card-header">
    <img class="mdui-card-header-avatar" src="avatar.jpg"/>
    <div class="mdui-card-header-title">Title</div>
    <div class="mdui-card-header-subtitle">Subtitle</div>
  </div>

  <!-- 카드의 미디어 콘텐츠. 이미지, 비디오 등의 미디어 콘텐츠와 제목, 부제목을 포함할 수 있습니다. -->
  <div class="mdui-card-media">
    <img src="card.jpg"/>

    <!-- 카드에 하나 이상의 메뉴 버튼을 포함할 수 있습니다. -->
    <div class="mdui-card-menu">
      <button class="mdui-btn mdui-btn-icon mdui-text-color-white">
        <i class="mdui-icon material-icons">share</i>
      </button>
    </div>
  </div>

  <!-- 카드의 제목과 부제목 -->
  <div class="mdui-card-primary">
    <div class="mdui-card-primary-title">Title</div>
    <div class="mdui-card-primary-subtitle">Subtitle</div>
  </div>

  <!-- 카드의 콘텐츠 -->
  <div class="mdui-card-content">Listen to your favorite artists and albums anytime, anywhere, online or offline.</div>

  <!-- 카드의 버튼 -->
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
    <button class="mdui-btn mdui-btn-icon mdui-float-right">
      <i class="mdui-icon material-icons">expand_more</i>
    </button>
  </div>

</div>

미디어 요소 위에 오버레이

<div class="mdui-card-media"></div> 내에 <div class="mdui-card-media-covered"></div>를 추가하고, 미디어 요소 위에 오버레이할 내용을 해당 요소에 넣습니다.

codeplay_arrow
예시
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>
codeplay_arrow
예시
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
      <div class="mdui-card-actions">
        <button class="mdui-btn mdui-ripple mdui-ripple-white">action 1</button>
        <button class="mdui-btn mdui-ripple mdui-ripple-white">action 2</button>
      </div>
    </div>
  </div>
</div>

.mdui-card-media-covered에 .mdui-card-media-covered-top 클래스를 추가하면 오버레이 레이어가 미디어 요소의 상단에 위치하게 됩니다.

codeplay_arrow
예시
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-top">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

.mdui-card-media-covered에 .mdui-card-media-covered-transparent 클래스를 추가하면 오버레이 레이어가 투명 배경을 가집니다.

codeplay_arrow
예시
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-transparent">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

.mdui-card-media-covered에 .mdui-card-media-covered-gradient 클래스를 추가하면 오버레이 레이어가 그라데이션 배경을 가집니다.

codeplay_arrow
예시
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-gradient">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

버튼 수직 정렬

<div class="mdui-card-actions"></div>에 .mdui-card-actions-stacked 클래스를 추가하면 버튼을 수직으로 정렬할 수 있습니다.

codeplay_arrow
예시
<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
  </div>
  <div class="mdui-card-actions mdui-card-actions-stacked">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

CSS 클래스 목록

클래스 이름설명
.mdui-card카드 컴포넌트를 정의합니다.
.mdui-card-header카드의 헤더를 정의합니다.
.mdui-card-header-avatar카드 헤더의 아바타를 정의합니다.
.mdui-card-header-title카드 헤더의 제목을 정의합니다.
.mdui-card-header-subtitle카드 헤더의 부제목을 정의합니다.
.mdui-card-media카드 내의 미디어 요소를 정의합니다.
.mdui-card-media-covered미디어 요소 위에 오버레이되는 내용을 정의합니다.
.mdui-card-media-covered-top오버레이 레이어를 미디어 요소 상단에 배치합니다.
.mdui-card-media-covered-transparent오버레이 레이어에 투명 배경을 적용합니다.
.mdui-card-media-covered-gradient오버레이 레이어에 그라데이션 배경을 적용합니다.
.mdui-card-menu카드 오른쪽 상단의 메뉴를 정의합니다.
.mdui-card-primary카드의 제목과 부제목 영역을 정의합니다.
.mdui-card-primary-title카드의 제목을 정의합니다.
.mdui-card-primary-subtitle카드의 부제목을 정의합니다.
.mdui-card-content카드의 콘텐츠를 정의합니다.
.mdui-card-actions카드의 작업 표시줄을 정의합니다.
.mdui-card-actions-stacked작업 표시줄을 수직으로 정렬합니다.
arrow_backPrevious
하단 내비게이션 바
arrow_forwardNext
칩