React/E-commers App
의류 쇼핑몰 3 | 배경이미지 연결하기
CodeMia
2022. 5. 11. 06:38
이제는 빈 박스 안에 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;