국비학원 37일차 : NAVER 회원가입 화면 구현 중간시험

Digeut·2023년 4월 18일

국비학원

목록 보기

31/44

HTML

<!DOCTYPE html>
<html lang="en">
<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>네이버 : 회원가입</title>
    <link rel="stylesheet" href="./naver-signUp.css" />
    <script src="./naver-signUp.js">
    </script>
</head>
<body>
    <div id="wrap">
        <!--header-->
        <div id="header" class="join_membership" role="banner">
            <h1>
                <a href="http://www.naver.com" class="h_logo">
                    <span class="blind">NAVER</span>
                </a>
            </h1>
        </div>
        <form id="join_form" method="post" action="/user2/V2Join?m=end">
            <!--container-->
            <div id="container" role="main">
                <div id="content">
                    <h2 class="blind">네이버 회원가입</h2>
                    <div class="join_content">
                        <!--아이디 비밀번호 입력-->
                        <div class="low_group">
                            <div class="join_row">
                                <h3 class="join_title">
                                    <label for="id">아이디</label>
                                </h3>
                                <span class="ps_box int_id">
                                    <input type="text" id="id" name="id" class="int" title="ID" maxlength="20" />
                                    <span class="step_url" >@naver.com</span>
                                </span>

                                <span class="error_next_box" id="diMsg" style="display: none;" aria-live="assertive">
                                    5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.
                                </span>

                            </div>

                            <div class="join_row">
                                <h3 class="join_title">
                                    <label for="psw1">비밀번호</label>
                                </h3>
                                <span class="ps_box int_pass" id="pswd1Img">
                                    <input type="password" id="pswd1" name="pswd1" class="int" title="비밀번호입력" aria-describedby="pswd1Msg" maxlength="20" />
                                    <span class="1bl">
                                        <span id="pswd1Span" class="step=txt"></span>
                                    </span>
                                </span>

                                <span class="error_next_box" id="pswd1Msg" style="display: none;" aria-live="assertive">
                                    필수 정보입니다.
                                </span>
                            
                                <h3 class="join_title">
                                    <label for="pswd2">비밀번호 재확인</label>
                                </h3>
                                <span class="ps_box int_pass_check" id="pswd2Img">
                                    <input type="password" id="pswd2" name="pswd2" class="int" title="비밀번호 재확인 입력" aria-describedby="pswd2Blind" maxlength="20" />
                                
                                </span>

                                <span class="error_next_box" id="pswd2Msg" style="display: none;" aria-live="assertive">
                                    필수 정보입니다.
                                </span>
                            </div>
                        </div>
                        <!--이름 생년월일 입력-->
                        <div class="low_group">
                            <!--이름입력-->
                            <div class="join_row">
                                <h3 class="join_title">
                                    <label for="name">이름</label>
                                </h3>
                                <span class="ps_box box_right_space">
                                    <input type="text" id="name" name="name" title="이름" class="int" maxlength="40" />
                                </span>

                                <span class="error_next_box" id="nameMsg" style="display: none;" aria-live="assertive">
                                    필수 정보입니다.
                                </span>

                            </div>
                            <!--생년월일입력-->
                            <div class="join_row join_birthday">
                                <h3 class="join_title">
                                    <label for="yy">생년월일</label>
                                </h3>
                                <!--생년월일 선택창-->
                                <div class="bir_wrap">
                                    <div class="bir_yy">
                                        <span class="ps_box">
                                            <input type="text" id="yy" placeholder="년(4자)" aria-label="년(4자)" class="int" maxlength="4"/>
                                        </span>
                                    </div>
                                    <div class="bir_mm">
                                        <span class="ps_box">
                                            <select id="mm" class="sel" aria-label="월">
                                                <option value>월</option>
                                                <option value="01">1</option>
                                                <option value="02">2</option>
                                                <option value="03">3</option>
                                                <option value="04">4</option>
                                                <option value="05">5</option>
                                                <option value="06">6</option>
                                                <option value="07">7</option>
                                                <option value="08">8</option>
                                                <option value="09">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>
                                            </select>
                                        </span>
                                    </div>
                                    <div class="bir_dd">
                                        <span class="ps_box">
                                            <input type="text" id="dd" placeholder="일" aria-label="일" class="int" maxlength="2"/>
                                            <label for="dd" class="1bl"></label>
                                        </span>
                                    </div>
                                </div>

                                <span class="error_next_box" id="birthdayMsg" style="display: none;" aria-live="assertive">
                                    태어난 년도 4자리를 정확하게 입력하세요.
                                </span>
                                
                            </div>
                            <!--성별입력-->
                            <div class="join_row join_sex">
                                <h3 class="join_title">
                                    <label for="gender">성별</label>
                                </h3>
                                <div class="ps_box gender_code">
                                    <select id="gender" name="gender" class="sel" aria-label="성별">
                                        <option value selected>성별</option>
                                        <option value="M">남자</option>
                                        <option value="F">여자</option>
                                        <option value="U">선택안함</option>
                                    </select>
                                </div>
                            </div>

                            <span class="error_next_box" id="genderMsg" style="display: none;" aria-live="assertive">
                                필수 정보입니다.
                            </span>

                            <!--본인확인 이메일-->
                            <div class="join_row join_email">
                                <h3 class="join_title">
                                    <label for="email">
                                        본인확인이메일
                                        <span class="terms_choice">(선택)</span>
                                    </label>
                                </h3>
                                <span class="ps_box int_email box_right_space">
                                    <input type="text" id="email" name="email" placeholder="선택입력" class="int" maxlength="100"/>
                                </span>
                            </div>
                        </div>
                        <!--휴대전화번호, 인증번호입력-->
                        <div class="join_row join_mobile" id="mobDiv">
                            <h3 class="join_title">
                                <label for="phoneNo">휴대전화</label>
                            </h3>
                            <div class="ps_box country_code">
                                <select id="nationNo" name="nationNo" class="sel" aria-label="전화번호 입력">
                                    <option value="82">대한민국 +82</option>
                                    <option value="241">가봉 +241</option>
                                </select>
                            </div>
                            <div class="int_mobile_area">
                                <span class="ps_box int_mobile">
                                    <input type="tel" id="phoneNo" name="phoneNo" placeholder="전화번호 입력" class="int" maxlength="16"/>
                                    <label for="phoneNo" class="1bl"></label>
                                </span>
                                <!--인증번호 받기 버튼-->
                                <a href="#" class="btn_verify btn_primary" id="btnSend" role="button">
                                    <span class>인증번호 받기</span>
                                </a>
                            </div>
                            <!--인증번호입력구간-->
                            <div class="ps_box_disable box_right_space" id="authNoBox">
                                <input type="tel" id="authNo" name="authNo" placeholder="인증번호 입력하세요" aria-describedby="wa_verify" class="int" disabled maxlength="4"/>
                                <!--<label id="wa_verify" for="authNo" class="1bl">
                                    <span class="wa_blind">인증받은 후 인증번호를 입력해야합니다</span>
                                    <span class="input_code" id="authNoCode" style="display: none;"></span>
                                </label>-->
                            </div>
                            <!--가입하기 버튼-->
                            <div class="btn_area">
                                <button type="button" id="btnJoin" class="btn_type btn_primary" onClick="onSubmitHandler()">
                                    <span>가입하기</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <!--footer-->
        <div id="footer" role="contentinfo">
            <ul>
                <li>
                    <a href="http://policy.naver.com/rules/service.html">이용약관</a>
                </li>
                <li>
                    <strong>
                        <a href="http://policy.naver.com/policy/privacy.html">개인정보처리방침</a>
                    </strong>
                </li>
                <li>
                    <a href="http://policy.naver.com/rules/disclaimer.html">책임의 한계와 법적고지</a>
                </li>
                <li>
                    <a href="https://help.naver.com/support/alias/membership/p.membership/p.membership_26.naver" target="_blank">회원정보 고객센터</a>
                </li>
            </ul>
            <address>
                <em>
                    <a href="https://www.navercorp.com/" target="_blank" class="logo">
                        <span class="blind">naver</span>
                    </a>
                </em>
                <em class="copy">Copyright</em>
                <em class="u_cri">©</em>
                <a href="https://www.navercorp.com/" target="_blank" class="u_cra">NAVER Corp.</a>
                <span class="all_r">All Rights Reserved.</span>
            </address>
        </div>
    </div>
