[UXUI 웹디자인] 1달차 과제 / 무신사 로그인 페이지 만들기 (non js)

https://ninefloor.github.io/uxui-web-publisher/Jan_work_musinsa/

무신사 로그인

비회원 구매 약관 비회원정보수집 동의 비회원 개인정보보호정책은 비회원으로 주문하는 고객님의 개인정보 보호를 위하여 무신사가 실시하는 개인정보 수집의 목적과 그 정보의 정책에 관한

ninefloor.github.io

아직 자바를 이용한 탭 구현은 할 수가 없기 때문에 index.html(왼쪽 탭) 과 tap_lookup.html(오른쪽 탭)을 별도의 페이지로 분리하고 a 태그 이용하여 구현하였다. (마찬가지로 탭 모양때문에 CSS도 별도 분리.)

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>무신사 로그인</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>
  <body>
    <div id="wrap">
      <div id="login_area">
        <div id="login_header">
          <img src="./images/logo_mwusinsa.svg" />
        </div>
        <div id="login_box">
          <form>
            <input
              class="input"
              type="text"
              placeholder="아이디를 입력해 주세요"
            />
            <br />
            <input
              class="input"
              type="password"
              placeholder="비밀번호를 입력해 주세요"
            />
            <br />

            <span class="submit"><input type="submit" value="로그인" /></span>
            <label class="checkbox">
              <input type="checkbox" name="autologin" id="autologin" /> 자동
              로그인
            </label>
          </form>
          <ul id="sub_menu">
            <li><a href="#">회원 가입</a></li>
            <li><a href="#">아이디 찾기</a></li>
            <li><a href="#">비밀번호 찾기</a></li>
          </ul>
        </div>
        <div id="social">
          <a id="kakao" href="#">
            <span>카카오 로그인</span>
          </a>
          <a id="apple" href="#">
            <span>Apple 로그인</span>
          </a>
        </div>
        <div id="non_member">
          <div id="tap_head">
            <a href="#" id="non_member_buy" class="non_member_tap">
              <span>비회원 구매하기</span>
            </a>
            <a
              href="./tap_lookup.html"
              id="non_member_lookup"
              class="non_member_tap"
            >
              <span>비회원 주문 조회</span>
            </a>
          </div>
          <div id="tap_contents1">
            <span class="title">비회원 구매 약관</span>
            <div id="text">
              비회원정보수집 동의<br />
              비회원 개인정보보호정책은 비회원으로 주문하는 고객님의 개인정보
              보호를 위하여 무신사가 실시하는 개인정보 수집의 목적과 그 정보의
              정책에 관한 규정입니다.<br />
              <br />
              제1조 개인정보 수집 범위<br />
              1. 필수항목: 구매자 정보(성명, 전화번호, 휴대전화 번호, 이메일)
              수령자 정보(성명, 전화번호, 휴대전화번호, 주소)<br />
              2. 선택항목: 환불계좌<br />
              <br />
              제2조 개인정보 수집 목적 및 이용목적<br />
              무신사((주)무신사)는 고객님께서 비회원으로 재화 혹은 용역을
              주문하거나 각종 서비스를 이용하는데 있어, 원활한 주문 및 서비스
              접수, 물품 배송, 대금 결제 및 편리하고 유익한 맞춤정보를 제공하기
              위한 최소한의 정보를 수집합니다.<br />
              <br />
              1.e-mail, 전화번호 : 고지의 전달. 불만처리나 주문/배송정보 안내 등
              원활한 의사소통 경로의 확보.<br />
              2.성명, 주소 : 고지의 전달, 청구서, 정확한 상품 배송지의 확보.<br />
              3.은행계좌번호, 신용카드번호: 유료정보에 대한 이용 및 상품구매에
              대한 결제<br />
              4.전화번호, 휴대전화번호 : 상품구매 전/후 만족도조사,
              회원가입권유(포인트 또는 적립금 지급 등)및 영업 목적 전화 및
              SMS발송<br />
              <br />
              비회원주문시 제공하신 모든 정보는 상기 목적에 필요한 용도 이외로는
              사용되지 않습니다.<br />
              단, 이용자의 기본적 인권 침해의 우려가 있는 민감한 개인정보(인종
              및 민족, 사상 및 종교, 출신지 및 본적지, 정치적 성향 및 범죄기록,
              건강상태 등)는 수집하지 않습니다.<br />
              <br />
              제3조 개인정보의 보유기간 및 이용기간<br />
              고객의 개인정보는 다음과 같이 개인정보의 수집목적 또는 제공받은
              목적이 달성되면 파기됩니다. 단, 상법 등 관련법령의 규정에 의하여
              다음과 같이 거래 관련 권리 의무 관계의 확인 등을 이유로 일정기간
              보유하여야 할 필요가 있을 경우에는 일정기간 보유합니다.<br />
              1.계약 또는 청약철회 등에 관한 기록 : 5년<br />
              2.대금결제 및 재화등의 공급에 관한 기록 : 5년<br />
              3.소비자의 불만 또는 분쟁처리에 관한 기록 : 3년<br />
              <br />
              고객의 동의를 받아 보유하고 있는 거래정보 등을 고객께서 열람을
              요구하는 경우 무신사는 지체 없이 그 정보를 열람·확인 할 수 있도록
              조치합니다.
            </div>
            <label class="checkbox">
              <input type="checkbox" name="agree" id="agree" /> 자동 로그인
            </label>
            <span class="submit"
              ><input type="submit" value="비회원 구매하기"
            /></span>
          </div>
          <footer id="footer">
            <ul id="footer_menu">
              <li><a href="#">이용약관</a></li>
              <li>
                <a href="#"><b>개인정보처리방침</b></a>
              </li>
              <li><a href="#">고객센터</a></li>
            </ul>
          </footer>
        </div>
      </div>
    </div>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: black;
}
body {
  background-color: #f1f1f1;
}

