저는 현재 react로 firebase 강의의 내용을 표현하려고 합니다. 근데 템플릿을 설정하는데 css 디자인이 들어가지 않습니다.
해당 코드
const userInfo = db.collection('product').get().then((res)=>{
res.forEach((doc)=>{
var 템플릿 = `
<div className='product'>
<div className='pic'>
< img src='https://via.placeholder.com/350'></img>
</div>
<div className="content">
<h4>${doc.data().제목}</h4>
<p>2월 17일 발행</p>
<p>${doc.data().가격}원</p>
<p style={{textAlign:'right' ,paddingRight:'10px'}}><span onClick={()=>{;하트변경(!하트)}}>❤</span>{하트 == 1 ? 1 : 0}</p>
</div>
</div>
`;
$('.container').append(템플릿)
})
})
CSS 코드
.product {
display: flex;
padding: 10px;
border-bottom: 1px solid black;
}
.product .pic {
max-width: 200px;
width: 100%;
overflow: hidden;
}
.product .img {
width: 100%;
border-radius: 14px;
object-fit: cover;
}
.product .content {
width: 100%;
text-align: left;
padding-left: 20px;
}
이런 경우에는 어떻게 해야지 템플릿이 들어가도 기존의 css효과를 적용할 수 있나요?
