숙제 팬명록 만들기 관련해서 질문이 있습니다.

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

숙제 팬명록 만들기 관련해서 질문이 있습니다.

undefined주차

전*준

・

추천

・

조회수

답변 완료

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

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

안녕하세요, 제가 팬명록 만들기 숙제를 했는데요, 궁금한 점이 몇가지 있어서 문의를 드리려고 합니다.

밑에 quote 부분의 글씨 크기를 줄이고 싶은데 어떻게 줄일 수가 있을까요? 제가 작성한 태그 기준으로 style의 .card와 .card-wrap에서 font-size를 입력해서 조절해보려고 했는데 크기가 변하지 않습니다. 어떻게 하면 크기를 줄일 수가 있을지 궁금합니다.
부트스트랩에서 가져온 floating labels 양식에는 class 이름으로 form-floating 과 같은 것이 설정되어 있는데 이 이름을 변경하면 양식 밖으로 문구('닉네임', '응원댓글' 등)가 튀어나옵니다. class 이름은 변경할 수 없는건지 궁금합니다.

감사합니다.

작성한 코드 및 에러 메세지

<!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 {
            width: 100%;
            height: 300px;

            background-image: url("https://image.ytn.co.kr/general/jpg/2022/0329/202203291725190802_d.jpg");
            background-position: center 27%;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .mypost {
            max-width: 500px;
            width: 95%;

            margin: 20px auto 0px auto;

            box-shadow: 0px 0px 3px 0px gray;
            padding: 20px;
        }
        .form-floating {
            margin-bottom: 10px;
        }
        .mybtn {
            margin-top: 10px;
        }
        .card-wrap {
            max-width: 500px;
            width: 95%;
            margin: 20px auto 0px auto;
        }
        .card {
            margin-bottom: 10px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="mytitle">
        <h1>오마이걸 팬명록</h1>
    </div>
    <div class="mypost">
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
            <label for="floatingTextarea">닉네임</label>
        </div>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                      style="height: 100px"></textarea>
            <label for="floatingTextarea2">응원댓글</label>
        </div>
        <div class="mybtn">
            <button type="button" class="btn btn-dark">응원 남기기</button>
        </div>
    </div>
    <div class="card-wrap">
        <div class="card">
            <blockquote class="blockquote mb-0">
                <p>시켜줘 아린이 명예소방관</p>
                <footer class="blockquote-footer">119</footer>
            </blockquote>
        </div>
        <div class="card">
            <blockquote class="blockquote mb-0">
                <p>승희는 베를린이야. 나에게 치명적인 독일 수도</p>
                <footer class="blockquote-footer">베를린 장벽</footer>
            </blockquote>
        </div>
        <div class="card">
            <blockquote class="blockquote mb-0">
                <p>우리 지호 못 잃어</p>
                <footer class="blockquote-footer">미라클</footer>
            </blockquote>
        </div>
    </div>
</body>

</html>

댓글 알림