function app 내부에는
<div className="container">
<div className="row" >
{shoes.map(function(a){return(
<Shoescontent ti={a.title} co={a.content} ig={a.img}></Shoescontent>
)
})}
</div>
</div>
으로 map활용해서 반복문 만들고
컴포넌트는
function Shoescontent (prop){
return(
<div>
<div className="col-md-4">
< img src= {prop.ig} width="80%" />
<h4>{prop.ti}</h4>
<p>{prop.co}</p>
</div>
</div>
)
}
으로 만들어서 작동은 되는 것 확인 했습니다.
(이미지는 data.js에 직접 주소 넣은 다음 빼는 식으로 했습니다)
그런데 이렇게 하니까 가로정렬이 되지 않고 카드 3개가 세로로 나열되어 있었습니다
컴포넌트 가로 정렬로 구글링해서 style={{display: 'flex'}} 이나 style={{display: 'float'}}를 넣어 봤는데도 바뀌지 않아서
왜 그런지, 그리고 가로정렬로 다시 맞추려면 어떻게 해야하는지 알고 싶습니다
