예제를 보며 코드를 작성하던 중, 질문이 생겨서 글 남깁니다.
다름이 아니라, 모든 상품 리스트를 보면, 가로로 정렬이 되어있는데, 해결책을 찾지 못했습니다. 현재 상태는 이미지 첨부하였으며, 코드는 다음과 같습니다.
products를 ajax로 불러오기보다, 선언해놓고 틀을 만들고 ajax를 사용하려고 다음과 같이 코드를 작성하였습니다.
<script>에는 다음과 같은 코드가 있습니다.
products.forEach(function(a) {
var template =
`<div class="item">
<div class="item-body">
<h5 class="title">${a.product_name}</h5>
<p class="price">${'금액 : ' + a.price}</p>
</div>
</div>`
$('.item-list').append(template)
})
<body>태그에는 다음과 같은 코드를 작성하였습니다.
<div class = "context container">
<div class = "item-list">
<h3>모든 상품 리스트</h3>
</div>
<div id = 'basket'>
<h3>장바구니</h3>
</div>
</div>
item-list에 template를 추가해주며 가로정렬을 원하였지만, 세로로 정렬되었습니다. 답변 기다리고 있겠습니다. 감사합니다!