국비학원 33일차 : CSS, 클론코딩

Digeut·2023년 4월 12일
CSS국비학원클론코딩
0

국비학원

목록 보기
27/44

상단의 ID로그인, 일회용번호, QR코드에 해당하는 탭은 제외하고
클론코딩을 진행하였다.

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-sign-in.css" /> <!--스타일시트를 따로 css로빼서 적용-->
    <script>
        const onSubmitHandler = (/*매개변수*/) => { /*구현부*/
            const id = document.getElementById('id').value; /*아이디 요소를 가져올수있다*/
            /*console.log(id);
            console.log(id.trim());*/
            if(!id.trim/*문자열 앞뒤 공백 제거*/()){ //id가 빈문자열이면?이라는 조건문
                /*js는 문자열로 논리연산자 쓸수있다?*/
                document.getElementById('sign-in-error').style.display = 'block';
                return;
            }
            document.getElementById('sign-in-error').style.display = 'none'; /*입력하면 다시 경고문구 사라지게 해준다*/

            const form = document.getElementById('form');
            form.submit(); //실제 네이버 로그인 화면으로 넘어가게된다
        }
    </script>
</head>
<body>
    <!--Header-->
    <div class="header">
        <!--header-inner-->
        <div class="header-inner">
            <a href="https://naver.com" class="logo">
                <h1 class="blind">NAVER</h1>
            </a>
            <div class="lang">
                <select class="select">
                    <option>한국어</option>
                    <option>English</option>
                </select>
            </div>
        </div>
    </div>
    <!--Main-->
    <div class="main">
        <div class="content">
            <!--로그인 wrapper-->
            <div class="sign-in-wrapper">
                <form id="form" action="https://nid.naver.com/nidlogin.login" method="POST">
                    <ul class="panel-wrapper">
                        <li class="panel-item"> <!--li가 뭐지-->
                            <div class="panel-inner">
                                <!--ID password wrapper-->
                                <div class="id-password-wrapper">
                                    <div class="input-row">
                                        <div class="icon-shell">
                                            <span class="icon-id">
                                                <span class="blind">아이디</span>
                                            </span>
                                        </div>
                                        <input type="text" class="input-text" maxlength="41" placeholder="아이디" name="id" id="id" />
                                    </div>
                                    <div class="input-row">
                                        <div class="icon-shell">
                                            <span class="icon-pw">
                                                <span class="blind">비밀번호</span>
                                            </span>
                                        </div>
                                        <input type="password" class="input-text" maxlength="16" placeholder="비밀번호" name="pw" id="pw" />
                                    </div>
                                </div>
                                <!--sign In Keep wrapper-->
                                <div class="sign-in-keep-wrapper">
                                    <div class="keep-check">
                                        <input type="checkbox" class="input-keep" value="off"/>
                                        <label class="keep-text">로그인 상태 유지</label>
                                    </div>
                                    <div class="ip-check"></div>
                                </div>
                                <!--Sign in error-->
                                <div id="sign-in-error" class="sign-in-error" style="display:none;">
                                    <div class="error-message">
                                        <strong>아이디</strong>를 입력하세요
                                    </div>
                                </div>
                                <!--sign In button wrapper-->
                                <div class="sign-in-button-wrapper">
                                    <button type="button" class="sign-in-button" onclick="onSubmitHandler()">
                                        <span class="button-text">로그인</span>
                                    </button>
                                </div>
                            </div>
                        </li>
                    </ul>
                </form>
            </div>
            <!--페이지 이동 네비게이션-->
            <ul class="find-wrapper">
                <li>
                    <a class="find-text" href="https://nid.naver.com/user2/api/route?m=routePwInquiry&lang=ko_KR">비밀번호 찾기</a>
                </li>
                <li>
                    <a class="find-text" href="https://nid.naver.com/user2/api/route?m=routeIdInquiry&lang=ko_KR">아이디 찾기</a>
                </li>
                <li>
                    <a class="find-text" href="https://nid.naver.com/user2/V2Join?m=agree&lang=ko_KR">회원가입</a>
                </li>
            </ul>
            <!--광고 banner-->
            <div class="banner-wrapper">
                <div class="banner-content">
                    <img class="banner-img" src="https://ssl.pstatic.net/melona/libs/1378/1378592/fe1b4bd9453e84b57ed7_20230407151920279.jpg"/>
                </div>
            </div>
        </div>
    </div>
    <!--Footer-->
    <div class="footer">
        <div class="footer-inner">
            <ul class="footer-link">
                <li><a class="footer-item"><span class="text">이용약관</span></a></li>
                <li><a class="footer-item"><span class="text"><strong>개인정보처리방침</strong></span></span></a></li>
                <li><a class="footer-item"><span class="text">책임의 한계와 법적고지</span></a></li>
                <li><a class="footer-item"><span class="text">회원정보 고객센터</span></a></li>
            </ul>
            <div class="footer-copy">
                <a href="https://naver.com">
                    <span class="footer-logo">
                        <span class="blind">네이버</span>
                    </span>
                </a>
                <span class="text">Copylight</span>
                <span class="copy">© NAVER Corp.</span>
                <span class="text">All Rights Reserved.</span>
            </div>
        </div>
    </div>