#wrap {
  width: 500px;
  min-width: 400px;
  height: 1120px;
  margin: 0 auto;
  background-color: #ffffff;
}

#login_area {
  width: 330px;
  height: 1000px;
  background-color: #ffffff;
  margin: 0 auto;

  position: relative;
}

#login_header {
  width: 100%;
  height: 20px;

  padding: 76px 0 60px;
  text-align: center;
}

#login_box {
  width: 100%;
  margin: 0 auto;
}

#login_box .input {
  width: 100%;
  height: 50px;
  padding: 15px 10px 14px;
  box-sizing: border-box;
  border: 1px solid #cccccc;
  margin-bottom: 10px;
}
.checkbox {
  display: inline-block;
  font-size: 14px;
  color: #aaa;
}
.submit {
  display: block;
  margin: 10px 0 20px;
}

.submit > input {
  width: 100%;
  height: 60px;
  color: #ffffff;
  background: #000000;
  text-align: center;
  border: none;
  display: block;
  font-size: 18px;
  font-weight: bold;
}

#login_box > #sub_menu {
  margin: 36px 0;
  display: block;
  height: 22px;
}

#sub_menu > li {
  float: left;
  margin-left: 20px;
}

#sub_menu > li:first-child {
  margin-left: 10px;
}

#sub_menu > li::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  background-color: #aaa;
  margin-left: 20px;
  position: relative;
  top: 2px;
}

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

#sub_menu > li > a {
  color: #aaa;
  font-size: 14px;
}

#social {
  width: auto;
  margin: 30px 0 35px;
}

#kakao {
  width: 100%;
  height: 42px;
  background-color: #fee500;
  border: 1px #fee500 solid;
  border-radius: 6px;
  text-align: center;
  padding-top: 9px;
  box-sizing: border-box;
  position: relative;
}

#apple {
  width: 100%;
  height: 42px;
  background-color: #ffffff;
  border: 1px solid #bfbfbf;
  border-radius: 6px;
  margin-top: 10px;
  text-align: center;
  padding-top: 9px;
  box-sizing: border-box;
  position: relative;
}
#social > a {
  display: block;
}
#social > a > span {
  font-size: 15px;
  font-weight: bold;
  position: relative;
  top: -13px;
}

#social > #kakao > span::before {
  content: "";
  width: 30px;
  height: 30px;
  display: inline-block;
  background: url(../images/bg_social.png) no-repeat;
  background-size: 60px 30px;
  position: relative;
  top: 10px;
}

#social > #apple > span::before {
  content: "";
  width: 30px;
  height: 30px;
  display: inline-block;
  background: url(../images/bg_social.png) no-repeat;
  background-size: 60px 30px;
  background-position: -30px 0;
  position: relative;
  top: 12px;
}

#non_member {
  width: 100%;
  height: auto;
}

#tap_head {
  width: 100%;
  height: 49px;
  margin: 0 auto;
}

.non_member_tap {
  display: block;
  float: left;
  width: 49%;
  height: 49px;
  text-align: center;
  background-color: #ffffff;
  border: 1px solid #f1f1f1;
  border-bottom: none;
  font-size: 14px;
}

