[Vue.js] #6 카드 컴포넌트 & 카드 리스트 만들기

1. 프로젝트 내에 components/Card.vue 파일 생성

# components/Card.vue

<script>
export default {
  props : {
    imgUrl : String,
    name : String,
    description : String,
  }
}
</script>

<template>
<div class="card">
  <img :src="imgUrl" alt="profile image" class="card__img">
  <h2 class="card__name">{{ name }}</h2>
  <h2 class="card__description">{{ description }}</h2>
</div>
</template>

<style scoped>
.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap : 10px;
  width : 200px;
  height : 250px;
  background-color: aquamarine;
  box-shadow: 1px 1px 10px grey;
}
.card__img {
  width : 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 100%;
  border : solid 2px;
  padding : 5px;
  background-color: white;
}
.card__name{
  font-weight: 700;
}
.card__description{
  font-weight: 300;
}
</style>

 

2. 프로젝트 내에 components/CardList.vue 파일 생성

# components/CardList.vue

<script>
import Card from "./Card.vue"
export default {
  data() {
    return {
      heros: [
        {
          id : 1,
          imgUrl : 'loki.jpg',
          name : "loki",
          description : 'Younger Brother'
        },
        {
          id : 2,
          imgUrl : 'thor.jpg',
          name : "thor",
          description : 'Older Brother'
        }
      ]
    }
  },
  components : { Card }
}
</script>

<template>
  <div class="card-list">
    <Card
      v-for="hero of heros"
      :imgUrl="hero.imgUrl"
      :name="hero.name"
      :description="hero.description"
      :key="hero.id"
    ></Card>
  </div>
</template>

<style>
.card-list{
  display: flex;
  gap : 15px;
}
</style>

 

3. 최상위 컴포넌트 App.vue 수정

# App.vue
<script setup>
import CardList from './components/CardList.vue'
</script>

<template>
  <CardList/>
</template>

<style>
* {
  padding : 0px;
  margin : 0px;
}
</style>

 

4. 원하는 이미지 파일 넣기(loki.png, thor.png)

/public 폴더 밑에 이미지 파일 추가

5. 최종 파일트리

6. dev 서버 돌리기

npm run dev

 

[실행 결과]