</body>
</html>

CSS

* {
    margin: 0;
}
body {
    height: 100%;
    position: relative;
}
ul {
    list-style: none;
    padding: 0px;
}

li{
    margin: 0;
    padding: 0;
}

input{
    border-radius: 0;
    border: none;
    background: 0 0;
    outline: 0;
    text-decoration: none;
    cursor: pointer;

}
button{
    cursor: pointer;
}
a {
    text-decoration: none; /*밑줄 없어짐*/
    cursor: pointer;
}
.header{
    /*background-color: azure;*/
    padding-bottom: 48px;
    /*display: flex;
    justify-content: center; 정렬방식1*/

}
.header-inner {
    position: relative;
    /*background-color: aqua;*/
    width: 743px;
    margin: 0 auto; /*정렬방식 2*/
    padding-top : 108px;
    text-align: center;
}
.logo{
    display: inline-block;
    background-image: url(https://ssl.pstatic.net/static/nid/login/m_sp_00_common_978240a6.png);
    background-size: 244px 107px; 
    background-position: 0 -51px; /*왼쪽 위의 위치?*/
    background-repeat: no-repeat; /*이미지가 사이즈 다 차지 안할때 반복할지 지정*/
    width: 155px; 
    height: 30px;
}
.blind {
    position: absolute; /*부모에 대비한 절대적 위치*/
    width: 1px;
    height: 1px;
    overflow: hidden; /*블록지정해서 가로세로높이 지정했을때, 이미지나 글자가 초과해서넘어갈때 이걸 어떻게 처리할건지*/
}
.lang{
    position: absolute;
    top: 20px;
    right: 0px; /*부모공간에 대한 위치를 나타내게 된다. */
}
.select{
    position: relative;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px; /*장간을 말하는건가?*/
    width: 100%; /*부모사이즈를 100으로 따라간다*/
    min-width: 95px; /*반응형일때 줄어도 95밑으로는 줄어들지 않도록 한다*/
    height: 30px;
    padding: 4px 10px 6px 8px; /*사이즈 형태에서 여백 지정해줄때 위 오른쪽 아래 왼쪽순서로 여백을 지정해줄수있다*/
    color: #333;
    border: 1px solid #CCC; /*너비 스타일 컬러 한번에 지정해준것*/
    border-radius: 0px; /*꼭지점의 둥근정도*/
    cursor: pointer; /*마우스 모양의 변화를 준다*/
    z-index: 1; /*구현 페이지를 레이어처럼 층층이 쌓일때 우선순위를 정하는것 수가 클수록 위에 올라가게된다 맨위에 올릴땐 9999*/
}

.sign-in-wrapper{
    /*background-color: burlywood;*/
    width: 460px;
    margin: 0 auto;
}
.panel-wrapper{
    position: relative;
    z-index: 3;
    margin-top: -8px; /*조금 겹치게 넣어서 자연스럽게 된다.. */

}

.panel-item{
    border: 1px solid #c6c6c6;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 5px 8px 0 rgba(68, 68, 68, .04);
}

.panel-inner{
    padding: 20px 28px;
}

.input-row{
    position: relative;
    display: table;
    table-layout: fixed;
    width: -webkit-fill-available;
    height: 100%;
    border: 1px solid #dadada;
    padding: 14px 17px 13px;
}

.input-row:first-child{ /*내 밑에 오는 첫번째 자식*/
    border-radius: 6px 6px 0px 0px;
    box-shadow: none;
}

.input-row:last-child{
    border-radius: 0 0 6px 6px;
}

.input-row+.input-row{
    margin-top: -1px;
}
.icon-shell{
    display: table-cell;
    width: 24px;
    vertical-align: middle;
}
.icon-id{
    position: absolute;
    top: 50%;
    left: 17px;
    margin-top: -8px;
    background-position: -93px -203px;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    background-image: url(https://ssl.pstatic.net/static/nid/login/m_sp_01_login_008d5216.png);
    background-size: 266px 225px;
}
.icon-pw{
    position: absolute;
    top: 50%;
    left: 17px;
    margin-top: -8px;
    background-position: -129px -203px;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    background-image: url(https://ssl.pstatic.net/static/nid/login/m_sp_01_login_008d5216.png);
    background-size: 266px 225px;
}
.input-text{
    position: relative;
    display: table-cell;
    padding-right: 30px;
    width: -webkit-fill-available;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: -0.5px; /*문자와 문자 사이의 간격*/
    color: #222;
    z-index: 4;
}

.sign-in-keep-wrapper{
    position: relative;
    margin-top: 13px;
    padding-right: 90px;
}

.keep-check{
    position: relative;
    padding-left: 23px;
}

.ip-check{
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 38px;
}

.input-keep{
    position: absolute;
    top: 2px;
    left: 3px;
    width: 15px;
    height: 15px;
}
.keep-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-position: -244px -87px;
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    background-color: #fff;
    background-image: url(https://ssl.pstatic.net/static/nid/login/m_sp_01_login_008d5216.png);
    background-size: 266px 225px;
}

.keep-text{
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    color: #777;
}

.sign-in-button-wrapper{
    margin-top: 38px;

}

.sign-in-button{
    display: block;
    width: -webkit-fill-available;
    padding: 13px 0 13px;
    border-radius: 6px;
    border: solid 1px rgba(0,0,0,0.15);
    background-color: #03c75a;
    /*box-sizing: border-box;*/
}

.button-text{
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: #fff;
}

.find-wrapper{
    padding: 20px 0 35px;
    text-align: center;
}

.find-wrapper li{
    position:relative;
    display: inline-block;
}

.find-text{
    display: inline-block;
    font-size: 14px;
    line-height: 17px;
    text-decoration: none;
    color: #888;
    vertical-align: top;
}

.find-wrapper li+li {
    padding-left: 28px;
}

.find-wrapper li+li::before{
    content: '';
    position: absolute;
    top: 3px;
    left: 12px;
    width: 1px;
    height: 12px;
    border-radius: 0.5px;
    background-color: #dadada;
}
.banner-wrapper{
    width: 460;
    height: 147px;
    margin: 0 auto;
    text-align: center;
}

.banner-content{
    width: 100%;
    height: auto;
    margin: 0 auto;
    line-height: 0;
}

.banner-img{
    width: 460px;
}

.footer {
    padding: 63px 0 32px;

}

.footer-inner{
    position: relative;
    text-align: center;
}

.footer-link li {
    position: relative;
    display: inline;
}

.text{
    font-size: 12px;
    line-height: 15px;
    letter-spacing: -0.5px;
    color: #888;

}

.footer-link li+li {
    position: relative;
    padding-left: 13px;
}
.footer-link li+li ::before{
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 1px;
    height: 11px;
    background-color: #dadada;
}

.footer-logo{
    display: inline-block;
    vertical-align: bottom;
    background-position: -157px -51px;
    background-repeat: no-repeat;
    width: 70px;
    height: 15px;
    background-image: url(https://ssl.pstatic.net/static/nid/login/m_sp_00_common_978240a6.png);
    background-size: 244px 107px; 
}

.footer-copy{
    padding: 0 2px;
    font-weight: 500;
    color: #000;
    line-height: 16px;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 12px;
    letter-spacing: -0.5px;

}

.footer-item span {

    vertical-align: top;
}

.sign-in-error{
    position: relative;
    min-height: 34px;
    margin: 24px 0 -22px;
    padding-right: 40px;
}

.error-message{
    display: inline-block;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -.5px;
    color: #ff003e;
    vertical-align: middle;
}

결과

🙄혼자서 연습 해본 결과


도대체 어디서 잘못된걸까...

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-signIn.css" />
</head>
<body>
    <!--header-->
    <div class="header">
        <div class="header-inner">
            <a herf="http://naver.com" class="logo">
                <h1 class="blind">NAVER</h1>
            </a>
            <div class="lang" id="show-locale-switch">
                <select id="locale-switch" name="locale-switch" title="언어선택" class="sel">
                    <option value="kor_KR">한국어</option>
                    <option value="eng_US">English</option>
                </select>
            </div>
        </div>
    </div>
    <!--main-->
    <div class="main">
        <!--content-->
        <div class="content">
            <!--login-wrapper-->
            <div class="login-wrap">
                <form action="https://nid.naver.com/nidlogin.login" method="post">
                    <ul class="panel-wrap">
                        <li class="panel-item">
                            <div class="panel-inner">
                                <div class="id-pw-wrap">
                                    <div class="input-row" id="id-line">
                                        <div class="icon-cell" id="id-cell">
                                            <span class="icon-id">
                                                <span class="blind">아이디</span>
                                            </span>
                                        </div>
                                        <input type="text" name="id" id="id" placeholder="아이디" title="아이디" class="input-text" maxlength="41" value />
                                    </div>
                                    <div class="input-row" id="pw-line">
                                        <div class="icon-cell" id="pw-cell">
                                            <span class="icon-pw">
                                                <span class="blind">비밀번호</span>
                                            </span>
                                        </div>
                                        <input type="password" name="pw" id="pw" placeholder="비밀번호" title="비밀번호" class="input-text" maxlength="16" />
                                    </div>
                                </div>
                                <!--로그인상태유지-->
                                <div class="login-keep-wrap">
                                    <div class="keep-check">
                                        <input type="checkbox" class="input-keep" value="off" />
                                        <label class="keep-text">로그인상태유지</label>
                                    </div>
                                </div>
                                <!--로그인 버튼-->
                                <div class="button-login-wrap">
                                    <button type="submit" class="button-login">
                                        <span class="button-text">로그인</span>
                                    </button>
                                </div>
                            </div>
                        </li>
                    </ul>
                </form>
            </div>
        <!--find wrapper-->
        </div>
    </div>
    
    <!--footer-->
    <footer></footer>
</body>
</html>

CSS


body {
    height: 100%;
    color: #222;
    background-color: #fff;
    position: relative;
}

ul{
    list-style: none;
}

li{
    margin: 0;
    padding: 0;
}
input{
    border-radius: 0;
    border: none;
    background: 0 0;
    appearance: none;
    outline: 0;
    text-decoration: none;
    cursor: pointer;
}
a {
    text-decoration: none;
    cursor: pointer;
}

button {
    cursor: pointer;
}

.header{

    display: block;
    padding-bottom: 48px;
    box-sizing: border-box;
}

.header_inner {
    
    position: relative;
    width: 743px;
    margin: 0 auto;
    text-align: center;
    padding-top: 108px;
}

.logo{
    display: inline-block;
    margin-top: 108px;
    vertical-align: top;
    background-position: 0 -51px;
    background-repeat: no-repeat;
    width: 155px;
    height: 30px;
    background-image: url(https://ssl.pstatic.net/static/nid/login/m_sp_00_common_978240a6.png);
    background-size: 244px 107px;
}

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

.lang {
    position: absolute;
    top: 20px;
    right: 0;
}

.sel{
    position: relative;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    width: 100%;
    min-width: 95px;
    height: 30px;
    padding: 4px 10px 6px 8px;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 0;
    cursor: pointer;
    z-index: 1;
}

.login_wrap {
    box-sizing: border-box;
    width: 460px;
    margin: 0 auto;
}

.panel-wrap{
    position: relative;
    z-index: 3;
    margin-top: -8px;
}

.panel-item{
    border: 1px solid #c6c6c6;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 5px 8px 0 rgba(68,68,68,.04);

}

.panel_inner {
    padding: 20px 28px;
}

.input-row{
    display: table;
    table-layout: fixed;
    width: 100%;
    padding: 14px 17px 13px;
    box-sizing: border-box;
}

.input_row:first-child {
    border-radius: 6px 6px 0 0;
    box-shadow: none;
}

.input_row:last-child {
    border-radius: 0 0 6px 6px;
}

.icon_cell {
    display: table-cell;
    width: 24px;
    vertical-align: middle;
}

.icon-id{
    position: absolute;
    top: 50%;
    left: 17px;
    margin-top: -8px;
    background-position: -93px -203px;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    background-image: url(https://ssl.pstatic.net/static/nid/login/m_sp_01_login_008d5216.png);
    background-size: 266px 225px;
}

.icon-pw{
    background-position: -129px -203px;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    background-image: url(https://ssl.pstatic.net/static/nid/login/m_sp_01_login_008d5216.png);
    background-size: 266px 225px;
}

.input-text{
    position: relative;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: -.5px;
    color: #222;
    box-sizing: border-box;
    z-index: 4;
}

.login-keep-wrap{
    position: relative;
    margin-top: 13px;
    padding-right: 90px;
}

.keep-check{
    position: relative;
    padding-left: 23px;
}

.input-keep{
    position: absolute;
    top: 2px;
    left: 3px;
    width: 15px;
    height: 15px;
}

.keep_text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-position: -244px -87px;
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    background-color: #fff;
}

.keep-text{
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    color: #777;
}

.button-login-wrap{
    margin-top: 38px;
}

.button-login{
    display: block;
    width: 100%;
    padding: 13px 0 13px;
    border-radius: 6px;
    border: solid 1px rgba(0,0,0,.15);
    background-color: #03c75a;
    box-sizing: border-box;
}

.button-text{
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: #fff;
}

F12 눌러서 개발자도구 화면에서 필요한 요소들을 찾아내는게 쉽지가 않다...

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>
</head>
<body>
    <div class="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>
                            </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>
                                    ::after
                                </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" />
                                    ::after
                                </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>
                            </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>
                            </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>
                            <!--본인확인 이메일-->
                            <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">
                                    <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도 추가할 예정.

결과

profile
Digeut
개발자가 될 거야!
이전 포스트

국비학원 32일차 : CSS

다음 포스트

국비학원 34일차 : JavaScript, TypeScript, Node.js

0개의 댓글