.non_member_tap > span {
  position: relative;
  top: 15px;
}

#non_member_lookup {
  background-color: #f1f1f1;
  color: #aaa;
}

#tap_contents1 {
  width: 100%;
  height: auto;
}

#tap_contents1 > .title {
  display: block;
  font-size: 14px;
  font-weight: bold;
  margin: 16px 0 10px;
}

#tap_contents1 > #text {
  width: 100%;
  height: 200px;
  border: 1px solid #aaa;
  overflow-y: scroll;
  padding: 8px 10px;
  box-sizing: border-box;
  font-size: 12px;
  color: #777;
  line-height: 18px;
}

#tap_contents1 > .checkbox {
  margin-top: 10px;
}

#tap_contents1 > .submit {
  margin-top: 30px;
}

#tap_contents2 {
  width: 100%;
  height: auto;
}

#tap_contents2 label {
  display: block;
  font-size: 14px;
  margin: 16px 0 5px;
}

#tap_contents2 > .submit {
  margin-top: 30px;
}

#tap_contents2 .input {
  width: 100%;
  height: 50px;
  padding: 15px 10px 14px;
  box-sizing: border-box;
  border: 1px solid #cccccc;
  margin-bottom: 10px;
}

#footer > #footer_menu {
  margin: 36px 0;
  display: block;
  height: 22px;
}

#footer_menu > li {
  float: left;
  margin-left: 15px;
}

#footer_menu > li::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  background-color: #aaa;
  margin-left: 20px;
  position: relative;
  top: 2px;
}

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

#footer_menu > li > a {
  color: #aaa;
  font-size: 14px;
}

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>무신사 로그인</title>
    <link rel="stylesheet" type="text/css" href="./css/style1.css" />
  </head>
  <body>
    <div id="wrap">
      <div id="login_area">
        <div id="login_header">
          <img src="./images/logo_mwusinsa.svg" />
        </div>
        <div id="login_box">
          <form>
            <input
              class="input"
              type="text"
              placeholder="아이디를 입력해 주세요"
            />
            <br />
            <input
              class="input"
              type="password"
              placeholder="비밀번호를 입력해 주세요"
            />
            <br />

            <span class="submit"><input type="submit" value="로그인" /></span>
            <label class="checkbox">
              <input type="checkbox" name="autologin" id="autologin" /> 자동
              로그인
            </label>
          </form>
          <ul id="sub_menu">
            <li><a href="#">회원 가입</a></li>
            <li><a href="#">아이디 찾기</a></li>
            <li><a href="#">비밀번호 찾기</a></li>
          </ul>
        </div>
        <div id="social">
          <a id="kakao" href="#">
            <span>카카오 로그인</span>
          </a>
          <a id="apple" href="#">
            <span>Apple 로그인</span>
          </a>
        </div>
        <div id="non_member">
          <div id="tap_head">
            <a href="./index.html" id="non_member_buy" class="non_member_tap">
              <span>비회원 구매하기</span>
            </a>
            <a href="#" id="non_member_lookup" class="non_member_tap">
              <span>비회원 주문 조회</span>
            </a>
          </div>
          <div id="tap_contents2">
            <form action="#">
              <ul>
                <li>
                  <label for="order_name">이름</label>
                  <input
                    class="input"
                    type="text"
                    placeholder="주문자명을 입력해 주세요"
                  />
                </li>
                <li>
                  <label for="oreder_number">주문번호</label>
                  <input
                    class="input"
                    type="text"
                    placeholder="주문번호를 입력해 주세요"
                  />
                </li>
              </ul>
            </form>
            <span class="submit"
              ><input type="submit" value="비회원 주문조회"
            /></span>
          </div>
          <footer id="footer">
            <ul id="footer_menu">
              <li><a href="#">이용약관</a></li>
              <li>
                <a href="#"><b>개인정보처리방침</b></a>
              </li>
              <li><a href="#">고객센터</a></li>
            </ul>
          </footer>
        </div>
      </div>
    </div>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: black;
}
body {
  background-color: #f1f1f1;
}

#wrap {
  width: 500px;
  min-width: 400px;
  height: 1050px;
  margin: 0 auto;
  background-color: #ffffff;
}

#login_area {
  width: 330px;
  height: 1000px;
  background-color: #ffffff;
  margin: 0 auto;

  position: relative;
}

#login_header {
  width: 100%;
  height: 20px;

  padding: 76px 0 60px;
  text-align: center;
}