</body>
</html>

CSS

body {
    position: relative;
    background: #f5f6f7;

    font-family: Dotum,'돋움',Helvetica,sans-serif;
    font-size: 12px;
    -webkit-text-size-adjust: none;
}

a {
    text-decoration: none;
    cursor: pointer;
}

h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;

    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: none;
}

h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

form{
    display: block;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: none;
}

div{
    display: block;
}

label {
    cursor: pointer;
}

input{
    border-radius: 0;
    appearance: none;
    outline: 0;
    text-decoration: none;
    cursor: pointer;
    -webkit-text-size-adjust: none;
}

option {
    font-weight: normal;
    display: block;
    white-space: nowrap;
    min-height: 1.2em;
    padding: 0px 2px 1px;
}

select{
    border-radius: 0;
    border: none;
    background: 0 0;

    appearance: none;
    outline: 0;
    text-decoration: none;
    cursor: pointer;
    -webkit-text-size-adjust: none;
}

ul {
    margin: 0 0 9px 0;
    -webkit-text-size-adjust: none;
}

li {
    text-align: -webkit-match-parent;
}

#container, #footer, #header {
    margin: 0 auto;
    max-width: 768px;
    min-width: 460px;
}

#header {
    position: relative;
    overflow: hidden;
    padding: 60px 0 20px;
    box-sizing: border-box;

    margin: 0 auto;
    max-width: 768px;
    min-width: 460px;
}

