1-20 1주차 과제 관련 질문입니다.

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

1-20 1주차 과제 관련 질문입니다.

undefined주차

정*경

・

추천

・

조회수

답변 완료

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

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

팬명록 만들기 과제 관련 질문입니다!

과제 완성본처럼 '닉네임/응원댓글/응원남기기' 이렇게 하나의 박스로 구분되고,

'새로운 앨범 너무 멋져요!' 부분은 따로 박스로 구분되어야 하는데

제 화면은 아래 사진 처럼 하나의 박스로 묶여져 나옵니다 ㅠㅡㅠ 코드를 어떻게 수정해야 할까요..?

작성한 코드 및 에러 메세지

<style>
    * {
        font-family: 'Cute Font', cursive;
        font-size: 50px;
    }

    .fan {
        width: 100%;
        height: 300px;

        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%2Fblogfiles.naver.net%2FMjAyMTAyMDhfMjI2%2FMDAxNjEyNzUxMjUyNzU4.us4c_4aMugfMWcOaIHYgjN1caNlh1h2F-Mev4baPlfQg.5VwFHfcDO83QaDEiLJVUzuykMgNKn9ZgjN79j1OddMMg.JPEG.jjmmjj04%2Ff4453cec97279d149763dbfee8abd6e2.jpg&type=sc960_832');
        background-position: center;
        background-size: cover;
        color: white;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 50px

    }

    .mypost {
        width: 900px;
        margin: 20px auto 20px auto;
        padding: 20px;
        box-shadow: 0px 0px 3px 0px gray;
    }

     .mybtns {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            margin: 20px;
        }
        .mybtns > button {
            margin-right: 10px;

    .card {
        width: 500px;
        margin: 20px auto 20px auto;
        padding: 20px;
        box-shadow: 0px 0px 3px 0px gray;
    }

</style>
<body>
<div class="fan">
    <h1>신짱구 팬명록</h1>
</div>
        <div class="mypost">
    <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="floatingTextarea"
                     style="height: 100px"></textarea>
        <label for="floatingTextarea">응원댓글</label>
        <div class="mybtns">
            <button type="button" class="btn btn-dark">응원남기기</button>


        </div><div class="card">

            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source
                        Title</cite></footer>
                </blockquote>

            </div>










</body>

댓글 알림