모바일 퍼스트 폼

Coddy HTML 여정의 Practical Frontend 섹션에 포함된 레슨 — 35개 중 10번째.

폼은 웹에서 가장 중요한 부분 중 하나입니다 — 사용자는 끊임없이 폼을 입력하고, 탭하고, 상호작용합니다. 모바일 우선으로 폼을 설계할 때, 우리는 작은 화면에서의 사용성에 집중합니다:

사용자가 쉽게 입력하고 탭할 수 있도록 입력창과 버튼을 더 크게 만드세요.
필드를 세로로 배치하고 전체 너비 입력창을 사용하세요.
손가락으로 터치하기 쉽도록 패딩과 간격을 추가하세요.

모바일용 예시:

input, button {
  width: 100%;       /* 작은 화면을 위한 전체 너비 */
  padding: 0.75rem;  /* 탭하기 더 쉬움 */
  font-size: 1rem;   /* 읽기 쉬운 텍스트 */
}

그런 다음, 더 큰 화면(태블릿 또는 데스크톱)의 경우 레이아웃을 개선합니다:

페이지에서 양식을 중앙에 배치합니다.
일부 필드를 세로로 쌓는 대신 나란히 배치합니다.
더 나은 모양을 위해 너비와 간격을 조정합니다.

더 큰 화면을 위한 예시:

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* 너비 제한 및 중앙 정렬 */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* 입력란을 가로로 배치 */
  }
}

챌린지

쉬움

기본적인 HTML 양식이 제공됩니다. 여러분의 작업은 모바일 우선 스타일을 설정하는 것입니다:

양식 내부의 요소들은 수직으로 쌓여야 합니다. display: flex와 flex-direction: column을 사용하고, 보기 좋게 gap을 추가하세요.
input, button, 및 textarea 요소에 width: 100%를 적용하고 padding을 추가하여 모바일 화면에서 충분히 크고 사용자가 탭하기 쉽게 만드세요.

치트 시트

모바일 우선으로 폼을 설계할 때는 작은 화면에서의 사용성에 집중하세요:

사용자가 쉽게 입력하고 탭할 수 있도록 입력창과 버튼을 더 크게 만듭니다.
필드를 세로로 배치하고 전체 너비(full-width) 입력창을 사용합니다.
손가락 터치를 위해 패딩(padding)과 간격을 추가합니다.

모바일 우선 폼 스타일:

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

더 큰 화면(태블릿 또는 데스크톱)의 경우, 레이아웃을 개선합니다:

페이지 중앙에 폼을 배치합니다.
일부 필드를 세로로 쌓는 대신 나란히 배치합니다.
더 나은 외관을 위해 너비와 간격을 조정합니다.

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

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

직접 해보기

<!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>