Monsters-Rolodex 9 | img src 연결

이미지 연결하기 

 

CardList에 몬스터 카드에 있는 h1 대신 이미지 카드가 나오게 해보자. 

 

 

이미지에 alt 넣기 

우선은 <Img /> 태그에 alt를 넣는다. 

 

 

 

Img source는 robohash에서 가져온다 (바로가기)

https://robohash.org/1?set=set2&size=180x180

set: robohash에서 제공하는 두번째 세트 이미지들 

 

 

string interpolation을 사용해서 {``} src를 작성한다. 

 

 

 

id로 쓰는 숫자 1을 다이나믹하게 바꾼다.

 

 

 

이름과 이메일도 넣어준다

 

 

 

브라우저에 이미지, 이름, 이메일이 나오는 것을 볼 수 있다.

 

 

 

code destructure 하기 

monster.name 또는 monster.id 등 

monster가 계속 반복해서 나오는 것을 볼 수 있다. 

destructuring을 해서 코드를 간단하게 만든다.

 

 

 

중괄호로 감싼 후 { } return을 적어준다. 

 

 

 

destructring을 한 후 monster를 지워준다. 

 

 

 

스타일을 주기 위해 클래스도 추가한다. 

import { Component } from 'react';

import './card-list.styles.css';

class CardList extends Component {

render() {

const { filteredMonsters } = this.props

return (

<div className='card-list'>

{filteredMonsters.map((monster) => {

const { id, name, email } = monster;

return (

<div className='card-container' key={id}>

<img

alt={`monster ${name}`}

src={`https://robohash.org/${id}?set=set2?size=180x180`}

/>

<h2>{name}</h2>

<p>{email}</p>

</div>

)

})}

</div>

)

}

}

export default CardList;

 

 

 

CSS 파일과 연결하기 

card-list.styles.css 파일을 만든다. 

 

 

JSX 파일에 css를 불러온다.

 

 

 

css 내용을 채운다. 

.card-list {

width: 85vw;

margin: 0 auto;

display: grid;

grid-template-columns: 1fr 1fr 1fr 1fr;

grid-gap: 20px;

}

.card-container {

display: flex;

flex-direction: column;

background-color: #e6e2af;

border: 1px solid grey;

border-radius: 5px;

padding: 25px;

cursor: pointer;

-moz-osx-font-smoothing: grayscale;

backface-visibility: hidden;

transform: translateZ(0);

transition: transform 0.25s ease-out;

}

.card-container:hover {

transform: scale(1.05);

}

 

 

 

화면이 잘 나오는 것을 볼 수 있다. 

 

 

 

다음 포스트에서는 card를 컴포넌트로 빼보자.