#login_box {
  width: 100%;
  margin: 0 auto;
}

#login_box .input {
  width: 100%;
  height: 50px;
  padding: 15px 10px 14px;
  box-sizing: border-box;
  border: 1px solid #cccccc;
  margin-bottom: 10px;
}
.checkbox {
  display: inline-block;
  font-size: 14px;
  color: #aaa;
}
.submit {
  display: block;
  margin: 10px 0 20px;
}

.submit > input {
  width: 100%;
  height: 60px;
  color: #ffffff;
  background: #000000;
  text-align: center;
  border: none;
  display: block;
  font-size: 18px;
  font-weight: bold;
}

#login_box > #sub_menu {
  margin: 36px 0;
  display: block;
  height: 22px;
}

#sub_menu > li {
  float: left;
  margin-left: 20px;
}

#sub_menu > li:first-child {
  margin-left: 10px;
}

#sub_menu > li::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  background-color: #aaa;
  margin-left: 20px;
  position: relative;
  top: 2px;
}

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

#sub_menu > li > a {
  color: #aaa;
  font-size: 14px;
}

#social {
  width: auto;
  margin: 30px 0 35px;
}

#kakao {
  width: 100%;
  height: 42px;
  background-color: #fee500;
  border: 1px #fee500 solid;
  border-radius: 6px;
  text-align: center;
  padding-top: 9px;
  box-sizing: border-box;
  position: relative;
}

#apple {
  width: 100%;
  height: 42px;
  background-color: #ffffff;
  border: 1px solid #bfbfbf;
  border-radius: 6px;
  margin-top: 10px;
  text-align: center;
  padding-top: 9px;
  box-sizing: border-box;
  position: relative;
}
#social > a {
  display: block;
}
#social > a > span {
  font-size: 15px;
  font-weight: bold;
  position: relative;
  top: -13px;
}

#social > #kakao > span::before {
  content: "";
  width: 30px;
  height: 30px;
  display: inline-block;
  background: url(../images/bg_social.png) no-repeat;
  background-size: 60px 30px;
  position: relative;
  top: 10px;
}

#social > #apple > span::before {
  content: "";
  width: 30px;
  height: 30px;
  display: inline-block;
  background: url(../images/bg_social.png) no-repeat;
  background-size: 60px 30px;
  background-position: -30px 0;
  position: relative;
  top: 12px;
}

#non_member {
  width: 100%;
  height: auto;
}

#tap_head {
  width: 100%;
  height: 49px;
  margin: 0 auto;
}

.non_member_tap {
  display: block;
  float: left;
  width: 49%;
  height: 49px;
  text-align: center;
  background-color: #ffffff;
  border: 1px solid #f1f1f1;
  border-bottom: none;
  font-size: 14px;
}

.non_member_tap > span {
  position: relative;
  top: 15px;
}

#non_member_buy {
  background-color: #f1f1f1;
  color: #aaa;
}

#tap_contents1 {
  width: 100%;
  height: auto;
}

#tap_contents1 > .title {
  display: block;
  font-size: 14px;
  font-weight: bold;
  margin: 16px 0 10px;
}

#tap_contents1 > #text {
  width: 100%;
  height: 200px;
  border: 1px solid #aaa;
  overflow-y: scroll;
  padding: 8px 10px;
  box-sizing: border-box;
  font-size: 12px;
  color: #777;
  line-height: 18px;
}

#tap_contents1 > .checkbox {
  margin-top: 10px;
}

#tap_contents1 > .submit {
  margin-top: 30px;
}

#tap_contents2 {
  width: 100%;
  height: auto;
}

#tap_contents2 label {
  display: block;
  font-size: 14px;
  margin: 16px 0 5px;
}

#tap_contents2 > .submit {
  margin-top: 30px;
}

#tap_contents2 .input {
  width: 100%;
  height: 50px;
  padding: 15px 10px 14px;
  box-sizing: border-box;
  border: 1px solid #cccccc;
  margin-bottom: 10px;
}

#footer > #footer_menu {
  margin: 36px 0;
  display: block;
  height: 22px;
}

#footer_menu > li {
  float: left;
  margin-left: 15px;
}

#footer_menu > li::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  background-color: #aaa;
  margin-left: 20px;
  position: relative;
  top: 2px;
}

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

#footer_menu > li > a {
  color: #aaa;
  font-size: 14px;
}

티스토리툴바

[UXUI 웹디자인] 1달차 과제 / 무신사 로그인 페이지 만들기 (non js)

티스토리툴바