#container {
    width: auto;
    max-width: 768px;
    margin: 0 auto;
    /* max-width: 768px; */
    min-width: 460px;
}

#footer {
    clear: both;
    margin: 0 auto;
    padding: 30px 0 15px 0;
    text-align: center;
}

#footer * {
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #333;
}

#footer ul li:first-child {
    background: 0 0;
}

#footer ul li {
    font-size: 12px;
    position: relative;
    display: inline;
    padding: 0 3px 0 7px;
    white-space: nowrap;
    background: url(https://static.nid.naver.com/images/join/pc/bu_bar_2x.gif) left 50% no-repeat;
    background-size: 1px 10px;
}

/* @media (max-width: 1024px) */
#footer a, #footer a:visited {
    color: #7e7e7e;
}

#footer address {
    font: 9px/14px Verdana;
}

:root #footer address .logo {
    top: 2px;
    margin-left: 1px;
}

#footer address .logo {
    position: relative;
    display: inline-block;
    width: 63px;
    height: 12px;
    background: url(https://static.nid.naver.com/images/ui/login/pc_sp_login_190522.png) no-repeat;
    background-position: -242px 0;
    background-size: 460px auto;
}

#footer address span {
    font: 9px/14px Verdana;
    padding-left: 2px;
}

#footer address em {
    font: 9px verdana;
    padding-left: 4px;
}

#footer address a {
    font: bold 9px Verdana;
    color: #333;
}

#footer a {
    text-decoration: none;

}

.join_membership {
    padding-bottom: 20px;
}


