이제는 빈 박스 안에 background image를 넣어보자.
오브젝트에 imageUrl을 추가하고
각 이미지 주소를 연결해 준다.
<img> 태그를 사용하지 않고,
<div /> 태그 안에 Inline style을 이용해서 백그라운드 이미지로 넣어준다.
<div /> 는 셀프 클로즈 태그로 사용한다.
style={{ backgroundImage: url(https://photo.jtbc.joins.com/717164705898.jpg)}}
주소를 다이나믹하게 바꿔준다.
style={{ backgroundImage: `url(${imageUrl})`}}
className을 입력해줘야 이미지가 나온다.
이미지들이 잘 나오는 것을 볼 수 있다.
이미지는 일단 div 태그로 바꿔 놓는다.
const App = () => {
const categories = [
{
id: 1,
title: 'Hats',
},
{
id: 2,
title: 'Jackets',
},
{
id: 3,
title: 'Sneakers',
},
{
id: 4,
title: 'Womens',
},
{
id: 5,
title: 'Mens',
}
]
return (
<div className='categories-container'>
{categories.map(({ title, id, imageUrl }) => (
<div key={id} className='category-container'>
<div
className='background-image'
style={{ backgroundImage: `url(${imageUrl})` }} />
<div className='category-body-container'>
<h2>{title}</h2>
<p>SHOP NOW</p>
</div>
</div>
))}
</div>
)
}
export default App;
'React > E-commers App' 카테고리의 다른 글
| 의류 쇼핑몰 만들기 6 | package-lock.json vs yarn.lock (0) | 2022.05.12 |
|---|---|
| 의류 쇼핑몰 만들기 5 | SASS 2 | 구글 폰트 연결 | (0) | 2022.05.11 |
| 의류 쇼핑몰 만들기 4 | CategoryItem 분리 | (0) | 2022.05.11 |
| 의류 쇼핑몰 만들기 2 | Sass 연결 (0) | 2022.05.10 |
| 의류 쇼핑몰 만들기 1 | Setting Up (0) | 2022.05.10 |
댓글