1. jumbostron 사용 후 example 버튼 대체하여 작성해주신 아래의 박스를 넣었더니 글과 박스가 같은 div영역으로 들어가지 않아서 함께 움직이지 못해 글과 박스의 정렬을 같도록 맞추지 못했습니다. 어떻게 해결할 수 있을까요?
*해결 시도
1) 박스에 적용된 class에 margin-left를 바꿔도 소용이 없었음
2) 박스에 기존 class 이름으로 지정된 class가 없길래 그 이름 그대로 class 만들어서 margin을 조절해도 박스가 움직이지 않음
3) div영역을 계속 바꿔봄(글이랑 박스랑 따로 div 만들어보기도 하고, div영역을 다르게 지정하는 방법은 없나 계속 시도)
결국 박스와 윗 글을 같은 정렬로 맞추는 것 실패
2. card append 실패 - 수업 들으며 배웠던 card append 함수 사용하여 입력한 내용을 반영해주는 카드 추가를 시도하였으나 실패해서 어디가 잘못된건지 궁금합니다.
*해결 시도
1) id="" 지정되지 않은것 체크(#card인데 정작 태그에 id 지정되어있지 않았음 등)
2) 함수가 button에 onclick으로 제대로 기입되어 있는지 체크
3) id이름과 변수 이름이 달라서 아래 {} 안에는 변수 이름을 넣어야 하는데 id이름을 넣은게 있어서 수정
카드 추가 실패
3. 메인 이미지 내의 줄글 두줄을 ```<p>```태그로 줄바꿈 한 것과 과제 예시 사진과 줄간격이 달라서 줄간격을 줄이고 싶었으나 실패했습니다. 어떻게 줄간격을 줄일수 있었을까요?
*해결 시도
1) ```<br>```태그로 줄바꿔보기
2) 가운데정렬 4총사 중(display flex) column과 row를 활용해보고 싶었으나 방법을 잘 모르겠어서 활용하지 못함
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>푸드파이터</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script src="../static/firebase2.js" type="module"></script>
<script>
function makecard() {
let image = $('#img').val();
let title = $('#title').val();
let comment = $('#comment').val();
let star = $('#star').val();
let temp_html = `
<div class="col">
<div class="card h-100">
<img src="${image}">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${star}</p>
<p class="card-text">${comment}</p>
<button type="button" class="card-button">주문하기</button>
</div>
</div>
</div>`;
$('#card').append(temp_html);
}
</script>
<style>
/* 구글 폰트 import url 넣어주세요. */
/* 구글 폰트 CSS rules를 전체 적용해 주세요. */
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
body {
background-color: white;
color: black;
}
.header {
background-size: cover;
background-image:
background-position: right;
height: 650px;
display: flex;
flex-direction: column;
}
.header>h1 {
margin: 0;
font-size: 40px;
}
.header>div {
font-size: 18px;
margin-top: 10px;
}
.form-button {
width: 150px;
height: 40px;
background-color: transparent;
border: 1px solid tr;
color: black;
font-size: 15px;
margin: 20px 10px 0px 0px;
}
.form-button:hover {
border: 2px solid black;
}
.info-button {
margin: 20px 0 0 15px;
height: 40px;
font-size: 14px;
}
.post {
width: 500px;
margin: 20px 0px 1px 0px;
padding: 20px;
box-shadow: 0px 0px 3px 0px transparent;
background-color: wheat;
}
.form-floating input,
.form-floating textarea {
color: black;
background-color: white;
}
.button2 {
display: flex;
justify-content: flex-end;
margin-top: 15px;
}
.button2>button {
margin-right: 10px;
}
.mycards {
width: 1600px;
margin: 30px auto;
flex-direction: row;
align-items: center;
}
.card {
border-radius: 30px;
background-color: white;
border: none;
color: black;
margin-left: 50px;
}
.card-img-top {
object-fit: cover;
height: 250px;
border-radius: 20px;
}
.card-title {
margin-top: 10px;
font-size: 18px;
}
.card-body {
border: blanchedalmond 2px solid;
border-radius: 20px;
}
.card-text {
color: black;
}
.comment {
color: black;
}
.play-button {
display: flex;
justify-content: flex-start;
margin-top: 15px;
}
a.nav-link {
color: #F17228;
font-size: large;
}
.icon {
height: 50px;
}
.card-button {
background-color: orange;
color: white;
text-align: center;
padding: 10px 15px;
border: none;
border-radius: 6px;
cursor: pointer;
}
.card-title {
font-weight: bold;
}
.card-button> :hover {
background-color: darkorange;
}
#input-card {
width: 500px;
margin: 0px 0px 0px 135px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
float: left;
}
.form-floating input,
.form-floating textarea {
color: black;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
padding: 10px;
width: 100%;
}
.form-floating label {
color: #333;
}
.input-group button,
.input-group select {
background-color: rgb(168, 161, 161);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
.input-group button:hover,
.input-group select:hover {
background-color: gray;
}
.button2 {
text-align: right;
}
.button2 button {
background-color: #F17228;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button2 button:hover {
background-color: #f3620f;
}
.jumbotron-message {
margin-left: 150px;
font-size: 1500px;
}
.mainimg {
background-image: url('https://www.freebie-ac.jp/sozai/2019_037_food_collection/img/main.jpg');
background-position: center;
background-size: cover;
height: 600px;
}
h1 {
font-family: 'Black Han Sans', sans-serif;
}
.container-fluid py-5 {
margin-left: 200px;
}
</style>
</head>
<body>
<!-- Navbar -->
<header class="p-3 text-bg-dark">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
<use xlink:href="#bootstrap"></use>
</svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/food.png"
class="icon"></li>
<li><a href="#" class="nav-link px-2 text-danger">Foodcourt</a></li>
<li><a href="#" class="nav-link px-2 ">홈</a></li>
<li><a href="#" class="nav-link px-2 ">한식</a></li>
<li><a href="#" class="nav-link px-2 ">일식</a></li>
<li><a href="#" class="nav-link px-2 ">중식</a></li>
<li><a href="#" class="nav-link px-2 ">양식</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."
aria-label="Search">
</form>
<div class="text-end">
<button type="button" class="btn btn-warning me-2">Login</button>
<button type="button" class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
<!-- 점보 트론 적용 jumbotron -->
<!-- - https://getbootstrap.com/
- Bootstrap 사이트에서 cards 가져와 vscode에 붙여 넣기
- jumbotron의 내용을 예시사진과 똑같게 내용을 변경해 주세요.
- jumbotron <h1> 태그안에 `Blank Han Sans` 폰트 스타일을 적용해 주세요. -->
<div class="mainimg">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">스파르타 푸드파이터</h1>
<p class="col-md-8 fs-4">
본인만의 맛집을 소개하는 사이트입니다.<br>
맛집을 소개해 주세요!
</p>
<div class="post" id="input-card">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="img" placeholder="name@example.com">
<label for="floatingInput">음식 이미지 주소</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="title" placeholder="영화 제목">
<label for="foodTitle">음식명</label>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button">별점</button>
<select class="form-select" id="star" aria-label="Example select with button addon">
<option selected>별점 선택</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="comment"></textarea>
<label for="floatingTextarea">추천 이유</label>
</div>
<div class="button2">
<button onclick="makecard()" type="button" class="btn btn-danger" id="addBtn"> 기록하기 </button>
</div>
</div>
</div>
</div>
<!-- 부트스트랩 인풋 박스 적용-->
<!-- 부트스트랩 카드 적용-->
<div class="mycards">
<!-- - https://getbootstrap.com/
- Bootstrap 사이트에서 cards 가져와 vscode에 붙여 넣기
- *Docs → Card → Grid cards에서 3번째 코드입니다.*
- <button> 태그를 생성해 주세요.
- <button> 태그안에 `card-button` 클래스를 부여해 주세요.
- 카드에 내용은 자유롭게 채워 주세요. -->
<div id="card" class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="https://src.hidoc.co.kr/image/lib/2020/11/9/1604911318873_0.jpg" class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">이탈리안 레스토랑</h5>
<p class="card-text">마르게리따 피자</p>
<p class="card-text">⭐⭐⭐⭐</p>
<button type="button" class="card-button">주문하기</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영양 삼계탕</h5>
<p class="card-text">여름 별미 삼계탕</p>
<p class="card-text">⭐⭐⭐⭐⭐</p>
<button type="button" class="card-button">주문하기</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">즉석 떡볶이 즉떡</h5>
<p class="card-text">매워도 맛있는 떡볶이</p>
<p class="card-text">⭐⭐⭐⭐</p>
<button type="button" class="card-button">주문하기</button>
</div>
</div>
</div>
</div>
</div>
<div class="container2">
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
<div class="col mb-3">
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
</a>
<p class="text-body-secondary">©Teamsparta 2024</p>
</div>
<div class="col mb-3">
</div>
<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>
<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>
<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>
</footer>
</div>
</body>
</html>보고 계신 화면 전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 이해할 수 있어요.
작성한 코드 및 에러 메세지
오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
