커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
1줄에 카드 정렬 갯수 증가시키기
undefined주차
허*은
댓글
9
・
추천
0
・
조회수
19
조회수
19
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
안녕하세요 !
1번 //
밑에 보이는 카드를 5개씩 불러오고 싶은데
최대가 4개밖에 안돼더라구요. 그래서 결국 4개로 했고,
margin이나 카드 width를 조절하고,
let temp_html = `<div class="card row-cols-4" style="width: 16rem">
위 코드에서 cols-5로 고쳐도, 갑자기 3개로 바뀌거나 최대 4개까지 밖에 안돼요 !!
--------------
2번 // margin으로 간격을 크게줘서 넓게 배치라도 해보자 했더니 정해진 너비가 있는건지 어느 소량정도만 조정되고 3줄로 또 바뀌더라구요.
--------------
3번 // 불러온 카드내용의 글자를 중간에 정렬하고 싶은데 margin인가 padding을 줬을 때 글씨가 내려오긴 합니다만,
그러면 내용이 긴 카드들도 같이 내려와서 보기 이상해집니다 ㅠㅠ
각각 카드의 내용양에 맞게 중간정렬하고 싶은데 방법이 없을까요?
--------------
문제가 뭘까요..?
<현재사진>
<원하는 사진>
작성한 코드 및 에러 메세지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Corkage Free</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/jsbootstrap/.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link
href="https://fonts.googleapis.com/css2?family=Hahmlet:wght@500&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link
href="https://fonts.googleapis.com/css2?family=Girassol&family=Meddon&display=swap"
rel="stylesheet"
/>
<style>
* {
font-family: "Hahmlet", serif;
}
/*타이틀 라인*/
.icon {
margin-bottom: 24px;
margin-left: -15px;
}
.first-line {
margin-top: 25px;
display: flex;
justify-content: space-between;
}
.first-line > h1 {
font-family: "Girassol", cursive;
font-size: 80px;
}
.first-line2 > input {
width: 300px;
height: 40px;
border-radius: 20px;
}
.first-line > h1 {
margin-left: 50px;
color: #a81201;
}
.first-line2 {
display: flex;
}
body {
background-color: #fefdf9;
margin: 0;
padding: 0;
}
nav {
height: 100px;
box-shadow: 0px 1px 2px #a81201;
}
ul {
list-style: none;
display: flex;
justify-content: center;
}
ul li {
margin: 10px 30px;
font-size: 25px;
}
ul li a {
text-decoration: none;
color: rgb(52, 52, 52);
}
ul li a:hover {
color: #a81201;
font-weight: 900;
}
nav a {
display: flex;
justify-content: flex-end;
margin: 0px 10px;
padding-top: 0px;
color: black;
}
nav a:hover {
color: #a81201;
}
.active {
color: #a81201;
}
/*섹션_탑*/
.sec_top {
/*background-color: green;*/
margin-top: 100px;
padding-left: 200px;
width: 100%;
height: 800px;
}
.sec_top > h2 {
width: 100%;
font-size: 50px;
}
/*섹션_로그인*/
.log_imgtxt > img {
width: 600px;
height: 400px;
float: right;
}
.sec_log {
width: 100%;
}
.log_imgtxt {
border: 1px solid #DDDDDD;
border-radius: 30px;
width: 1500px;
height: 400px;
display: flex;
margin: auto;
overflow: hidden;
text-align: center;
box-shadow: 0 2px 4px 1px #DDDDDD;
}
.log_imgtxt:hover { /*로그인 박스*/
box-shadow: 0 4px 8px 1px #C8C8C8;
border: 3px solid #C8C8C8;
}
.logbtn:hover { /*Let's do it! */
background-color: grey;
color: white;
box-shadow: none;
}
.log_txt {
margin: auto;
box-shadow: none;
}
.log_txt > h2 {
font-size: 50px;
}
.logbtn {
background-color: transparent;
font-size: 20px;
width: 500px;
height: 45px;
border-radius: 30px;
margin-top: 30px;
}
/*섹션_1*/
.sec1 > h2 {
width: 100%;
font-size: 50px;
}
.sec1 > h4 {
width: 100%;
padding-left: 50px;
}
.btns {
margin-top: 20px;
padding-left: 50px;
}
.apiwine {
max-width: 80px;
height: 300px;
margin-top: 20px;
}
.card {
width: 130px;
height: 340px;
margin: 1.8em 2em;
display: flex;
flex-direction: row;
box-shadow: 0px 1px 5px 1px #DDDDDD;
}
.card:hover {
box-shadow: 0px 5px 10px 1px #C8C8C8;
}
.cards {
max-width: 1300px;
margin-top: 30px;
text-align: center;
}
.cards-wrap {
margin: 0 0.5em;
}
.sec1 {
/*border: 3px solid black;*/
margin-top: 100px;
max-width: 3000px;
padding-left: 300px;
}
.morebtn {
position: absolute;
right: 40px;
bottom: 50px;
}
/*디스커버 와인*/
.background-wrap {
background-image: linear-gradient(
0deg,
rgba(0, 0, 0, 0.15),
rgba(0, 0, 0, 0.15)
),
url("https://cdn.discordapp.com/attachments/1036843116294053911/1036843202231160862/wine.jpg");
background-position: center;
width: 100%;
height: 350px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 200px;
}
.txt_img {
display: flex;
flex-direction: column;
color: #fefdf9;
font-size: 50px;
}
</style>
<script>
$(document).ready(function () {
$("#cards-box").empty();
});
function reds() {
$("#cards-box").empty();
$.ajax({
type: "GET",
url: "https://api.sampleapis.com/wines/reds/?_limit=12",
data: {},
success: function (response) {
let rows = response;
for (let i = 0; i < rows.length; i++) {
let winery = rows[i]["winery"];
let wine = rows[i]["wine"];
let average = rows[i]["rating"]["average"];
let location = rows[i]["lacation"];
let image = rows[i]["image"];
let temp_html = `<div class="card row-cols-4" style="width: 16rem">
<img src="${image}" class="card-img-top apiwine" alt="..." />
<div class="card-body">
<div class="col">
<div class="w-card">
<div class="winetxt">
<h5 class="card-title">${wine}</h5>
<p class="card-text">${winery}</p>
</div>
<div class="morebtn">
<button type="button" class="btn btn-outline-secondary">More...</button>
</div>
</div>
</div>
</div>
</div>`;
$("#cards-box").append(temp_html);
}
},
});
}
function whites() {
$("#cards-box").empty();
$.ajax({
type: "GET",
url: "https://api.sampleapis.com/wines/whites/?_limit=12",
data: {},
success: function (response) {
let rows = response;
for (let i = 0; i < rows.length; i++) {
let winery = rows[i]["winery"];
let wine = rows[i]["wine"];
let average = rows[i]["rating"]["average"];
let location = rows[i]["lacation"];
let image = rows[i]["image"];
let temp_html = `<div class="card row-cols-4" style="width: 16rem">
<img src="${image}" class="card-img-top apiwine" alt="..." />
<div class="card-body">
<div class="col">
<div class="w-card">
<div class="winetxt">
<h5 class="card-title">${wine}</h5>
<p class="card-text">${winery}</p>
</div>
<div class="morebtn">
<button type="button" class="btn btn-outline-secondary">More...</button>
</div>
</div>
</div>
</div>
</div>`;
$("#cards-box").append(temp_html);
}
},
});
}
function rose() {
$("#cards-box").empty();
$.ajax({
type: "GET",
url: "https://api.sampleapis.com/wines/rose/?_limit=12",
data: {},
success: function (response) {
let rows = response;
for (let i = 0; i < rows.length; i++) {
let winery = rows[i]["winery"];
let wine = rows[i]["wine"];
let average = rows[i]["rating"]["average"];
let location = rows[i]["lacation"];
let image = rows[i]["image"];
let temp_html = `<div class="card row-cols-4" style="width: 16rem">
<img src="${image}" class="card-img-top apiwine" alt="..." />
<div class="card-body">
<div class="col">
<div class="w-card">
<div class="winetxt">
<h5 class="card-title">${wine}</h5>
<p class="card-text">${winery}</p>
</div>
<div class="morebtn">
<button type="button" class="btn btn-outline-secondary">More...</button>
</div>
</div>
</div>
</div>
</div>`;
$("#cards-box").append(temp_html);
}
},
});
}
function sparkling() {
$("#cards-box").empty();
$.ajax({
type: "GET",
url: "https://api.sampleapis.com/wines/sparkling/?_limit=12",
data: {},
success: function (response) {
let rows = response;
for (let i = 0; i < rows.length; i++) {
let winery = rows[i]["winery"];
let wine = rows[i]["wine"];
let average = rows[i]["rating"]["average"];
let location = rows[i]["lacation"];
let image = rows[i]["image"];
let temp_html = `<div class="card row-cols-4" style="width: 16rem">
<img src="${image}" class="card-img-top apiwine" alt="..." />
<div class="card-body">
<div class="col">
<div class="w-card">
<div class="winetxt">
<h5 class="card-title">${wine}</h5>
<p class="card-text">${winery}</p>
</div>
<div class="morebtn">
<button type="button" class="btn btn-outline-secondary">More...</button>
</div>
</div>
</div>
</div>
</div>`;
$("#cards-box").append(temp_html);
}
},
});
}
</script>
</head>
<body>
<div></div>
<nav>
<div class="first-line">
<h1>Corkage Free
<svg class="icon" id="Flat" height="80" viewBox="0 0 512 512" width="80" xmlns="http://www.w3.org/2000/svg">
<path d="m80 264s-16-16-16-56l24 8s0-40 48-56v32s32-8 64 0c0 0-8 40-32 56l32 16s-24 40-72 8v32s-32-16-48-40z"
fill="#818a55"/>
<path d="m151.519 221.266a8 8 0 0 0 -10.253-4.785c-26.539 9.651-61.538 28.629-77.561 64.236a88.82 88.82 0 0 0 -7.715 30.254 109.368 109.368 0 0 0 -25.226 1.129 8 8 0 0 0 2.472 15.8c49.619-7.757 69.223 23.254 71.174 26.626a8.153 8.153 0 0 0 .364.9 8.02 8.02 0 0 0 14.859-5.947c-.979-3.168-8.075-14.864-22.283-24.521a81.155 81.155 0 0 0 -25.477-11.4 72.551 72.551 0 0 1 6.8-27.112c11.183-24.1 34.082-42.579 68.059-54.934a8 8 0 0 0 4.787-10.246z"
fill="#ab6647"/>
<path d="m384 232v240a16 16 0 0 1 -16 16h-128a16 16 0 0 1 -16-16v-240c0-56 56-80 56-80v-80h-8v-48h64v48h-8v80s56 24 56 80z"
fill="#4f5659"/>
<path d="m424 460.664v-100.664a8 8 0 0 0 -16 0v100.664a81.156 81.156 0 0 1 -40 27.336h96a81.156 81.156 0 0 1 -40-27.336z"
fill="#e8edf1"/>
<path d="m280 120h48v32h-48z" fill="#6a7073"/>
<path d="m256 280h96v144h-96z" fill="#6a7073"/>
<path d="m480 296c0 48-40 72-64 72s-64-24-64-72 24-112 24-112h80s24 64 24 112z" fill="#e8edf1"/>
<g fill="#931237">
<path d="m480 296c0 48-40 72-64 72s-64-24-64-72a221.508 221.508 0 0 1 3.73-37.64l22.042-6.3a32 32 0 0 1 26.54 4.144l20.237 13.496a32 32 0 0 0 32.061 2l20.21-10.105a214.787 214.787 0 0 1 3.18 34.405z"/>
<circle cx="256" cy="456" r="32"/>
<circle cx="192" cy="456" r="32"/>
</g>
<circle cx="224" cy="400" fill="#720e2a" r="32"/>
<circle cx="160" cy="400" fill="#720e2a" r="32"/>
<circle cx="128" cy="456" fill="#931237" r="32"/>
<circle cx="96" cy="400" fill="#720e2a" r="32"/>
<circle cx="192" cy="344" fill="#931237" r="32"/>
<circle cx="128" cy="344" fill="#931237" r="32"/>
<path d="m256 256a8 8 0 0 1 -8-8v-16c0-17.3 8.039-33.248 23.249-46.109a8 8 0 0 1 10.33 12.218c-11.664 9.864-17.579 21.266-17.579 33.891v16a8 8 0 0 1 -8 8z"
fill="#6a7073"/>
<path d="m336 24v48h-8v48h-48v-48h-8v-48z" fill="#931237"/>
</svg>
</h1>
<div class="first-line2">
<input
class="form-control me-2"
type="search"
placeholder="🔍search any wine"
/>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
class="bi bi-person-circle"
viewBox="0 0 16 16"
>
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
<path
fill-rule="evenodd"
d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"
/>
</svg>
</a>
</div>
</div>
<ul>
<li><a href="#" class="active">Wines</a></li>
<li><a href="/community">Community</a></li>
</ul>
</nav>
<main>
<section class="sec_top">
<h2>What's new</h2>
<h4>Updated every Thursday</h4>
<h2>
<button type="button" class="btn btn-outline-danger">Red</button>
<button type="button" class="btn btn-outline-danger">White</button>
<button type="button" class="btn btn-outline-danger">Rose</button>
<button type="button" class="btn btn-outline-danger">
Sparkling
</button>
</h2>
</section>
<section class="sec_log">
<div class="log_imgtxt">
<img src="https://www.farmersalmanac.com/wp-content/uploads/2018/02/Cheers-Champagne-New-Years-as_262292829.jpeg"
style="vertical-align:middle;">
<div class="log_txt" stlye="display: flex; text-align: center">
<p>
<h2>Share your love of Wine</h2></p>
<h4>Give your friend 10% off wine in CorkageFree.</h4>
<h4>Once they order, you'll get a discount too!</h4>
<div>
<button class="logbtn">Let's do it!</button>
</div>
</div>
</div>
</section>
<section class="sec1">
<h2>
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="#a81201"
class="bi bi-bookmark-star-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M2 15.5V2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.74.439L8 13.069l-5.26 2.87A.5.5 0 0 1 2 15.5zM8.16 4.1a.178.178 0 0 0-.32 0l-.634 1.285a.178.178 0 0 1-.134.098l-1.42.206a.178.178 0 0 0-.098.303L6.58 6.993c.042.041.061.1.051.158L6.39 8.565a.178.178 0 0 0 .258.187l1.27-.668a.178.178 0 0 1 .165 0l1.27.668a.178.178 0 0 0 .257-.187L9.368 7.15a.178.178 0 0 1 .05-.158l1.028-1.001a.178.178 0 0 0-.098-.303l-1.42-.206a.178.178 0 0 1-.134-.098L8.16 4.1z"/>
</svg>
Recommend
</h2>
<h4>Updated every Thursday</h4>
<div class="btns">
<h2>
<button onclick="reds()" type="button" class="btn btn-outline-danger">Red</button>
<button onclick="whites()" type="button" class="btn btn-outline-danger">White</button>
<button onclick="rose()" type="button" class="btn btn-outline-danger">Rose</button>
<button onclick="sparkling()" type="button" class="btn btn-outline-danger">Sparkling</button>
</h2>
</div>
<!--SEC1 카드만들기-->
<div class="container cards-wrap" id="cards-empty">
<div class="cards row" id="cards-box">
</div>
</div>
</section>
</main>
<p></p>
<div class="text-on-img">
<div class="background-wrap">
<div class="txt_img">
<span>Discover the Right Wine</span>
</div>
</div>
</div>
</body>
</html>
댓글 알림
