모바일 처리 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

모바일 처리

undefined주차

황*지

・

추천

・

조회수

답변 완료

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

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

모바일 처리시 사용되는 max-width와 width의 의미가 무엇인가요?
휴대폰이 375px;이라고 하는데 95%면 475px;까지니깐 화면에 넘치는거 아닌가요?(1번 개념을 잘못 이해했을 수도 있음)
모바일 처리를 하면 width가 있는 값에 max-width와 width를 설정해줘야 되는 거 아닌가요? 예를들어, mytitle, button는 500px; 아래값으로로 되어있어서 안하는 건가요? 모바일 처리를 해야되는 기준이 무엇인지 궁금합니다. (제 생각엔 mytitle은 100%로 설정했기때문에 알아서 맞춰질 것이고, button은 크게는 A로 묶여있어서 적용이 된 것이다 라고 생각을 했는데 이게 맞나요?)

작성한 코드 및 에러 메세지

1.2번 질문 코드

max-width: 500px;
width:95%;

3번 질문 코드

<!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{
      background-color: green;
      color: white;
      width: 100%;
      height: 250px;

      background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
      background-position: center;
      background-size: cover;

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

    .mytitle > button {
      width: 200px;
      height: 50px;
      background-color: transparent;
      color: white;
      border-radius: 50px;
      border: 1px solid white;
    }
    .mytitle > button:hover {
      border: 2px solid white;
    }
    .myturn{
      color: gray;
    }
    .wrap{
      max-width: 1200px;
      width:95%;
      margin: 20px auto 0px auto;
    }

    .A{
      max-width: 500px;
      width:95%;
      margin: 20px auto 0px auto;

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

    .B{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      margin-top: 10px;
    }
    .B > button {
      margin-right: 10px;
    }
  </style>
</head>


<body>
  <div class="mytitle">
    <h1>내 생애 최고의 영화들👫</h1>
    <button>영화 기록하기</button>
  </div>

  <div class="A">
    <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="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" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
      <label for="floatingTextarea">코멘트</label>
    </div>

    <div class="B">
      <button type="button" class="btn btn-dark">기록하기</button>
      <button type="button" class="btn btn-outline-dark">닫기</button>
    </div>
  </div>


  <div class="wrap">
    <div class="row row-cols-1 row-cols-md-4 g-4">
      <div class="col">
        <div class="card">
          <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
               class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">영화 제목이 들어갑니다.</h5>
            <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
            <p>⭐⭐⭐</p>
            <p class="myturn">여기에 코멘트가 들어갑니다.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
               class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">영화 제목이 들어갑니다.</h5>
            <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
            <p>⭐⭐⭐</p>
            <p class="myturn">여기에 코멘트가 들어갑니다.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
               class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">영화 제목이 들어갑니다.</h5>
            <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
            <p>⭐⭐⭐</p>
            <p class="myturn">여기에 코멘트가 들어갑니다.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
               class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">영화 제목이 들어갑니다.</h5>
            <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
            <p>⭐⭐⭐</p>
            <p class="myturn">여기에 코멘트가 들어갑니다.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

댓글 알림