🦁 멋사 2번째 활동

황다은·2023년 3월 26일

🦁 멋쟁이사자처럼

목록 보기

2/8

멋사 2주차 학습으로 네이버 회원가입 페이지의 코드를 참고한 클론 코딩을 진행했다.

시작 전에 고명이 사진 보고 힐링하기....

먼저 과제 인증 사진!

클론 코딩은 기존에 있는 서비스를 복제하듯 다시 만들며 학습하는 개발 학습 방법론이다.
Django와 API를 배운 후에 이 회원가입 창을 응용할 수 있을듯해서 네이버 회원가입 페이지로 클론 코딩을 진행했는데 오류가 뜨긴 했지만 개인적으론... 재밌었다.1주차에서 강의를 들으며 학습한 내용을 토대로 html의 전체적인 구조와 각 태그의 역할, 속성값에 따라 css가 어떻게 적용되는지 전반적인 과정을 실습을 통해 복습할 수 있어서 좋았다.

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>Naver : 회원가입</title>
    <link rel="stylesheet" href="join.css">
</head>
<body>
    <!-- header -->
    <div id="header">
        <a href="https://nid.naver.com/user2/V2Join.nhn?m=agree#agreeBottom" target="_parent" title="네이버 회원가입 페이지 보러가기">
            <img src="NAVER_CI_Green.png" id="logo">
        </a>
    </div>
    <!-- wrapper -->
    <div id="wrapper">
        <!-- content -->
        <div id="content">
            <!-- ID -->
            <div>
                <!-- h3태그는 의미상 구분 단위(입력폼의 제목)
                h3 태그를 모아서 한번에 스타일을 적용하기 위해 사용 -->
                <h3 class="join_title">
                    <!-- label 태그는 "아이디" 글자 클릭시 입력폼에 포커스가 되는 기능 
                    태그 클릭시 동일한 ID값을 가진 input태그로 자동 포커스되기때문에 
                    label 태그의 아이디값을 "id"로 설정-->
                    <label for="id">아이디</label>
                </h3>
                <!-- span태그는 입력폼 전체를 묶었다는 의미로 클래스 box로 설정 -->
                <span class="box info_id">
                    <!-- class="info"로 비번, 이름 등 모든 입력폼에 공통 스타일 지정을 위함
                    글자수 20제한 -->
                    <input type="text" id="id" class="info" maxlength="20">
                    <span class="auto_url">@naver.com</span>
                </span>
                <!-- ID값 잘못 입력시 입력 폼 아래에 에러메시지 표기 부분 나타내기 위함 -->
                <span class="error_next_box"></span>
            </div>

            <!-- PW1 -->
            <div>
                <h3 class="join_title">
                    <label for="pw1">비밀번호</label>
                </h3>
                <span class="box state_pass">
                    <input type="text" id="pw1" class="info" maxlength="20">
                    <span id="alertTxt">사용불가</span>
                    <img src="m_icon_pass.png" id="pw1_img1" class="pwImg">
                </span>
                <!-- js pwMsg 등록 -->
                <span class="error_next_box" id="pwMsg"></span>
            </div>

            <!-- PW2  -->
            <div>
                <h3 class="join_title">
                    <label for="pw2">비밀번호 재확인</label>
                </h3>
                <span class="box state_check">
                    <input type="password" id="pw2" class="info" maxlength="20">
                    <img src="m_icon_check_disable.png" id="pw2_img1" class="pwImg">
                </span>
                <span class="error_next_box"></span>
            </div>

            <!-- NAME -->
            <div>
                <h3 class="join_title">
                    <label for="name">이름</label>
                </h3>
                <span class="box name">
                    <input type="text" id="name" class="info" maxlength="20">
                </span>
                <span class="error_next_box"></span>
            </div>

            <!-- BIRTH -->
            <div>
                <h3 class="join_title">
                    <label for="yy">생년월일</label>
                </h3>
                <div id="bir_wrap">
                    <!-- BIRTH_YY -->
                    <div id="bir_yy">
                        <span class="box">
                            <input type="text" id="yy" class="info" maxlength="4" placeholder="년(4자)">
                        </span>
                    </div>
                    
                    <!-- BIRTH_MM -->
                    <div id="bir_mm">
                        <span class="box">
                            <select id="mm" class="sel">
                                <option>월</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>

                    <!-- BIRTH_DD -->
                    <div id="bir_dd">
                        <span class="box">
                            <input type="text" id="dd" class="info" maxlength="2" placeholder="일">
                        </span>
                    </div>
                </div>
                <span class="error_next_box"></span>
            </div>

            <!-- GENDER -->
            <div>
                <h3 class="join_title">
                    <label for="gender">성별</label>
                </h3>
                <span class="box gender">
                    <select id="gender" class="sel">
                        <option value selected>성별</option>
                        <option value="M">남자</option>
                        <option value="F">여자</option>
                        <option value="U">선택안함</option>
                    </select>
                </span>
            </div>

            <!-- EMAIL -->
            <!-- <div>
                <h3 class="join_title">
                    <label for="email">본인 확인 이메일
                        <span class="optional">(선택)</span>
                    </label>
                </h3>
                <span class="box email">
                    <input type="text" id="email" class="info" maxlength="100" placeholder="선택입력">
                </span>
                <span class="error_next_box"></span>
            </div> -->

            <!-- MOBILE -->
            <div>
                <h3 class="join_title">
                    <label for="phoneNum">휴대전화</label>
                </h3>
                <span class="box mobile">
                    <input type="text" id="mobile" class="info" maxlength="16" placeholder="전화번호 입력">
                </span>
                <span class="error_next_box"></span>
            </div>

            <!-- JOIN_BTN -->
            <div class="btn_area">
                <button type="button" id="btnJoin">
                    <span>가입하기</span>
                </button>
            </div>
        </div>
        <!-- content -->
    </div>
    <!-- wrapper -->
    <script src="join.js"></script>
