1주차 과제의 코드 관련 질문

커뮤니티

포인트

로딩중

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

1주차 과제의 코드 관련 질문

undefined주차

김*린

・

추천

・

조회수

답변 완료

윗부분의 배경 사진과 관련하여 (두 가지)
아랫부분에 있는 카드의 영역 (한 가지)
기타 (한 가지)

(총 4가지 질문 드립니다.)

보고 계신 화면 전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 상황을 이해할 수 있어요.

1. 세로로 긴 사진을 배경 사진으로 사용했습니다.

모바일 버전이나 작은 창에서는 아래와 같이 한 장으로 문제가 없으나,

화면의 가로 길이가 길어지게 되면 메인 이미지의 크기가 작아지고, 양옆에 이미지가 추가로 생깁니다.

질문 1-1) 양옆은 빈 여백으로 두고, 가운데에 이미지만 남길 수 없나요?

(화면의 가로 길이가 커짐에 따라, 이미지의 크기도 함께 커지고, 일정 크기(2200?)이상에선 첫 번째 첨부 사진처럼 이미지 하나가 화면을 모두 채울 수 있게)

사진이 쪼개지는 원인이 무엇인지, 해결 방법은 무엇인지 궁금합니다.

이어서,

2. 카드 셋의 영역이 나눠지지 않습니다.

질문 2) 셋이 분리되지 않고 합쳐지는 이유가 무엇인가요?

아래의 방법이 오류를 일으킨 건가요? 그렇다면 묶지 않고 카드-바디 1,2,3 마다(즉 카드의 개수 만큼) 스타일에서 각각 꾸밈을 지정해줘야 하나요?

<div class="card-body1"> / <div class="card-body2"> / <div class="card-body3"> 로 카드를 세 영역으로 나누었습니다.
그런 후, 셋을 <div class="card"> 로 묶어 <style> .card {} </style> 로 class card의 영역 크기를 조절했습니다.우

3. 피드백 부탁 드립니다.

질문 3) 보완할 부분이 있다면 피드백 부탁 드립니다.

(필요 없는 코드나, 더 간단히 할 수 있는 코드가 있다면, 가르쳐주세요.)

작성한 전체 코드입니다.

<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=Nanum+Pen+Script&display=swap" rel="stylesheet">    <style>
        * {
            font-family: 'Nanum Pen Script', cursive;
            font-size: x-large;
        }
        .mytitle1 {
            max-width: 2200px;
            width: 100%;
            height: 350px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://img.marieclairekorea.com/2021/05/mck_60addf8624bb7-562x712.jpg");
            background-size: 700px;
            background-position: center -130px;
            color: white;

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

        .mypost {
            background-color: transparent;
            max-width: 500px;
            width: 95%;

            margin: 20px auto 0px auto;

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

        .first_nick_comment_button {
            background-color: transparent;
        }

        .card {
            background-color: transparent;

            max-width: 500px;
            width: 95%;
            margin: 20px auto 0px auto;
        }
    </style>
</head>

<body>
<div class="mytitle1">
    <h1>다비치 팬명록</h1>
</div>

<div class="mypost">

    <div class="first_nick_comment_button">
        <div class="mb-3">
            <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="닉네임">
        </div>
        <div class="mb-3">
            <textarea class="form-control" placeholder="응원댓글" id="exampleFormControlTextarea1" rows="5"></textarea>
        </div>
        <div>
            <button type="button" class="btn btn-dark">응원남기기</button>
        </div>

    </div>

    <div class="card">
        <div class="card-body1">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer">다빛이 <cite title="Source Title">-밍핼-</cite>
                </footer>
            </blockquote>
        </div>
        <div class="card-body2">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!!</p>
                <footer class="blockquote-footer">다빛이 <cite title="Source Title">-밍핼-</cite>
                </footer>
            </blockquote>
        </div>
        <div class="card-body3">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!!!</p>
                <footer class="blockquote-footer">다빛이 <cite title="Source Title">-밍핼-</cite>
                </footer>
            </blockquote>
        </div>

    </div>
</div>


</body>

</html>

댓글 알림