div간의 여백 만들기 질문입니다

커뮤니티

포인트

로딩중

쿠폰

내 강의실

국비 신청 내역

수강권

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

div간의 여백 만들기 질문입니다

undefined주차

박*서

・

추천

・

조회수

답변 완료

<!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=Gowun+Dodum&display=swap" rel="stylesheet">

        <style>
                * {
                        font-family: 'Gowun Dodum', sans-serif;
                }

        .mytitle {
                background-color: green;
                width: 100%;
                height: 250px;

                background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) ,url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
                background-position: center;
                background-size: cover;

                color: white;

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

        }
                .mytitle > button{
                        width:200px;
                        height:50px;

                        background-color: transparent;
                        color:white;

                        border-radius: 50px;
                        border: 1px solid white;

                        margin-top:10px;


                }
                .mytitle > button:hover{
                       border: 2px solid white;
                        color: grey;
                        width:210px;
                        height:60px;
                        font-size:20px;


                }
                .mycomment {
                        color: grey;}
                .wrap{
                        max-width:1200px;
                        width:95%;
                        margin:20px auto auto auto;
                }
                .mypost{
                        background-color:transparent;
                        max-width:500px;
                        width:95%;

                        margin: 20px auto 0px auto;

                        box-shadow:0px 0px 3px 0px gray;
                        padding: 20px;

                }


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

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

        </style>
</head>

<body>
        <div class="mytitle">
                <h1>내 생에 최고의 영화들</h1>
                <button>영화 기록하기🙋‍♂️</button>
        </div>
        <div class="mypost">
                <div class="form-floating">
                        <input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com"
                               value="영화 url">
                        <label for="floatingInputValue"></label>
                </div>

                <div class="input-group mb-3">
                        <label class="input-group-text" for="inputGroupSelect01">별점</label>
                        <select class="form-select" id="inputGroupSelect01">
                                <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="mybtn">
                        <button type="button" class="btn btn-dark"> 기록하기 </button>

                        <button type="button" class="btn btn-secondary">닫기</button>
                </div>


        </div>
        <div class="wrap">
           <div class="row row-cols-1 row-cols-md-4 g-4">
                <div class="col">
                        <div class="card h-100">
                                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                        <h5 class="card-title">제목 </h5>
                                        <p class="card-text">내용.</p>
                                        <p>⭐⭐⭐</p>
                                        <p class="mycomment">간단 한줄 평</p>
                                </div>
                        </div>
                </div>
                 <div class="col">
                        <div class="card h-100">
                                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                        <h5 class="card-title">제목 </h5>
                                        <p class="card-text">내용.</p>
                                        <p>⭐⭐⭐</p>
                                        <p class="mycomment">간단 한줄 평</p>
                                </div>
                        </div>
                </div> <div class="col">
                        <div class="card h-100">
                                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                        <h5 class="card-title">제목 </h5>
                                        <p class="card-text">내용.</p>
                                        <p>⭐⭐⭐</p>
                                        <p class="mycomment">간단 한줄 평</p>
                                </div>
                        </div>
                </div> <div class="col">
                        <div class="card h-100">
                                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                        <h5 class="card-title">제목 </h5>
                                        <p class="card-text">내용.</p>
                                        <p>⭐⭐⭐</p>
                                        <p class="mycomment">간단 한줄 평</p>
                                </div>
                        </div>
                </div>
                </div>
        </div>








</body>

</html>

영화 url이랑 별점 사이가 너무 붙어있어 띄우려는데

styler내에 .mypost> mynput-group mb-3 {margin-top: 10px}

ㅇ이런식으로 해도 반응이없는데 공간만들기를 어떤식으로 해야하나요?

댓글 알림