</body>
</html>

css 코드

html {
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
    background: #f3f6f7;
    font-family: Dotum, '돋움', Helvetica, sans-serif;
}

#logo {
    width: 240px;
    height: 44px;
}

#header {
    padding-top: 62px;
    padding-bottom: 20px;
    text-align: center;
}

#wrapper {
    position: relative;
    height: 100%;
}

#content {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: 460px;
}

label {
    cursor: pointer;
}

input:focus {
    outline: none;
}

h3 {
    margin: 19px 0 8px;
    font-size: 14px;
    font-weight: 70px;
}

.box {
    display: block;
    width: 100%;
    height: 51px;
    border: solid 1px #dadada;
    padding: 10px 14px 10px 14px;
    background: #fff;
    box-sizing: border-box;
    position: relative;
}

.info {
    display: block;
    position: relative;
    width: 100%;
    height: 20px;
    border: none;
    background: #fff;
    font-size: 15px;
}

input {
    font-family: Dotum, '돋움', Helvetica, sans-serif;
}

.box.info.id {
    padding-right: 110px;
}

.box.info.pw{
    padding-right: 40px;
}

.box.info.pw.check {
    padding-right: 40px;
}

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

.pwimg {
    width: 18px;
    height: 20px;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -10px;
    cursor: pointer;
}

#bir_wrap {
    display: table;
    width: 100px;
}

#bir_yy {
    display: table-cell;
    width: 147px;
}

#bir_mm {
    display: table-cell;
    width: 147px;
    vertical-align: middle;
}

#bir_dd {
    display: table-cell;
    width: 147px;
}

#bir_mm, #bir_dd {
    padding: 10px;
}

.sel {
    width: 100px;
    height: 29px;
    font-size: 15px;
    line-height: 18px;
    color: #000;
    background: #fff url("sel_arr_2x.gif") 100% 50% no-repeat;
    wepkit-appearance: none;
    display: inline-block;
    text-align: start;
    border: none;
    cursor: default;
    font-family: Dotum, '돋움', Helvetica, sans-serif;
}

.error._next_box {
    margin-top: 9px;
    font-size: 9px;
    color: red;
}

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

#btnJoin {
    display: block;
    width: 100px;
    padding: 15px 0 10px;
    border: solid 1px rgb (0, 0, 0, .08);
    cursor: pointer;
    background-color: #03c75a;
    font-size: 18px;
    text-align: center;
    font-weight: 700;
    box-sizing: border-box;
    font-family: Dotum, '돋움', Helvetica, sans-serif;
    color: white;
}

js(javaScript) 코드

var id = document.querySelector('#id');

var pw1 = document.querySelector('#pw1');
var pwMsg = document.querySelector('#alertTxt');
var pwImg1 = document.querySelector('#pw1_img1');

var pw2 = document.querySelector('#pw2');
var pwImg2 = document.querySelector('#pw2_img1');
var pwMsgArea = document.querySelector('.state_pass');

var userName = document.querySelector('#name');

var yy = document.querySelector('#yy');
var mm = document.querySelector('#mm');
var dd = document.querySelector('#dd');

var gender = document.querySelector('#gender');

var email = document.querySelector('#email');

var mobile = document.querySelector('#mobile');

var error = document.querySelectorAll('.error_next_box');



/*이벤트 핸들러 연결*/


id.addEventListener("focusout", checkId);
pw1.addEventListener("focusout", checkPw);
pw2.addEventListener("focusout", comparePw);
userName.addEventListener("focusout", checkName);
yy.addEventListener("focusout", isBirthCompleted);
mm.addEventListener("focusout", isBirthCompleted);
dd.addEventListener("focusout", isBirthCompleted);
gender.addEventListener("focusout", function() {
    if(gender.value === "성별") {
        error[5].style.display = "block";
    } else {
        error[5].style.display = "none";
    }
})
email.addEventListener("focusout", isEmailCorrect);
mobile.addEventListener("focusout", checkPhoneNum);





/*콜백 함수*/


