HTML - 회원가입 양식 템플릿 만들기 기본편 with HTML5

프로그래밍/HTML, CSS
2021. 8. 16.

이번에는 HTML5를 기준으로 간단하게 회원가입 양식 템플릿을 만들어보겠습니다. 이전에 부트스트랩을 사용해서 회원가입 화면을 만든 적이 있는데요. 부트스트랩을 사용하지 않고 순수하게 HTML5만 사용해서 화면을 만들어 보는 것도 좋을 것 같아 이 글을 작성하게 되었습니다. 일반적으로 회원가입 양식에는 <input>, <textarea>, <select>, <option>, <label>, <checkbox> 등 여러 가지 태그를 이용합니다. 하지만 이 글은 기본편으로 처음 회원가입 화면 개발하는 분이 쉽게 개발을 해볼 수 있도록 간단하게 <input>, <textarea>만 사용해보았습니다.

시작하기

HTML5라는 단어를 써서 말은 거창해 보이지만 HTM5라고 해서 HTML과 다른 부분은 거의 없습니다. ". html" 파일의 선언 부만

<!DOCTYPE html>

위와 같은 구문을 명시하면 됩니다. HTML과 HTML5의 자세한 면면을 살펴보면 선언 외에도 여러 가지 내용이 있지만 가장 큰 차이는 선언과 지원되는 태그가 조금 다르다는 것뿐입니다. 예제로 작성한 코드도 선언부를 제외한 모든 부분이 일반적인 HTML 사용 방식과 같습니다. HTML과 HTML5가 가진 차이는 다른 이야기를 통해서 풀어보도록 하겠습니다.

