1주차 과제 중 질문있습니다 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

1주차 과제 중 질문있습니다

undefined주차

한*일

・

추천

・

조회수

답변 완료

튜더님 안녕하세요

1주차 과제를 진행하던중에 궁금한 사항이 생겨서 질문드립니다

과제를 하고 나서 제출하면 해당 제출한 과제에 대한 피드백이 있을까요?
포스팅 박스를 만들었습니다.

그런데 닉네임 박스가 위아래로 여백이 큰거 같아 조절을 하려 했는데 닉네임,응원댓글과 포스팅 박스가 따로 놀아서 <div>닉네임과 포스트 박스를 묶어서 height로 움직일 수 있나 싶어 실행해도 아니고 marjin, 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">

    <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>
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
   <style>
       *{
           font-family: 'Jua', sans-serif;
       }

       .mytitle {
           color: white;
           background-color: green;

           width: 100%;
           height: 300PX;


           background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://blog.kakaocdn.net/dn/oVhx7/btqUtV5rtLl/NESyky5FVQqkkxclchpBN0/img.jpg);
           background-size: cover;
           background-position: center 30%;

           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
       }

       .mypost {

           max-width: 500px;
           width: 95%;
           height: 320px;
           margin: 20px auto 0 auto;

           box-shadow: 0px 0px 3px 0px black;
           padding: 10px;

       }

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

           box-shadow: 0px 0px 1px 0px gray;
           padding: 1px;
       }

       .myquote2 {
           max-width: 500px;
           width: 95%;
           margin: 10px auto 0 auto;

           box-shadow: 0px 0px 1px 0px gray;
           padding: 1px;
       }

       .myquote3 {
           max-width: 500px;
           width: 95%;
           margin: 10px auto 0 auto;

           box-shadow: 0px 0px 1px 0px gray;
           padding: 1px;
       }

   </style>

</head>

<body>
<div class="mytitle">
    <h1>IU(아이유) 팬명록</h1>
</div>
<div class="mypost">
         <div class="mb-3">
        <label for="exampleFormControlInput1" class="form-label"></label>
        <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="닉네임">
         </div>

    <div class="mb-3">
        <label for="exampleFormControlTextarea1" class="form-label"></label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" placeholder="응원댓글"></textarea>
    </div>

    <div class="mybutton">
        <button type="button" class="btn btn-dark">응원 남기기</button>
    </div>

</div>
<div class="myquote1">
    <div class="card-body">
        <blockquote class="blockquote mb-0">
            <p>아이유 새로운 앨범을 응원합니다.</p>
            <footer class="blockquote-footer">팡머
        </blockquote>
    </div>
</div>
<div class="myquote2">
    <div class="card-body">
        <blockquote class="blockquote mb-0">
            <p>아이유 콘서트 대박!</p>
            <footer class="blockquote-footer">오수
        </blockquote>
    </div>
</div>
<div class="myquote3">
    <div class="card-body">
        <blockquote class="blockquote mb-0">
            <p>라일락 노래 최고!</p>
            <footer class="blockquote-footer">파나나
        </blockquote>
    </div>
</div>



</body>

</html>

댓글 알림