사전캠프 19일차

neww·2024년 9월 26일
React내일배움캠프사전캠프

내일배움캠프

목록 보기
21/23

그리고 웹페이지에서 카드만 따로 보였던 이유는 div가 끝나는 곳이 전에 있어서

버튼 설명을 모르겠어서
다른 사람들 글 남긴 거 보고 따라함
이거 과제 아닌 것 같은데...

<div class="card-body">
    <h5 class="card-title">투썸플레이스 케이크</h5>
    <p class="card-text">⭐⭐⭐⭐⭐</p>
    <p class="card-text">완성도 높은 프리미엄 스타일의 디저트로 즐겁고 달콤한 시간을 경험할 수 있는 <br>투썸의 대표 제품입니다.</p>
    <button type="button" class="card-button">주문하기</button>
// 여기서 버튼만 복사해서  card button 으로 했다가 색깔이랑 위치가 적용안되서 보니까  card-button으로 바꿨더니 적용이 되었다.
.header>div {
            font-size: 18px;
            margin-top: 10px;
            margin-left: 135px; 
 //글씨 위치 정확하게 모르면 개발자 도구에 들어가서 확인하기

수정중인 코드 

<!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>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
/
        * {
            font-family: "Gowun Dodum", sans-serif;
            font-weight: 400;
            font-style: normal;
        }
        body {
            background-color: white;
            color: black;
        }
        .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;
        }
        .header>h1 {
            margin: 0;
            font-size: 40px;
        }
        .header>div {
            font-size: 18px;
            margin-top: 10px;
            margin-left: 135px;
// 마진 개발자 도구에서 확인한 다음 수정 
        }
        .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 20px;
            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;
        }
    </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>
  <!-- 점보트론 적용 -->
  <div class="header">////////////여기에서  `<div class="p-5 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">제가 좋아하는 음식입니다.<br> 여러분도 이 음식을 좋아하나요?</p>
      </div>
      <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>
      <!-- 부트스트랩 인풋 박스 적용
      - jumbotron <h1> 태그안에 `Blank Han Sans` 폰트 스타일을 적용해 주세요. -->
      </div>
      </div>
      </div>
<!-- 부트스트랩 카드 적용-->
      <div class="mycards">
              <div class="row row-cols-1 row-cols-md-3 g-4">
                  <div class="col">
                      <div class="card h-100">
                          <img src="https://www.twosome.co.kr/resources/images/content/img_p_dessertstory.jpg" class="card-img-top" alt="...">
                          <div class="card-body">
                              <h5 class="card-title">투썸플레이스 케이크</h5>
                              <p class="card-text">⭐⭐⭐⭐⭐</p>
                              <p class="card-text">완성도 높은 프리미엄 스타일의 디저트로 즐겁고 달콤한 시간을 경험할 수 있는 <br>투썸의 대표 제품입니다.</p>
                              <button type="button" class="card-button">주문하기</button>
                          </div>
                      </div>
                  </div>
                  <div class="col">
                      <div class="card h-100">
                          <img src="https://imagecdn.banolimpizza.com/pc/pizza/new/1027.png" class="card-img-top" alt="...">
                          <div class="card-body">
                              <h5 class="card-title">콤비네이션 피자</h5>
                              <p class="card-text">⭐⭐⭐</p>
                              <p class="card-text">햄, 페퍼로니, 각종 야채들이 풍성하게 <br>토핑된 가장 기본적이고 대중적인 피자</p>
                              <button type="button" class="card-button">주문하기</button>
                          </div>
                      </div>
                  </div>
                  <div class="col">
                      <div class="card h-100">
                          <img src="https://contents.sixshop.com/thumbnails/uploadedFiles/39154/default/image_1627627385029_1500.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>
          </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>
~~~ 와 진짜 어렵다. ..

오늘의 중간 사진

중간에 뭐 잘못 건드려서 다시 원상복귀 하느라 폰트 수정 못하고 끝남

profile
neww
이전 포스트

사전캠프 18일차

다음 포스트

사전캠프 20일차

0개의 댓글