부트스트랩 이미지 높이 설정

커뮤니티

포인트

로딩중

쿠폰

내 강의실

국비 신청 내역

수강권

증명서

숙제 피드백

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

부트스트랩 이미지 높이 설정

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

2주차

연*아

・

추천

・

조회수

답변 완료

<!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>

    <!--Black+Han+Sans 폰트-->
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gowun+Batang&family=Hahmlet&display=swap"
          rel="stylesheet">

    <title>아이유 팬명록</title>
    <style>

        body {
            font-family: 'Hahmlet', serif;
        }

        .mytitle > h1 {
            font-size: 50px;
        }

        .mytitle {
            width: 100%;
            height: 700px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://img.hankyung.com/photo/201911/01.20921840.1.jpg");
            background-size: cover;
            background-position: center 50%;

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

        .mysection {
            border: 1px solid darkgray;
            width: 30%;
            margin: 30px auto;
            padding: 1%;
        }

        .myfooter {
            border: 1px solid darkgray;
            width: 30%;
            margin: 10px auto;
        }

        .myinstagram {
            margin: 50px auto;
        }


        .myinstagram > img {
            width: 100%;
            height: 400px;
        }

    </style>

    <script>
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
            data: {},
            success: function (response) {
                let temps = response['temp']
                let cloud = response['clouds']

                $('#temp').append('현재 서울시 기온 : ' + temps + '˚' + `<br>` + '강수 확률 : ' + cloud);
                $('#temp').addClass('text-center');
            }
        })
    </script>
</head>

<body>
<!--헤더 시작-->
<div class="mytitle">
    <h1>아이유 팬명록</h1>
    <p id="temp"></p>
</div>
<!--헤더 끝-->

<!--인스타그램 시작-->
<div class="myinstagram">
    <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col">
            <div class="card h-100">
                <img src="https://mblogthumb-phinf.pstatic.net/MjAxNzA5MDdfMjQ1/MDAxNTA0NzY2MTg3NjMw.082G5PddLUVM6x35yJ5Ex6lKonxHrf_tf7lJHjEijYsg.WSzLj8tTAdxrZqXxMMutfLdOE-P7oNKK80_asLRlEmAg.PNG.morning1377/%EC%95%84%EC%9D%B4%EC%9C%A0_%EC%9D%B8%EC%8A%A4%ED%83%80%EA%B7%B8%EB%9E%A8_%EA%B7%BC%ED%99%A9.PNG?type=w2"
                     class="card-img-top" alt="...">

                <div class="card-body">
                    <h5 class="card-title">dlwlrma</h5>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                        additional
                        content. This content is a little bit longer.</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="http://cdn.hantoday.net/news/photo/201803/img_17762_9845_17878.jpg" class="card-img-top"
                     alt="...">
                <div class="card-body">
                    <h5 class="card-title">dlwlrma</h5>
                    <p class="card-text">This is a short card.</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="http://thumb.mtstarnews.com/06/2022/07/2022071514575248797_1.jpg" class="card-img-top"
                     alt="...">
                <div class="card-body">
                    <h5 class="card-title">dlwlrma</h5>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                        additional
                        content.</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--인스타그램 끝-->

<!--섹션 시작-->
<div class="mysection">
    <div class="mb-3">
        <label for="exampleFormControlInput1" class="form-label"></label>
        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="닉네임">
    </div>
    <div class="mb-3">
        <label for="exampleFormControlTextarea1" class="form-label"></label>
        <textarea class="form-control" id="exampleFormControlTextarea1" placeholder="응원댓글" rows="3"></textarea>
    </div>

    <button type="button" class="btn btn-danger">응원남기기</button>
</div>
<!--섹션 끝-->

<!--댓글 시작-->
<div class="myfooter">
    <div class="card-body">
        <blockquote class="blockquote mb-0">
            <p>역시 아이유!</p>
            <footer class="blockquote-footer">이지은팬<cite title="Source Title"></cite></footer>
        </blockquote>
    </div>
</div>

<div class="myfooter">
    <div class="card-body">
        <blockquote class="blockquote mb-0">
            <p>역시 아이유!</p>
            <footer class="blockquote-footer">이지은팬<cite title="Source Title"></cite></footer>
        </blockquote>
    </div>
</div>
<!--댓글 끝-->
</body>
</html>

헤더 밑에 부트스트랩으로 이미지 3장을 각각 주었는데

높이가 이미지 비율에 맞춰 자동으로 들어가서 3가지 이미지 높이가 전부 다른데

어떻게 줘도 width는 먹히는데 height는 안 먹혀서요.

class 하위요소 img 높이 설정 하려면 어떻게 해야하나요?

댓글 알림