티스토리툴바

UXUI 웹디자인 과정_과제

[UXUI 웹디자인] 3달차 과제 / 네이버 로그인 페이지 (언어변경 기능)

ninefloor.github.io/web-practice/work/naver_lang/

 

네이버 로그인

더욱 간편한 로그인 PC방 등 공용 PC라면 안전하게 사용해 보세요. QR코드 로그인 일회용 번호 로그인 If this PC is used by multiple people, try it. Sign in with QR code Facebook Line

ninefloor.github.io

기존 작업한 로그인 창에서 select 바꿀 시 언어 전환되는 기능 추가. 사실 말이 기능 추가지 jQuery로 겁나게 욱여넣은 수준이다. 로그인창과 로그인 버튼, 로그인 상태 유지는 .attr과 .text로 변경하였고, 하단 간편 로그인은 외국어는 동일하여 두가지 버전 / 최하단 서브 메뉴는 언어별로 총 4개의 버전으로 만들어 .hide와 .show를 이용했다. 실제로는 html의 lang 속성을 감지해서 변환하는 방식으로 보여지던데... 확실히 그런 것에 비하면 깔끔하지 못하고 특히 스크립트 코드가 아주 엉망이라 마음에 안든다. 아마 each 같은걸 써서 깔끔하게 코드를 짤 수 있지 않을까?

아 ㅋㅋ;

<!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="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><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_ko">
            <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="qr_area_foreign">
            <div class="tool_tip">
              <span>If this PC is used by multiple people, try it.</span>
              <span onclick="tooltip();"> </span>
              <span> </span>
            </div>
            <div class="item">
              <button id="qr_login"><span class="qr_img"></span>
                <span class="text">Sign in with QR code</span>
              </button>
            </div>
            <div class="item">
              <button id="otp_login"><span class="facebook_img"></span>
                <span class="text">Facebook</span>
              </button>
            </div>
            <div class="item">
              <button id="otp_login"><span class="line_img"></span>
                <span class="text">Line</span>
              </button>
            </div>
          </div>
          <div id="menu_ko">
            <ul>
              <li><a href="#">아이디 찾기</a></li>
              <li><a href="#">비밀번호 찾기</a></li>
              <li><a href="#">회원가입</a></li>
            </ul>
          </div>
          <div id="menu_us">
            <ul>
              <li>Forgot your <a href="#">Username</a> or <a href="#">Password?</a></li>
              <li><a href="#">Sign Up</a></li>
            </ul>
          </div>
          <div id="menu_cn">
            <ul>
              <li><a href="#">查询ID</a></li>
              <li><a href="#">查询密码</a></li>
              <li><a href="#">加入会员</a></li>
            </ul>
          </div>
          <div id="menu_tw">
            <ul>
              <li><a href="#">查詢ID</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:first-child {
  background: url(../images/pc_qr_once.png) no-repeat;
  background-position: -30px 0;
  position: absolute;
  top: -3px;
  left: 0;
  width: 26px;
  height: 26px;
  display: inline-block;
}

#login_check>label>.auto_on {
  background-position: 0 0 !important;
}

#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_ko {
  width: 100%;
  height: 60px;
  margin-top: 21px;
  text-align: center;
  position: relative;
}

#qr_area_ko>.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;
}

#qr_area_ko>.tool_tip>span:first-child {
  font-size: 14px;
  line-height: 30px;
  color: white;
}

#qr_area_ko>.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;
}

#qr_area_ko>.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_ko>.item {
  display: block;
  float: left;
  width: 49%;
  cursor: pointer;
}

#qr_area_ko>.item:first-child {
  margin-right: 4px;
}

#qr_area_ko>.item:nth-child(2) {
  margin-left: 4px;
}

#qr_area_ko>.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;
}

.facebook_img {
  background: url("../images/pc_qr_once.png") no-repeat;
  background-position: -128px -36px;
  display: inline-block;
  width: 26px;
  height: 26px;
  cursor: pointer;
  position: relative;
  top: -3px;
}

.line_img {
  background: url("../images/pc_qr_once.png") no-repeat;
  background-position: -62px -70px;
  display: inline-block;
  width: 26px;
  height: 26px;
  cursor: pointer;
  position: relative;
  top: -3px;
}

#qr_area_ko>.item>button>.text {
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  top: -11px;
}

#qr_wrap>#qr_area_foreign {
  width: 100%;
  height: 60px;
  margin-top: 21px;
  text-align: center;
  position: relative;
  display: none;
}

#qr_area_foreign>.tool_tip {
  display: block;
  width: 310px;
  height: 30px;

  position: absolute;
  top: -20px;
  left: 20px;
  z-index: 10;

  border-radius: 2px;

  background: linear-gradient(96deg, #0c93ed, #6b87e7);

  box-shadow: rgba(0, 0, 0, 0.05) 10px 10px 10px;
}

#qr_area_foreign>.tool_tip>span:first-child {
  font-size: 14px;
  line-height: 30px;
  color: white;
}

#qr_area_foreign>.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;
}

#qr_area_foreign>.tool_tip>:nth-child(3) {
  position: absolute;
  top: 30px;
  left: 16px;
  border-top: 6px solid #0c93ed;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

#qr_area_foreign>.item {
  display: block;
  width: 100%;
  cursor: pointer;
  margin-bottom: 5px;
}

#qr_area_foreign>.item>button {
  width: 96%;
  height: 56px;
  padding: 19px 20px 13px;
  border: 1px solid #dadada;
  background-color: #fff;
  box-sizing: border-box;
  cursor: pointer;
  text-align: left;
}

