ninefloor.github.io/web-practice/work/naver/
네이버 로그인
더욱 간편한 로그인 PC방 등 공용 PC라면 안전하게 사용해 보세요. QR코드 로그인 일회용 번호 로그인
ninefloor.github.io
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>네이버 로그인</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="./js/app.js"></script>
</head>
<body>
<div id="notice">
<span>안전한 네이버 로그인을 위해 주소창의 URL과 자물쇠 마크를 확인하세요!</span>
</div>
<div id="wrap">
<div id="header">
<a href="http://www.naver.com" class="logo"></a>
<div id="lang">
<select name="lang" id="lang">
<option value="ko_KR">한국어</option>
<option value="en_US">English</option>
<option value="zh_Hans_CN">中文(简体)</option>
<option value="zh_Hant_TW">中文(台灣)</option>
</select>
</div>
</div>
<div id="container">
<div id="contents">
<form action="#">
<div id="id_area">
<input type="text" name="id" id="id" placeholder="아이디" class="idpw">
</div>
<div id="pw_area">
<input type="password" name="pw" id="pw" placeholder="비밀번호" class="idpw">
</div>
<input type="submit" value="로그인" id="submit_login">
<div id="check">
<div id="login_check">
<input type="checkbox" name="login_chk" id="login_chk">
<label for="login_chk"><span></span>로그인 상태 유지</label>
</div>
<div id="ip_check">
<a href="#" target="_blank">IP 보안</a>
<span class="ip_chk">
<input type="checkbox" name="ip_chk" id="ip_chk">
<label for="ip_chk"><span>ON</span></label>
</span>
</div>
</div>
</form>
<div id="qr_wrap">
<p class="title">더욱 간편한 로그인</p>
<div id="qr_area">
<div class="tool_tip">
<span>PC방 등 공용 PC라면 안전하게 사용해 보세요.</span>
<span onclick="tooltip();"> </span>
<span> </span>
</div>
<div class="item">
<button id="qr_login"><span class="qr_img"></span>
<span class="text">QR코드 로그인</span>
</button>
</div>
<div class="item">
<button id="otp_login"><span class="otp_img"></span>
<span class="text">일회용 번호 로그인</span>
</button>
</div>
</div>
<div id="menu">
<ul>
<li><a href="#">아이디 찾기</a></li>
<li><a href="#">비밀번호 찾기</a></li>
<li><a href="#">회원가입</a></li>
</ul>
</div>
</div>
<div id="ad">
<a href="#" class="banner">
</a>
<a href="#" class="down_btn">
</a>
</div>
</div>
</div>
</div>
</body>
</html>* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
#notice{
width: 100%;
height: 40px;
background-color: #fffde0;
position: absolute;
top: 0px;
text-align: center;
z-index: 10;
}
#notice>span{
font-weight: bold;
line-height: 40px;
font-size: 12px;
}
#wrap {
width: 100%;
height: 913px;
background: #f5f6f7;
}
#login {
width: 770px;
margin: 0 auto;
}
#header {
width: 768px;
padding: 106px 0 53px;
box-sizing: border-box;
position: relative;
margin: 0 auto;
}
#header > #lang {
position: absolute;
top: 20px;
left: 670px;
}
#lang > select {
font-size: 12px;
width: 95px;
height: 30px;
color: #333;
border: 1px solid #ccc;
border-radius: 0;
background: none;
padding: 4px 10px 6px 8px;
-webkit-appearance: none;
}
#lang::after {
content: "";
width: 16px;
height: 14px;
background: url("../images/pc_qr_once.png") no-repeat;
background-position: -102px -72px;
display: block;
position: relative;
top: -19px;
left: 75px;
}
#header .logo {
background: url("../images/pc_sp_login_190522.png") no-repeat;
background-position: -1px -1px;
width: 231px;
height: 44px;
display: block;
margin: 0 auto;
}
#container {
width: 768px;
min-height: 185px;
margin: 0 auto;
padding-bottom: 185px;
}
#contents {
width: 460px;
margin: 0 auto;
}
#contents > form > #id_area {
border: solid 1px #dadada;
height: 48px;
margin-bottom: 8px;
padding: 7px 35px 10px 11px;
box-sizing: border-box;
background-color: #fff;
}
#contents > form > #pw_area {
border: solid 1px #dadada;
height: 48px;
margin-bottom: 8px;
padding: 7px 35px 10px 11px;
box-sizing: border-box;
background-color: #fff;
}
#contents > form .idpw {
width: 100%;
height: 16px;
padding: 8px 0 6px;
color: #000;
border: none;
background-color: white;
font-size: 14px;
}
#contents #submit_login {
display: block;
width: 100%;
height: 56px;
border: 1px solid rgba(0, 0, 0, 0.1);
margin: 12px 0 14px;
background-color: #03c75a;
color: white;
font-size: 16px;
font-weight: 400;
cursor: pointer;
}
#contents #check {
position: relative;
margin-bottom: 12px;
}
#check > #login_check {
position: relative;
height: 26px;
}
#login_check > input {
cursor: pointer;
display: none;
}
#login_check > label {
cursor: pointer;
padding: 1px 0 0 32px;
font-size: 15px;
position: absolute;
top: 0px;
left: -1px;
color: #333;
}
#login_check > label> span {
background: url(../images/pc_qr_once.png) no-repeat;
position: absolute;
top: -3px;
left: 0;
width: 26px;
height: 26px;
background-position: -30px 0;
display: inline-block;
}
#login_check > label> .auto_on{
background-position: 0 0;
}
#ip_check {
position: absolute;
top: 0;
right: 0;
}
#ip_check a {
text-decoration: none;
position: relative;
display: block;
float: left;
height: 14px;
font-size: 15px;
color: #000;
}
#ip_check .ip_chk {
position: relative;
display: block;
float: left;
width: 30px;
height: 14px;
margin-left: 4px;
}
#ip_check > .ip_chk input {
display: none;
cursor: pointer;
}
#ip_check > .ip_chk > label {
position: absolute;
top: -1px;
left: 0;
display: block;
width: 30px;
height: 14px;
cursor: pointer;
}
#ip_check>.ip_chk>label>span{
font-size: 16px;
font-weight: 700;
color: #03c75a;
}
#ip_check>.ip_chk>label>.ip_off{
color: #9ba1a3;
}
#qr_wrap {
padding-top: 38px;
border-top: 1px solid #e4e4e5;
position: relative;
}
#qr_wrap > .title {
font-size: 20px;
font-weight: 700;
color: #000;
text-align: center;
margin-bottom: 6px;
}
#qr_wrap > #qr_area {
width: 100%;
height: 60px;
margin-top: 21px;
text-align: center;
position: relative;
}
#qr_area>.tool_tip{
display: block;
width: 330px;
height: 30px;
position: absolute;
top: -20px;
left: -109px;
z-index: 10;
border-radius: 2px;
background: linear-gradient(96deg,#0c93ed,#6b87e7);
box-shadow: rgba(0, 0, 0, 0.05) 10px 10px 10px;
}
.tool_tip>span:first-child{
font-size: 14px;
line-height: 30px;
color: white;
}
.tool_tip>span:nth-child(2){
display: inline-block;
width: 11px;
height: 11px;
background: url("../images/m_nudge_close.png") no-repeat;
background-size: 11px 11px;
cursor: pointer;
}
.tool_tip>:nth-child(3){
position: absolute;
top: 30px;
left: 170px;
border-top: 6px solid #0c93ed;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
#qr_area > .item {
display: block;
float: left;
width: 49%;
cursor: pointer;
}
#qr_area > .item:first-child {
margin-right: 4px;
}
#qr_area > .item:nth-child(2) {
margin-left: 4px;
}
#qr_area > .item > button {
width: 96%;
height: 56px;
margin-left: 5px;
padding: 19px 0 13px;
border: 1px solid #03c75a;
background-color: #fff;
box-sizing: border-box;
cursor: pointer;
}
.qr_img {
background: url("../images/pc_qr_once.png") no-repeat;
background-position: -128px 0;
display: inline-block;
width: 26px;
height: 26px;
cursor: pointer;
position: relative;
top: -3px;
}
.otp_img {
background: url("../images/pc_qr_once.png") no-repeat;
background-position: -100px 0;
display: inline-block;
width: 26px;
height: 26px;
cursor: pointer;
position: relative;
top: -3px;
}
#qr_area > .item > button > .text {
font-size: 16px;
font-weight: 600;
cursor: pointer;
position: relative;
top: -11px;
}
#menu{
width: 100%;
height: 20px;
margin: 18px 0;
padding-left: 100px;
}
#menu>ul>li{
float: left;
}
#menu>ul>li>a{
font-size: 14px;
color: #8e8e8e;
}
#menu>ul>li::after{
content: '';
display: inline-block;
width: 1px;
height: 12px;
background-color: #e4e4e5;
margin: 0 8px;
position: relative;
top: 1px;
}
#menu>ul>li:nth-child(3):after{
display: none;
}
#ad{
width: 100%;
height: 166px;
position: relative;
top: 40px;
}
#ad>.banner{
display: block;
width: 466px;
height: 166px;
background: url("../images/pc_460_166_0716.png") no-repeat;
}
#ad>.down_btn{
display: block;
width: 96px;
height: 31px;
background: url("../images/t_920_332_btn_0701.png") no-repeat;
background-size: 96px 31px;
position: absolute;
top: 115px;
left: 25px;
}$(document).ready(function(){
if($.cookie("auto")=="true"){
$("#login_chk").prop("checked",true);
$("#login_check>label>span").addClass("auto_on");
}
$("#ip_chk").prop("checked",true);
ipFunc();
autoFunc();
})
let ipMode=true;
function ipFunc(){
$(".ip_chk>label>span").click(function(){
if(ipMode==true){
$(".ip_chk>label>span").text("OFF");
$(".ip_chk>label>span").addClass("ip_off");
ipMode=false;
} else{
$(".ip_chk>label>span").text("ON");
$(".ip_chk>label>span").removeClass("ip_off");
ipMode=true;
}
})
}
let autoMode=false;
function autoFunc(){
$("#login_check>label").click(function(){
if(autoMode==false){
$("#login_check>label>span").addClass("auto_on");
$.cookie("auto","true",{expries:7, path:"/"});
autoMode=true;
} else{
$("#login_check>label>span").removeClass("auto_on");
$.cookie("auto","false",{expries:7, path:"/"});
autoMode=false;
}
})
}
function tooltip(){
$('.tool_tip').hide();
}