function checkId() {
    var idPattern = /[a-zA-Z0-9_-]{5,20}/;
    if(id.value === "") {
        error[0].innerHTML = "필수 정보입니다.";
        error[0].style.display = "block";
    } else if(!idPattern.test(id.value)) {
        error[0].innerHTML = "5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.";
        error[0].style.display = "block";
    } else {
        error[0].innerHTML = "멋진 아이디네요!";
        error[0].style.color = "#08A600";
        error[0].style.display = "block";
    }
}

function checkPw() {
    var pwPattern = /[a-zA-Z0-9~!@#$%^&*()_+|<>?:{}]{8,16}/;
    if(pw1.value === "") {
        error[1].innerHTML = "필수 정보입니다.";
        error[1].style.display = "block";
    } else if(!pwPattern.test(pw1.value)) {
        error[1].innerHTML = "8~16자 영문 대 소문자, 숫자, 특수문자를 사용하세요.";
        pwMsg.innerHTML = "사용불가";
        pwMsgArea.style.paddingRight = "93px";
        error[1].style.display = "block";
        
        pwMsg.style.display = "block";
        pwImg1.src = "m_icon_not_use.png";
    } else {
        error[1].style.display = "none";
        pwMsg.innerHTML = "안전";
        pwMsg.style.display = "block";
        pwMsg.style.color = "#03c75a";
        pwImg1.src = "m_icon_safe.png";
    }
}

function comparePw() {
    if(pw2.value === pw1.value && pw2.value != "") {
        pwImg2.src = "m_icon_check_enable.png";
        error[2].style.display = "none";
    } else if(pw2.value !== pw1.value) {
        pwImg2.src = "m_icon_check_disable.png";
        error[2].innerHTML = "비밀번호가 일치하지 않습니다.";
        error[2].style.display = "block";
    } 

    if(pw2.value === "") {
        error[2].innerHTML = "필수 정보입니다.";
        error[2].style.display = "block";
    }
}

function checkName() {
    var namePattern = /[a-zA-Z가-힣]/;
    if(userName.value === "") {
        error[3].innerHTML = "필수 정보입니다.";
        error[3].style.display = "block";
    } else if(!namePattern.test(userName.value) || userName.value.indexOf(" ") > -1) {
        error[3].innerHTML = "한글과 영문 대 소문자를 사용하세요. (특수기호, 공백 사용 불가)";
        error[3].style.display = "block";
    } else {
        error[3].style.display = "none";
    }
}


function isBirthCompleted() {
    var yearPattern = /[0-9]{4}/;

    if(!yearPattern.test(yy.value)) {
        error[4].innerHTML = "태어난 년도 4자리를 정확하게 입력하세요.";
        error[4].style.display = "block";
    } else {
        isMonthSelected();
    }


    function isMonthSelected() {
        if(mm.value === "월") {
            error[4].innerHTML = "태어난 월을 선택하세요.";
        } else {
            isDateCompleted();
        }
    }

    function isDateCompleted() {
        if(dd.value === "") {
            error[4].innerHTML = "태어난 일(날짜) 2자리를 정확하게 입력하세요.";
        } else {
            isBirthRight();
        }
    }
}



function isBirthRight() {
    var datePattern = /\d{1,2}/;
    if(!datePattern.test(dd.value) || Number(dd.value)<1 || Number(dd.value)>31) {
        error[4].innerHTML = "생년월일을 다시 확인해주세요.";
    } else {
        checkAge();
    }
}

function checkAge() {
    if(Number(yy.value) < 1920) {
        error[4].innerHTML = "정말이세요?";
        error[4].style.display = "block";
    } else if(Number(yy.value) > 2024) {
        error[4].innerHTML = "미래에서 오셨군요. ^^";
        error[4].style.display = "block";
    } else if(Number(yy.value) > 2008) {
        error[4].innerHTML = "만 14세 미만의 어린이는 보호자 동의가 필요합니다.";
        error[4].style.display = "block";
    } else {
        error[4].style.display = "none";
    }
}


function isEmailCorrect() {
    var emailPattern = /[a-z0-9]{2,}@[a-z0-9-]{2,}\.[a-z0-9]{2,}/;

    if(email.value === ""){ 
        error[6].style.display = "none"; 
    } else if(!emailPattern.test(email.value)) {
        error[6].style.display = "block";
    } else {
        error[6].style.display = "none"; 
    }

}

function checkPhoneNum() {
    var isPhoneNum = /([01]{2})([01679]{1})([0-9]{3,4})([0-9]{4})/;

    if(mobile.value === "") {
        error[7].innerHTML = "필수 정보입니다.";
        error[7].style.display = "block";
    } else if(!isPhoneNum.test(mobile.value)) {
        error[7].innerHTML = "형식에 맞지 않는 번호입니다.";
        error[7].style.display = "block";
    } else {
        error[7].style.display = "none";
    }

    
}

지금은 장고를 배우기 위한 기초적인 html 구조를 익히기 위해 간단하게 html과 css를 학습했다. js는 장고를 배운 후에 햑습할 예정이다.

황다은

BackEnd

이전 포스트

🦁 멋사 1번째 활동

다음 포스트