예제 코드

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5 Form template</title>

  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;

      color: #ffffff;
      font-size: 15px;
    }

    input,
    textarea,
    button {
      color: #ffffff;
      font-size: 15px;
    }

    input:focus,
    textarea:focus,
    button:focus {
      outline: none;
    }

    textarea {
      resize: none;
    }

    h3 {
      margin: 0 0 12px 0;

      font-size: 45px;
      text-align: center;
      text-transform: uppercase;
    }

    p {
      padding: 0 10px;
      margin: 0 0 55px 0;

      text-align: center;
      line-height: 1.8;
    }

    .wrapper {
      min-height: 100vh;

      display: flex;
      align-items: center;
    }

    .form-container {
      max-width: 767px;

      margin: auto;
      padding: 70px 100px 80px;

      border: 10px solid #95c6db;
      background: #39459b;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    }

    .form-group {
      position: relative;

      display: block;

      margin-bottom: 48px;
    }

    .form-group span {
      position: absolute;
      top: 11px;

      color: #04a5db;
      font-size: 15px;
      cursor: text;
      transition: all 0.2s ease;
      transform-origin: 0 0;
    }

    .form-group span.border {
      position: absolute;
      left: 0;
      top: 41px;

      width: 100%;
      height: 2px;
      
      display: block;
      background: #ffffff;
      transform: scaleX(0);
      transition: all 0.15s ease;
    }

    .form-control {
      width: 100%;
      height: 43px;

      display: block;

      font-size: 15px;
      border: none;
      border-bottom: 2px solid #04a5db;
      background: none;
    }

    .form-control:focus,
    .form-control:valid {
      border-bottom: 2px solid #ffffff;
    }

    .form-control:focus + span,
    .form-control:valid + span {
      transform: translateY(-22px) scale(0.8);
    }

    .form-control:focus + span + .border,
    .form-control:valid + span + .border {
      transform: scaleX(1);
    }

    textarea.form-control {
      padding: 13px 1px;
    }

    button[type="submit"] {
      width: 162px;
      height: 51px;
    
      display: flex;
      align-items: center;
      justify-content: center;

      margin: 60px auto 0;
      padding: 0;

      color: #ffffff;
      border: 2px solid #ffffff;
      border-radius: 4px;
      background-color: #39459b;
      cursor: pointer;
      text-transform: uppercase;
      transition: background-color 0.2s linear;
    }

    button[type="submit"]:hover {
      background-color: #299cd1;
    }

    @media(max-width:767px) {
      h3 {
        font-size: 38px
      }

      p {
        padding: 0;
        font-size: 14px;
      }

      .wrapper {
        background: #39459b;
        border: 10px solid #95c6db;
      }

      .form-container {
        width: 100%;

        padding: 24px;
        
        border: none;
        box-shadow: none;
      }
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="form-container">
      <form>
        <h3>회원 가입</h3>
        <p>양식에 맞추어 회원 정보를 입력해주세요.</p>
        <div class="form-group">
          <input type="text" class="form-control" required>
          <span>이름</span>
          <span class="border"></span>
        </div>
        <div class="form-group">
          <input type="text" class="form-control" required>
          <span>E-mail</span>
          <span class="border"></span>
        </div>
        <div class="form-group">
          <textarea class="form-control" required></textarea>
          <span>요청사항</span>
          <span class="border"></span>
        </div>
        <button type="submit">신청하기</button>
      </form>
    </div>
  </div>
</body>

</html>

서두에서 이야기한 것처럼 예시로 작성한 코드는 <form> 안에서 <input>, <textarea>만 사용해서 회원가입 양식 템플릿을 만들었습니다. 예제 코드는 위에 소스 코드를 가져가셔도 되고 별도로 첨부한 아래의 파일을 다운로드하셔서 사용하셔도 됩니다.

회원가입 양식 템플릿 만들기 기본편 with HTML5.html

0.00MB

HTML5로 만들어보는 회원가입 양식 템플릿 만들기

이 예제 코드를 작성하면서 핵심적으로 생각했던 부분은 총 3가지입니다.

1. required

<input type="text" class="form-control" required>

사용자로부터 값을 입력받는 태그 요소들은 required라는 attribute를 통해 필수 값 여부를 설정할 수 있습니다. 오래된 브라우저나 IE 같은 경우에는 동작이 안 되는 경우가 있습니다.

2. media query 적용

@media(max-width:767px) {
  ...
}

반응형 웹 화면을 만드는 경우 필수적으로 사용되는 CSS의 미디어 쿼리입니다. 화면의 크기를 기준으로 새로운 CSS가 적용될 수 있도록 만들어 주는 방법입니다.

3. focus, valid를 이용한 애니메이션

.form-control:focus,
.form-control:valid {
  border-bottom: 2px solid #ffffff;
}

.form-control:focus + span,
.form-control:valid + span {
  transform: translateY(-22px) scale(0.8);
}

.form-control:focus + span + .border,
.form-control:valid + span + .border {
  transform: scaleX(1);
}

단순히 <input>, <textarea>만 사용하면 화면에 사용자의 이목을 끌 수가 없기 때문에 값을 입력받는 부분에 transform을 적용하여 움직이는 효과를 추가했습니다.

끝맺음

HTML5를 이용해서 간단하게 회원가입 화면을 만들어보았습니다. 하지만 이 회원가입 템플릿 양식은 실무에서 사용하기 어렵습니다. 사용한 태그가 제한적이기도 하지만, 실제로 개발 요청이 들어오는 화면은 무수히 많은 요구사항을 내포하고 있기 때문입니다. 물론 초보 개발자용으로 내용을 작성했기 때문이기도 합니다.

그렇기 때문에 단순한 예제라고 생각하시고 학원에서 혹은 토이 프로젝트에서 가벼운 마음으로 사용해보실 수 있도록 만들어진 회원가입 양식 템플릿입니다. 다음에는 실무에서 사용해도 무리 없을 정도의 회원가입 양식 템플릿을 만들어보도록 하겠습니다.

저작자표시 비영리 변경금지

'프로그래밍 > HTML, CSS' 카테고리의 다른 글

HTML - 참조값으로 접근하는 DOM의 노드 탐색 기능 (0)	2021.11.30
CSS - 스타일시트의 최신 버전은 왜 3이 끝일까? [ CSS Level 3 ] (2)	2021.08.24
HTML - <a> anchor 태그와 href를 알아보자 (0)	2021.07.22
HTML - Form을 이해하고 사용하자 (0)	2021.07.19
CSS - 스타일시트란 무엇일까? (1)	2021.06.30

개발자 일지