영화 카드 이미지 크기 통일하고 싶어요

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

영화 카드 이미지 크기 통일하고 싶어요

undefined주차

김*성

・

추천

・

조회수

답변 완료

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

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

새로운 영화 포스터 url을 가지고 왔는데 사진마다 사이즈가 달라서 포스터 사이즈를 통일하고 싶어요

보고 계신 화면 전체를 캡처해

주시면, 튜터님들이 빠르게 상황을 이해할 수 있어요.

작성한 코드 및 에러 메세지

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


        }


        .mypost {
            width: 500px;
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;


            box-shadow: 0px 0px 10px 0px gray;
        }


        .mybtn {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }


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


        .card-title {
            text-align: center;
        }


      
    </style>
</head>


<body>
    <div class="mytitle">
        <h1>내 생애 최고의 영화들</h1>
        <button>영화 기록하기</button>
    </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">영화 url</label>
        </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-outline-dark">닫기</button>
        </div>
    </div>
    <div class="mycards">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card h-100">
                    <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fcafefiles.naver.net%2FMjAxODExMTBfODkg%2FMDAxNTQxODIyOTM3MjA4.DG5my0GtQNotp-o2K6-jfLe0qo6slFtyzCAzbfpQ8vEg.vgqkoL282kQboBv0tTngmk-PQkFpedegp4nlCq35OU0g.PNG.resound_c%2FexternalFile.png&type=sc960_832"
                        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>

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

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

댓글 알림