같은 코드를 작성했는데 뭐가 다른지 모르겠어요

커뮤니티

포인트

로딩중

쿠폰

내 강의실

국비 신청 내역

수강권

증명서

숙제 피드백

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

같은 코드를 작성했는데 뭐가 다른지 모르겠어요

[왕초보] 비개발자를 위한, 웹개발 종합반 (프로그래밍 실무, 풀스택)

1주차

김*현

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

1주차 숙제를 위해서 코드를 VScode 에서 작성을 하고 있는데 해설 영상과 코드를 참조해도 나오지 같게 나오지가 않아서 절망중입니다...

제가 만든 숙제입니다. 아래의 새로운 앨범 너무 멋져요! 부분의 박스가 안 쳐져 있는게 달라서 고민입니다.

작성한 코드 및 에러 메세지

<!doctype html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <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://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <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>


    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>


    <style>
        .mytitle {
            width: 100%;
            height: 250px;


            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://search.pstatic.net/common/?src=http%3A%2F%2Fcafefiles.naver.net%2FMjAxODEwMDFfMTEg%2FMDAxNTM4Mzk3NjE3Njg5.veptK1gU4Dwikxp7A1I39b7kiGqLhnPt2wDeXtstfxMg._Ox5P6-QgnKXWzWt2PiMCIEK83_heKe8Od3uoI2wn6wg.JPEG.amazes2002%2F%25BE%25C6%25C0%25CC%25C0%25AF%25B4%25A9%25B3%25AA20.jpg');
            background-position: center 10%;
            background-size: cover;


            color: white;


            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .content {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 0px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px black;


            margin-top: 10px;
        }


        .mybtns {
            margin-top: 10px;
        }


        .card {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 0px auto;
        }


        .card > .comment {
            margin-top: 10px;
            margin-bottom: 10px;
        }


    </style>
    
</head>


<body>
    <div class="mytitle">
        <h1>이지은 팬명록</h1>
    </div>


    <div class="content">
            <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">
                <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                          style="height: 100px"></textarea>
                <label for="floatingTextarea2">응원 댓글</label>
            </div>
            <div class="mybtns">
                <button type="button" class="btn btn-dark">응원 남기기</button>
            </div>
      </div>
    <div class="card">
        <div class="comment">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer">호빵맨</footer>
                </blockquote>
            </div>
            
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer">호빵맨</footer>
                </blockquote>
            </div>
            
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer">호빵맨</footer>
                </blockquote>
            </div>
        </div>
    </div>
</body>


</html>

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!

댓글 알림