오늘은 회원가입 기본 툴에서 유효성 검사를 할 수 있게 만들어 보았다.

회원가입 시 유효성 검사

html파일 만들기

head

• 기본적인 html틀에서 Css를 추가 하기 위해 head부분에
  <link rel="stylesheet" href="style.css">를 추가했다.

body

Id부분 만들기

• 처음 만든 부분이 회원가입이라는 것을 명시 할 수 있는 타이틀을 <h>마크다운을 통해 만들어주고 그 밑에 유효성 검사를 위해 필요한 실패 시 명시 되는 메시지와 성공 시 명시 되는 메시지의 class 값을 할당한다.

<h1>회원가입</h1>
    <fieldset>
        <label>ID</label>
        <input type = "text" id="username">
        <div class="failure-message hide">아이디는 네 글자 이상이어야 합니다.</div>
        <div class="success-message hide">사용가능한 아이디입니다.</div>
    </fieldset>

회원가입

ID

• 그럼 위와 같이 ID 입력 시 성공, 실패 두 가지 상황에서의 텍스트가 표현됩니다. 이 텍스트는 내가 실제로 이 행동을 취했을 때 나오도록 해야된다. 이는 이후 JavaScript에서 설명한다.

Password부분 만들기

• 일단 ID를 만드는 부분에서 대부분의 틀을 만들어 놨기 때문에 Password도 비슷하게 만들면된다.
• 지금 여기서 만들고 싶은 것은 회원가입 시 password와 이를 한 번 더 같은지 확인하는 툴을 만들려고 한다.
• Check password를 추가로 만들어서 이 부분에 class를 할당해서 Password와 Check password가 매칭이 되지 않았을 때 '비밀번호가 다릅니다.'라는 텍스트가 구현되도록 기초 공사를 한다.

    <fieldset>
        <label>PASSWORD</label>
        <input type = "password" id="password">
        
    </fieldset>

    <fieldset>
        <label>CHECK PASSWORD</label>
        <input type = "password" id="password-retype">
        <div class="mismatch-message hide">비밀번호가 다릅니다.</div>
    </fieldset>

    <fieldset>
        <button>SIGN UP</button>
    </fieldset>

PASSWORD CHECK PASSWORD SIGN UP

• 위와 같이 Check password부분에서 표현되는 것이 확인 됐다.
• 또한 간단한 Sign up 버튼을 <button>을 통해 만들었다.

마무리

마지막으로 body의 마지막 부분에 <script src="script.js"></script>을 추가해 JavaScript가 이 html에 영향을 줄 수 있게 했다.

이로써 기본적인 html공사는 끝났고, 다음 글에서 JavaScript를 통해 실질적으로 사용되는 방식으로 구현되게 만들어 보겠다.