커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
실습 중 질문-2 ...
코딩이 처음이어도 쉽게 배우는 웹개발 A to Z
챕터 3
이*호
댓글
8
・
추천
0
・
조회수
21
조회수
21
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
1) 본문에 점보트론-메세지가 없음
.jumbotron-message {
margin-left: 150px;
font-size: 1500px;
}
점보트론꺼 긁어서 복사했는데
점보트론-메세지 란 클래스가 없어도 점보트론에 들어가 있는 메세지들은 적용해지는 걸까요??
2) 처음 보는 형태
.input-group button,
.input-group select {
}
인풋-그룹 밑에 버튼들이랑 인풋-그룹 밑에 select 들 모두 { } 적용하겠다 란 뜻일까요??
3) 스파르타 푸드파이터랑 표를 묶고 싶습니다
↓ 작성한 것
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
<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>
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gowun+Dodum&display=swap');
* {
font-family: "Gowun Dodum", sans-serif;
font-weight: 400;
font-style: normal;
}
a.nav-link {
color: #F17228;
font-size: large;
}
.header {
background-size: cover;
background-image:
url('https://images.unsplash.com/photo-1531697218799-ed0ae884c6c8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80');
background-position: right;
height: 650px;
display: flex;
flex-direction: column;
}
body {
background-color: white;
color: black;
}
.icon {
height: 50px;
}
#input-card {
background-color: #f9f9f9;
width: 500px;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
float: left;
}
.button2 button {
margin: 20px 0px 0px 370px;
background-color: #F17228;
border: none;
}
#inputGroupSelect03 {
background-color: #a8a1a1;
color: white;
border: none;
}
#input_grop {
background-color: #a8a1a1;
color: white;
border: none;
}
</style>
</head>
<body>
<!--메뉴-->
<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>
<!--대문-->
<div class="header">
<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>
<p class="col-md-8 fs-4"> 맛집을 소개해 주세요!</p>
</div>
</div>
<div class="post" id="input-card">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="음식 이미지 주소">
<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" id="input_grop" type="button"
style="color: white;">별점</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="추천 이유" id="floatingTextarea"></textarea>
<label for="floatingTextarea">추천 이유</label>
</div>
<div class="button2">
<button type="button" class="btn btn-danger" id="addBtn"> 기록하기 </button>
</div>
</div>
</div>
<!--하단-->
</body>
</html>
(1)
묶어서 사이즈 조절하고 싶은데
body를 건들면 (검정 빗금)으로 되버리고
header를 건들면 파란 빗금 부분이 쓰여집니다.
조언을 구하고 싶습니다 으어 ,,,
전체 화면 캡처
작성한 코드 및 에러 메세지
오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
댓글 알림
