1주차 11강에서 모바일 변환 후 my post의 위치에 관한 질문

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

1주차 11강에서 모바일 변환 후 my post의 위치에 관한 질문

undefined주차

김*홍

・

추천

・

조회수

답변 완료

단순히 따라하기만 하면 뭔가 진행하시는 강의에 구멍이 많아서 의외로 시간을 많이 잡아먹네요.

간신히 하나씩 오류를 찾아서 메꿔가고 있기는 한데.. 이래서 5주차 숙제 제출하고 완강처리 될 수 있을지 모르겠어요.

일단 질문은 웹페이지에서 퀴즈박스는 center에 정상적으로 위치하고 있는데,

max-width를 주고 나니 사이즈를 줄였다 늘이면 퀴즈 박스가 오른쪽에 치우쳐 있습니다. (줄였을 땐 의외로 정상이에요/ 검사에서 모바일뷰로 봐도)

질문: 웹에서 크기를 줄였다가 늘리면 mypost의 퀴즈 박스가 자꾸 우측으로 가서 붙는데.. 이건 왜 이럴까요? (처음에는 정상이다가)

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">

    <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script crossorigin="anonymous"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></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-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.ilovepc.co.kr/news/photo/201912/32920_61225_4935.jpg");
            height: 250px;
            width: 100%;
            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: 30px;
            border: 1px solid white;
            margin-top: 15px;
        }

        .mytitle > button:hover {
            border: 2px solid white;
        }
        .mycommnet{ color: darkgray;
        }
        .wrap {
            max-width 1200px;
            width: 95%
            margin 30px auto opx auto;
        }
        .mypost {
            max-width: 500px;
            width: 95%
            margin: 20px auto 20px auto;

            box-shadow: 0px 0px 3px 0px gray;
            padding: 20px;
        }
        .mybtn {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-top: 10px;
        }
        .mybtn {
            margin-right: 10px;
        }
        </style>
</head>
<body>
<div class="mytitle">
    <h1>웹개발 1주차 9강 학습</h1>
    <button>부트스트랩 꿀팁</button>
</div>
    <div class="mypost">
        <div class="form-floating mb-3">
            <input class="form-control" id="floatingInput" placeholder="name@example.com" type="email">
            <label for="floatingInput">영화 URL</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" id="floatingTextarea2" placeholder="Leave a comment here"
                      style="height: 100px"></textarea>
            <label for="floatingTextarea2">코멘트</label>
        </div>
        <div class="mybtn">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button type="button" class="btn btn-light">닫기</button>
        </div>
    </div>
    </div>
<div="wrap">
<div class="row row-cols-1 row-cols-md-4 g-4">
    <div class="col">
        <div class="card">
            <img alt="..."
                 class="card-img-top" src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg">
            <div class="card-body">
                <h5 class="card-title">더 수어사이드 스쿼드</h5>
                <p class="card-text">악당들이 세상을 구한다</p>
                <P>⭐⭐⭐</P>
                <P="mycomment">역시 할리퀸은 마고로비</P>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <img alt="..."
                 class="card-img-top"
                 src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg">
            <div class="card-body">
                <h5 class="card-title">더 수어사이드 스쿼드</h5>
                <p class="card-text">악당들이 세상을 구한다</p>
                <P>⭐⭐⭐</P>
                <P="mycomment">역시 할리퀸은 마고로비</P>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <img alt="..."
                 class="card-img-top"
                 src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg">
            <div class="card-body">
                <h5 class="card-title">더 수어사이드 스쿼드</h5>
                <p class="card-text">악당들이 세상을 구한다</p>
                <P>⭐⭐⭐</P>
                <P="mycomment">역시 할리퀸은 마고로비</P>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <img alt="..."
                 class="card-img-top"
                 src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg">
            <div class="card-body">
                <h5 class="card-title">더 수어사이드 스쿼드</h5>
                <p class="card-text">악당들이 세상을 구한다</p>
                <P>⭐⭐⭐</P>
                <P="mycomment">역시 할리퀸은 마고로비</P>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>

댓글 알림