λ©μ¬ 2μ£Όμ°¨ νμ΅μΌλ‘ λ€μ΄λ² νμκ°μ νμ΄μ§μ μ½λλ₯Ό μ°Έκ³ ν ν΄λ‘ μ½λ©μ μ§ννλ€.
μμ μ μ κ³ λͺ
μ΄ μ¬μ§ λ³΄κ³ νλ§νκΈ°....
λ¨Όμ κ³Όμ μΈμ¦ μ¬μ§!
ν΄λ‘ μ½λ©μ κΈ°μ‘΄μ μλ μλΉμ€λ₯Ό 볡μ νλ― λ€μ λ§λ€λ©° νμ΅νλ κ°λ° νμ΅ λ°©λ²λ‘ μ΄λ€.
Djangoμ APIλ₯Ό λ°°μ΄ νμ μ΄ νμκ°μ
μ°½μ μμ©ν μ μμλ―ν΄μ λ€μ΄λ² νμκ°μ
νμ΄μ§λ‘ ν΄λ‘ μ½λ©μ μ§ννλλ° μ€λ₯κ° λ¨κΈ΄ νμ§λ§ κ°μΈμ μΌλ‘ ... μ¬λ°μλ€.1μ£Όμ°¨μμ κ°μλ₯Ό λ€μΌλ©° νμ΅ν λ΄μ©μ ν λλ‘ htmlμ μ 체μ μΈ κ΅¬μ‘°μ κ° νκ·Έμ μν , μμ±κ°μ λ°λΌ cssκ° μ΄λ»κ² μ μ©λλμ§ μ λ°μ μΈ κ³Όμ μ μ€μ΅μ ν΅ν΄ 볡μ΅ν μ μμ΄μ μ’μλ€.
<!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>
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;
}
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λ μ₯κ³ λ₯Ό λ°°μ΄ νμ νμ΅ν μμ μ΄λ€.