* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
지금 여기까지 진행되었는데요,
화면이 이렇게 나옵니다. 어디를 건드려야 배치가 예시사진처럼 될까요?
전체코드가 너무 길어서 안 올라가서, 어느 부분을 드려야 수정할 수 있을지 모르겠네요;
우선 일부만 드려볼게요. 저 부분 아니면 말씀해주세요.
화면 우클릭-검사-해당부분 edit at html눌러서 저부분(배경이미지 들어간 부분) 코드만 복사해서 아래에 넣었습니다.
작성한 코드 및 에러 메세지
<div class="main">
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">스파르타 푸드파이터</h1>
<p class="col-md-8 fs-4">본인만의 맛집을 소개하는 사이트입니다.
맛집을 소개해 주세요!
</p>
<!-- 점보 트론 적용 jumbotron -->
<!-- - https://getbootstrap.com/
- Bootstrap 사이트에서 cards 가져와 vscode에 붙여 넣기
- jumbotron의 내용을 예시사진과 똑같게 내용을 변경해 주세요.
- jumbotron <h1> 태그안에 `Blank Han Sans` 폰트 스타일을 적용해 주세요. -->
<!-- 부트스트랩 인풋 박스 적용-->
<div class="post" id="input-card">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">음식 이미지 주소</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="foodTitle" 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="inputGroupSelect03" 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="floatingTextarea"></textarea>
<label for="floatingTextarea">추천 이유</label>
</div>
<div class="button2">
<button type="button" class="btn btn-danger" id="addBtn"> 기록하기 </button>
</div>
</div>
</div>
</div>
</div>
