모바일 퍼스트 폼

Coddy HTML 여정의 실전 프론트엔드 섹션에 포함된 레슨. 35개 중 10번째.

Forms는 웹에서 가장 중요한 부분 중 하나입니다. 사용자는 끊임없이 입력하고, tap하고, Forms와 상호작용합니다. mobile 우선으로 Forms를 디자인할 때는 small screens에서의 사용성에 초점을 맞춥니다:

사용자가 쉽게 입력하고 탭할 수 있도록 inputs와 버튼을 더 크게 만드세요.
fields를 vertically 쌓고 full-width inputs를 사용하세요.
손가락을 위한 padding과 간격을 추가하세요.

모바일 예시:

input, button {
  width: 100%;       /* full width for small screens */
  padding: 0.75rem;  /* easier to tap */
  font-size: 1rem;   /* readable text */
}

그런 다음 larger screens (tablet or desktop)에서는 레이아웃을 개선합니다:

페이지에서 form을 center하세요.
일부 fields는 stack하는 대신 side by side로 배치하세요.
더 나은 모양을 위해 width와 간격을 조정하세요.

더 큰 화면을 위한 예:

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* center and limit width */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* side-by-side inputs */
  }
}

챌린지

쉬움

기본 HTML form이 주어집니다. 과제는 mobile-first 스타일을 설정하는 것입니다:

form 안의 요소는 vertically stack되어야 합니다. display: flex와 flex-direction: column을 사용하고, 보기 좋도록 gap을 추가하세요.
input, button, textarea 요소에 width: 100%을 적용하고 padding을 추가하여 mobile screens에서 충분히 크고 사용자가 쉽게 tap할 수 있도록 하세요.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Forms</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      background-color: #f0f4f8;
    }

    form {
      
    }

    input, textarea, button {
      padding: 0.75rem;    
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    button {
      background-color: #4a90e2;
      color: white;
      border: none;
      cursor: pointer;
    }

    /* Larger screens */
    @media (min-width: 768px) {
      form {
        max-width: 600px;
        margin: 0 auto; /* center form */
      }

      .row {
        display: flex;
        gap: 1rem; /* side-by-side fields */
      }

      .row input {
        width: 100%; /* split space equally */
      }
    }
  </style>
</head>
<body>
   <h1>Contact Us</h1>
  <form>
    <div class="row">
      <input type="text" placeholder="Name" required>
      <input type="email" placeholder="Email" required>
    </div>
    <textarea placeholder="Your Message" rows="4" required></textarea>
    <button type="submit">Send</button>
  </form>
</body>
</html>