응답형 양식을 어떻게 만드는가: 응답형 양식

CSS를 사용하여 응답형 양식을 만들어보세요.

응답형 양식을 어떻게 만드는가

첫 번째 단계 - HTML 추가:

<form> 요소를 사용하여 입력을 처리합니다. PHP 튜토리얼에서 더 많은 정보를 얻을 수 있습니다.

각 필드에 입력을 추가하고(일치하는 레이블을 포함하여), <div> 요소를 사용하여 각 레이블과 입력을 감싸어 CSS로 지정된 너비를 설정합니다:

<div class="container">
  <form action="action_page.php">
    <div class="row">
      <div class="col-25">
        <label for="fname">이름</label>
      </div>
      <div class="col-75">
        <input type="text" id="fname" name="firstname" placeholder="당신의 이름..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="lname">성</label>
      </div>
      <div class="col-75">
        <input type="text" id="lname" name="lastname" placeholder="당신의 성..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="country">국가</label>
      </div>
      <div class="col-75">
        <select id="country" name="country">
          <option value="australia">오스트레일리아</option>
          <option value="canada">캐나다</option>
          <option value="usa">미국</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="subject">주제</label>
      </div>
      <div class="col-75">
        <textarea id="subject" name="subject" placeholder="글쓰기.." style="height:200px"></textarea>
      </div>
    </div>
    <div class="row">
      <input type="submit" value="제출">
    </div>
  </form>
</div>

두 번째 단계 - CSS 추가:

/* 입력 박스, 선택 요소 및 텍스트 필드에 스타일을 설정합니다 */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}
/* 레이블의 스타일을 설정하여 입력 박스 옆에 표시됩니다 */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}
/* 제출 버튼의 스타일을 설정합니다 */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}
/* 컨테이너의 스타일을 설정합니다 */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
/* 태그 부력 열: 25% 너비 */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}
/* 입력 부력 열: 75% 너비 */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}
/* 열 뒤의 부력을 제거합니다 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* 반응형 레이아웃 - 스크린 너비가 600px보다 작을 때, 두 열이 가로로 배치되지 않고 쌓이도록 합니다 */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

직접 시도해 보세요

관련 페이지

강의:HTML 양식

강의:CSS 양식