[TIL-DAY3] 웹개발 종합반 3주차 강의 과제 [HTML, CSS를 활용하여 화면 만들기]

- 점보 트론 적용 jumbotron

    <div class="header">
        <div class="p-5 mb-4 bg-body-tertiary rounded-3">
            <div class="container-fluid py-4">
                <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>

- 부트스트랩 카드 적용

<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://th.bing.com/th/id/OIP.VLkN-ssTfJmxfllSjyB0VAHaE6?w=278&h=185&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                    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">
                <img src="https://th.bing.com/th/id/OIP.XvkHXDH56I72DkdbgPJnAgAAAA?w=149&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                    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">
                <img src="https://th.bing.com/th/id/OIP.3EYxlGhiPt_LN4oXhQRt_gHaE8?w=282&h=188&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                    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>

• 완성된 결과물