#qr_area_foreign>.item>button>.text {
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  left: 15px;
  top: -11px;
}

#menu_ko {
  width: 100%;
  height: 20px;
  margin: 18px 0;
  padding-left: 100px;
}

#menu_ko>ul>li {
  float: left;
}

#menu_ko>ul>li>a {
  font-size: 14px;
  color: #8e8e8e;
}

#menu_ko>ul>li::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: #e4e4e5;
  margin: 0 8px;
  position: relative;
  top: 1px;
}

#menu_ko>ul>li:nth-child(3):after {
  display: none;
}

#menu_us {
  width: 100%;
  height: 20px;
  margin: 130px 0 0;
  padding-left: 80px;
  display: none;
}

#menu_us>ul>li {
  float: left;
  font-size: 14px;
  color: #8e8e8e;
}

#menu_us>ul>li>a {
  font-size: 14px;
  color: #8e8e8e;
  text-decoration: underline;
}

#menu_us>ul>li::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: #e4e4e5;
  margin: 0 8px;
  position: relative;
  top: 1px;
}

#menu_us>ul>li:nth-child(2):after {
  display: none;
}

#menu_cn {
  width: 100%;
  height: 20px;
  margin: 130px 0 0;
  padding-left: 140px;
  display: none;
}

#menu_cn>ul>li {
  float: left;
}

#menu_cn>ul>li>a {
  font-size: 14px;
  color: #8e8e8e;
}

#menu_cn>ul>li::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: #e4e4e5;
  margin: 0 8px;
  position: relative;
  top: 1px;
}

#menu_cn>ul>li:nth-child(3):after {
  display: none;
}

#menu_tw {
  width: 100%;
  height: 20px;
  margin: 130px 0 0;
  padding-left: 140px;
  display: none;
}

#menu_tw>ul>li {
  float: left;
}

#menu_tw>ul>li>a {
  font-size: 14px;
  color: #8e8e8e;
}

#menu_tw>ul>li::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: #e4e4e5;
  margin: 0 8px;
  position: relative;
  top: 1px;
}

#menu_tw>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:first-child").addClass("auto_on");
  }
  $("#ip_chk").prop("checked", true);
  ipFunc();
  autoFunc();
  lang();
})
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:first-child").addClass("auto_on");
      $.cookie("auto", "true", {
        expries: 7,
        path: "/"
      });
      autoMode = true;
    } else {
      $("#login_check>label>span:first-child").removeClass("auto_on");
      $.cookie("auto", "false", {
        expries: 7,
        path: "/"
      });
      autoMode = false;
    }
  })
}

function tooltip() {
  $('.tool_tip').hide();
}

let lang_val = '';
let id = $('#id');
let pw = $('#pw');
let loginButton = $('#submit_login');
let autoLabel = $('#login_check>label');

function lang() {
  $('#lang').on('change', function () {
    lang_val = $("select[name='lang']").val();
    console.log(lang_val);

    if (lang_val == 'ko_KR') {
      $('html').attr('lang', 'ko');
      $('#id').attr('placeholder', '아이디');
      $('#pw').attr('placeholder', '비밀번호');
      $('#submit_login').attr('value', '로그인');
      $('#login_check>label>span:nth-child(2)').text('로그인 상태 유지');
      $('#ip_check').show();
      $('.title').text('더욱 간편한 로그인');
      $('#qr_area_ko').show();
      $('#menu_ko').show();
      $('#ad').show();

      $('#qr_area_foreign').hide();
      $('#menu_us').hide();
      $('#menu_cn').hide();
      $('#menu_tw').hide();
    } else if (lang_val == 'en_US') {
      $('html').attr('lang', 'en');
      $('#id').attr('placeholder', 'Username');
      $('#pw').attr('placeholder', 'Password');
      $('#submit_login').attr('value', 'Sign in');
      $('#login_check>label>span:nth-child(2)').text('Stay Signed in');
      $('#ip_check').hide();
      $('.title').text('Easier sign in');
      $('#qr_area_foreign').show();
      $('#menu_us').show();

      $('#qr_area_ko').hide();
      $('#menu_ko').hide();
      $('#menu_cn').hide();
      $('#menu_tw').hide();
      $('#ad').hide();
    } else if (lang_val == 'zh_Hans_CN') {
      $('html').attr('lang', 'zh-Hans');
      $('#id').attr('placeholder', '帐号');
      $('#pw').attr('placeholder', '密码');
      $('#submit_login').attr('value', '登录');
      $('#login_check>label>span:nth-child(2)').text('维持登录状态');
      $('#ip_check').hide();
      $('.title').text('Easier sign in');
      $('#qr_area_foreign').show();
      $('#menu_cn').show();

      $('#qr_area_ko').hide();
      $('#menu_ko').hide();
      $('#menu_us').hide();
      $('#menu_tw').hide();
      $('#ad').hide();
    } else if (lang_val == 'zh_Hans_TW') {
      $('html').attr('lang', 'zh-Hant');
      $('#id').attr('placeholder', '帳號');
      $('#pw').attr('placeholder', '密碼');
      $('#submit_login').attr('value', '登入');
      $('#login_check>label>span:nth-child(2)').text('維持登入狀態');
      $('#ip_check').hide();
      $('.title').text('Easier sign in');
      $('#qr_area_foreign').show();
      $('#menu_tw').show();

      $('#qr_area_ko').hide();
      $('#menu_ko').hide();
      $('#menu_cn').hide();
      $('#menu_us').hide();
      $('#ad').hide();
    }
  })

}

 

티스토리툴바