텍스트 위치 수정 | 스파르타 커뮤니티

커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
텍스트 위치 수정
[왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z v0
3주차
이*진
・
추천
・
조회수
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
안녕하세요 선생님!
header부분의 해당 텍스트를 텍스트상자에 맞춰서 줄을 맞추고 싶어서
padding 태그를 사용했는데 변동이 없어서 위치 수정을 어떻게 해야하는지 여쭤보려고 합니다!
혹시 몰라 전체태그입력해놓겠습니다!
작성한 코드 및 에러 메세지
<!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=Black+Han+Sans&family=Gowun+Dodum&display=swap');


        * {
            font-family: "Gowun Dodum", sans-serif;
        }


        h1 {
            font-family: "Black Han Sans", sans-serif;
        }


        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;
        }


        .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;
        }


        .card-button {
            background-color: darkorange;
        }


        .mycards {
            margin: 20px auto 20px auto;
            width: 1200px;
        }


    </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 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 class="shoulder">
                <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>
</div>



    <div class="mycards">
        <div class="row row-cols-1 row-cols-md-3 g-4">
            <div class="col">
                <div class="card">
                    <img src="https://img.siksinhot.com/article/1622711348031680.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title"> 토마토파스타 </h5>
                        <p>⭐⭐⭐⭐</p>
                        <p class="card-text"> 신선한 토마토와 생면의 조합 </p>
                        <button class = "card-button" type="button" class="btn btn-primary btn-sm">주문하기</button>
                    </div>
                </div>
            </div>


            <div class="col">
                <div class="card">
                    <img src="https://schinkenhaus.co.kr/web/product/big/202103/956e0423a801197c17170cf1bcdf6c7e.png" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title"> 스테이크 </h5>
                        <p>⭐⭐⭐⭐⭐</p>
                        <p class="card-text"> 소고기, 돼지고기 모두로 즐길 수 있어요! </p>
                        <button class = "card-button" type="button" class="btn btn-primary btn-sm">주문하기</button>
                    </div>
                </div>
            </div>


            <div class="col">
                <div class="card">
                    <img src="https://i.namu.wiki/i/K3apK1de8Q2LH_opBp1HxNfovNn9gqll8MZ0I-P9lbQ0BxrSU_x1FoICB9CsMydwddSnzRKTwKnL3uuXx-Z_m-e9Dn91DWKmXcbV5VL1frSLj_Q4G8Vn7r-pgF6MX_OeK5SZpPiGkHSw-gThyDTiMw.webp" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title"> 마르게리타 피자 </h5>
                        <p>⭐⭐⭐</p>
                        <p class="card-text"> 토마토와 얇은 도우의 만남 </p>
                        <button class = "card-button" type="button" class="btn btn-primary btn-sm">주문하기</button>
                    </div>
                </div>
            </div>
            <!-- - https://getbootstrap.com/
        - <button> 태그를 생성해 주세요.
        - <button> 태그안에 `card-button` 클래스를 부여해 주세요.
        - 카드에 내용은 자유롭게 채워 주세요. -->
        </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>
댓글 알림