.h_logo {
    display: block;
    margin: 0 auto;
    width: 240px;
    height: 44px;
    background-image: url(https://static.nid.naver.com/images/ui/join/m_naver_logo_20191126.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 240px auto;
    color: transparent;
    font-size: 0;
}

.blind {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
    width: 1px;
    height: 1px;
}

.row_group {
    overflow: hidden;
    width: 100%
}

.row_group+.row_group {
    margin-top: 20px;
}

.join_title {
    margin: 19px 0 8px;
    font-size: 14px;
    font-weight: 700;
}

.join_content{
    width: 460px;
    height: 995.60px;
    margin-left: 153px;
}

.step_url {
    position: absolute;
    top: 16px;
    right: 13px;
    font-size: 15px;
    line-height: 18px;
    color: #8e8e8e;
}

.ps_box, .ps_box_disable {
    display: block;
    position: relative;
    width: 100%;
    height: 51px;
    border: solid 1px #dadada;
    padding: 10px 110px 10px 14px;
    background: #fff;
    box-sizing: border-box;
    /* vertical-align: top; */
}

.ps_box.int_id {
    background: #fff;
    outline: 0;
}

.ps_box.int_pass{
    padding-right: 40px;
}

.ps_box.int_pass_check {
    padding-right: 40px;
}



.int {
    display: block;
    position: relative;
    width: 100%;
    height: 29px;
    padding-right: 25px;
    line-height: 29px;
    border: none;
    background: #fff;
    font-size: 15px;
    box-sizing: border-box;
    z-index: 10;
}

.ps_box.int_pass:after{
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 13px;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background-image: url(https://static.nid.naver.com/images/ui/join/m_icon_pw_step.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 125px 75px;
    cursor: pointer;
}

.ps_box.int_pass_check:after{
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 13px;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background-image: url(https://static.nid.naver.com/images/ui/join/m_icon_pw_step.png);
    background-repeat: no-repeat;
    background-size: 125px 75px;
    background-position: -27px 0;
    cursor: pointer;
}

.box_right_space {
    padding-right: 14px;
    box-sizing: border-box;
}

.join_row.join_birthday{
    padding: 0;
}

.bir_wrap{
    display: table;
    width: 100%;
}

.bir_dd, .bir_mm, .bir_yy {
    display: table-cell;
    table-layout: fixed;
    width: 147px;
    vertical-align: middle;
}

.join_birthday .ps_box {
    padding: 11px 14px;
}

.bir_mm+.bir_dd, .bir_yy+.bir_mm {
    padding-left: 10px;
}

:root .sel {
    background: #fff url(https://static.nid.naver.com/images/join/pc/sel_arr_2x.gif) 100% 50% no-repeat;
    background-size: 20px 8px;
}

.sel {
    width: 100%;
    height: 29px;
    padding: 7px 8px 6px 7px\9;
    font-size: 15px;
    line-height: 18px;
    color: #000;
    border: none;
    border-radius: 0;
}

.join_sex {
    overflow: hidden;
}

.join_sex .gender_code {
    display: block;
    width: 100%;
    padding-right: 7px;
    box-sizing: border-box;
}

.terms_choice {
    color: #8e8e8e;
}

.join_email .terms_choice {
    font-size: 12px;
    font-weight: 400;
}

.row_group+.join_mobile {
    margin-top: 20px;
}

.join_mobile {
    position: relative;
    overflow: hidden;
}

.join_mobile .int_mobile_area {
    position: relative;
    margin-top: 10px;
    padding: 0 125px 0 0;
}

.gender_nationality .gender_code, .join_mobile .country_code, .join_sex .gender_code {
    display: block;
    width: 100%;
    padding-right: 7px;
    box-sizing: border-box;
}

.country_code {
    position: relative;
    overflow: hidden;
}

.join_mobile .int_mobile {
    display: inline-block;
    width: 100%;
    padding: 10px 15px 10px 14px;
    vertical-align: top;
}

.ps_box .lbl {
    left: 0;
    padding: 0 14px;
    width: 100%;
    box-sizing: border-box;
}

.lbl {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -9px;
    font-size: 15px;
    line-height: 18px;
    color: #8e8e8e;
    z-index: 9;
}

.join_mobile .int_mobile_area .btn_verify {
    position: absolute;
    top: 0;
    right: 0;
    width: 115px;
    height: 51px;
    padding: 18px 0 16px;
    font-weight: 700;
    text-align: center;
    box-sizing: border-box;
    text-decoration: none;
}

.btn_verify {
    display: block;
    font-size: 15px;
    cursor: pointer;
}

.btn_primary {
    color: #fff;
    border: solid 1px rgba(0,0,0,.08);
    background-color: #03c75a;
}

.join_mobile .ps_box_disable, .join_mobile .ps_box_disable input {
    background: #f7f7f7;
    outline: 0;
}

.int_mobile_area+.ps_box, .int_mobile_area+.ps_box_disable, .ps_box_disable+.ps_box {
    margin-top: 10px;
}

.wa_blind {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
    width: 1px;
    height: 1px;
    font-size: 0;
}

.btn_area {
    margin: 30px 0 9px;
}

.btn_type {
    display: block;
    width: 100%;
    padding: 15px 0 15px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}

.copy{
    display: none;
}

address .u_cri {
    display: inline-block;
    font-size: 12px;
    font-family: Arial,Helvetica,sans-serif;
    font-weight: 400;
    color: #7e7e7e;
    margin: 0;
    padding-left: 1px;
}

#footer address .u_cra{
    display: inline-block;
    font-size: 12px;
    font-family: Arial,Helvetica,sans-serif;
    font-weight: 400;
    color: #7e7e7e;
}

/* #footer .u_cr, #footer address .all_r, #footer address .copy, #footer address .logo {
    display: none;
} */

.error_next_box {
    display: block;
    margin: 9px 0 -2px;
    font-size: 12px;
    line-height: 14px;
    color: red;
}

JavaScript

const onSubmitHandler = () => {
    const id = document.getElementById('id').value;

    if(!id.trim()){
        document.getElementById('diMsg').style.display = 'block';
        document.getElementById('pswd1Msg').style.display = 'block';
        document.getElementById('pswd2Msg').style.display = 'block';
        document.getElementById('nameMsg').style.display = 'block';
        document.getElementById('birthdayMsg').style.display = 'block';
        document.getElementById('genderMsg').style.display = 'block';
        return;
    }
    document.getElementById('diMsg').style.display = 'none';
    document.getElementById('pswd1Msg').style.display = 'none';
    document.getElementById('pswd2Msg').style.display = 'none';
    document.getElementById('nameMsg').style.display = 'none';
    document.getElementById('birthdayMsg').style.display = 'none';
    document.getElementById('genderMsg').style.display = 'none';

    const form = document.getElementById('join_form');
    form.submit();
}

최종 화면

모두 입력하지 않고 로그인 버튼 누르면 경고표시가 뜨게 함수를 진행해주었다.

Digeut

개발자가 될 거야!

이전 포스트

국비학원 36일차 : React, 클론코딩

다음 포스트

국비학원 37일차 : NAVER 회원가입 화면 구현 중간시험

국비학원

HTML

CSS

JavaScript

최종 화면

국비학원 36일차 : React, 클론코딩

국비학원 38일차 : HTTP, API

0개의 댓글