Day4. 과제 - 회원가입 form 구현하기

오늘은 form태그를 이용해 회원가입 창을 구현해보는 과제를 받았다.

이전에 form태그를 배웠을 때는 get과 post에 관해 깊게 공부하지 않고 넘어갔는데
오늘 직접 강사님이 node인가 express인가를 활용해서 데이터를 받는 것을 보여주셨다.

아직은 어려웠지만,, 공부하고 계속 보면 점점 익숙해지겠지..!

오늘 배운 다양한 종류의 form태그로 회원가입 창을 구현해 보았다.

강사님이 로그인 페이지, 약관동의 페이지, 회원정보 페이지 3개는 기본이라고 하셨는데,, 일단 로그인 페이지만 완성해 보았다..! html만 하니까 허전해서 css 작업도 해줬다.

일단 구현하는 것에만 집중해서 태그는,,, 시맨틱한지 잘모르겠다.😵‍💫🤣
어제 과제였던 구조나누기 연습을 많이 해봐야겠다. 구조나눠보면서 직접 구현도 해보고,,

<input>태그는 재밌는 태그 같다. type에 따라 표현이 달리 나오니까.

+ CSS없는 로그인 페이지

+ 코드~!!

<section class="login">
        <h1 class="login__top">
            <img src="../img/logo.png" alt="비주얼 팩토리 로고 이미지">
        </h1>
        <h2 class="login__header">
            회원 로그인
        </h2>
        <div class="login__part">
            <div class="login__input">
                <span>
                    아이디
                </span>
                <input type="text" placeholder="아이디를 입력해 주세요.">
                <span>
                    비밀번호
                </span>
                <input type="password" placeholder="비밀번호를 입력해 주세요.">
            </div>
            
            <div class="login__checkbox">
                <input type="checkbox" id="user-id-save">
                <span>
                    아이디 저장
                </span>
                <input type="checkbox" id="secure">
                <span>
                    보안접속
                </span>
            </div>
        </div>
        <button type="submit" class="login__button">
            로그인
        </button>
        <div class="login__links">
            <a href="#">
                회원가입 >
            </a>
            <a href="#">
                주문조회 >
            </a>
            <a href="#">
                아이디 찾기 >
            </a>
            <a href="#">
                비밀번호 찾기 >
            </a>
        </div>
    </section>