멋쟁이 사자처럼 FE 2기 - 16

32150 단어 CSSCSS

220418

로그인화면구현과제 _ 2

HTML

✍

 <body>
    <main id="appLogin">
      <article class="cont-login">
        <h1 class="tit-weniv">
          <img src="images_login/logo.png" alt="weniv" />
        </h1>
        <p class="txt-login">위니브를 더 즐겁고 편리하게 이용하세요.</p>
        <button type="button" class="btn-login">로그인</button>
      </article>
    </main>
    <article class="modal-login on">
      <h2 class="txt-hide">회원가입, 로그인 또는 소셜서비스로 로그인</h2>
      <section class="cont-form-login">
        <h3 class="tit-form">로그인 또는 회원가입</h3>
        <p class="txt-form">위니브에서 여러분의 궁금증을 해결하세요! :)</p>
        <form class="form-login">
          <fieldset class="module-inp module-inp-id error">
            <label for="inpId" class="txt-hide">아이디</label>
            <input
              type="text"
              class="inp-login"
              id="inpId"
              placeholder="아이디"
            />
            <strong class="inp-error">아이디를 입력해주세요.</strong>
          </fieldset>
          <fieldset class="module-inp error">
            <input
              type="password"
              id="inpPw"
              class="inp-login"
              placeholder="비밀번호"
            />
            <label for="inpPw" class="txt-hide">비밀번호</label>
            <strong class="inp-error"
              >아이디 혹은 비밀번호와 일치하지 않습니다.</strong
            >
          </fieldset>
          <input type="checkbox" id="inpHold" class="inp-hold txt-hide" />
          <label for="inpHold" class="labl-hold">로그인 상태 유지</label>
          <button type="button" class="btn-login">로그인</button>
          <div class="link-userinfo">
            <a href="javascript:void(0);" class="link-signup">회원가입</a>
            <a href="javascript:void(0);" class="link-lost"
              >아이디/비밀번호 찾기</a
            >
          </div>
        </form>
        <section class="cont-sns-login">
          <h3 class="txt-hide">소셜서비스로 로그인</h3>
          <ul>
            <li>
              <a href="javascript:void(0);" class="icon-google link-sns-login"
                >구글 계정으로 로그인</a
              >
            </li>
            <li>
              <a href="javascript:void(0);" class="icon-facebook link-sns-login"
                >페이스북 계정으로 로그인</a
              >
            </li>
            <li>
              <a href="javascript:void(0);" class="icon-naver link-sns-login"
                >네이버 계정으로 로그인</a
              >
            </li>
            <li>
              <a href="javascript:void(0);" class="icon-kakao link-sns-login"
                >카카오 계정으로 로그인</a
              >
            </li>
          </ul>
        </section>
        <button type="button" class="btn-close">
          <img src="images_login/close.png" alt="로그인 닫기" />
        </button>
      </section>
    </article>
    <script>
      const targetModal = document.querySelector(".modal-login");
      document
        .querySelector("#appLogin .btn-login")
        .addEventListener("click", (e) => {
          toggleModal();
        });
      document
        .querySelector(".modal-login .btn-close")
        .addEventListener("click", (e) => {
          toggleModal();
        });
      function toggleModal() {
        targetModal.classList.toggle("on");
      }
    </script>
  </body>

CSS

✍

@charset "utf-8";

/* base */
@font-face {
    font-family: Spoqa Han Sans Neo;
    src: url("../font/SpoqaHanSansNeo-Regular.woff") format("woff");
    font-weight: 400;
}

@font-face {
    font-family: Spoqa Han Sans Neo;
    src: url("../font/SpoqaHanSansNeo-Medium.woff") format("woff");
    font-weight: 500;
}

@font-face {
    font-family: Spoqa Han Sans Neo;
    src: url("../font/SpoqaHanSansNeo-Bold.woff") format("woff");
    font-weight: 700;
}

body {
    font-family: "Spoqa Han Sans Neo", sans-serif;
}

/* 메인 화면 */
#appLogin {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
}

.cont-login {
    width: 500px;
    padding: 38px 30px 30px;
    text-align: center;
    border: 1px solid #C4C4C4;
}

.cont-login .tit-weniv {
    display: inline-block;
    width: 122px;
    margin-bottom: 36px;
}

.cont-login .txt-login {
    margin-bottom: 32px;
    font-size: 16px;
    line-height: 20px;
}

/* 모달 스타일 */
.modal-login {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
}

.modal-login.on {
    display: block;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    overflow-y: auto;
}

.modal-login::before {
    display: block;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    opacity: .7;
}

.modal-login .cont-form-login {
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 30px auto;
    background-color: #fff;
    border: 1px solid #C4C4C4;
    border-radius: 10px;
}

.cont-form-login .tit-form {
    padding: 20px 0 18px;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    font-weight: 500;
    border-bottom: 1px solid #C4C4C4;
}

.cont-form-login .txt-form {
    padding: 0 24px 0;
    margin: 26px 0 24px;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
}

.cont-form-login .form-login {
    padding: 0 24px 0;
}

.form-login .labl-hold {
    display: inline-block;
    height: 22px;
    margin: 17px 0 21px;
    text-align: left;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #767676;
    cursor: pointer;
}

.form-login .labl-hold::before {
    display: inline-block;
    content: "";
    width: 22px;
    height: 22px;
    margin-right: 8px;
    vertical-align: -5px;
    background-image: url("images_login/icon_check_empty.png");
}

.form-login .inp-hold:focus+.labl-hold::before {
    outline: 2px solid #000;
    outline-offset: 5px;
}

.form-login .inp-hold:checked+.labl-hold::before {
    background-image: url("images_login/icon_check.png");
}

.form-login .link-userinfo {
    margin-top: 20px;
    text-align: center;
}

.form-login a[class^="link"] {
    display: inline-block;
    font-size: 14px;
    line-height: 18px;
    color: #767676;
}

.form-login .link-signup::after {
    display: inline-block;
    content: '\007C';
    margin: 0 8px 0 12px;
}

.cont-form-login .cont-sns-login {
    position: relative;
    margin-top: 30px;
    padding: 38px 24px 25px;
    font-size: 14px;
    line-height: 18px;
    color: #767676;
}

.cont-sns-login::before {
    content: "또는";
    display: block;
    width: 52px;
    height: 18px;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #fff;
    text-align: center;
    z-index: 10;
}

.cont-sns-login::after {
    content: "";
    display: block;
    width: calc(100% - 48px);
    position: absolute;
    top: 9px;
    height: 1px;
    margin-top: -1px;
    background-color: #C4C4C4;
}

.cont-sns-login li+li {
    margin-top: 10px;
}

.cont-form-login .btn-close {
    position: absolute;
    padding: 22px 24px;
    top: 0;
    right: 0;
    z-index: 30;
    background-color: transparent;
}

💻

가상요소, 체크박스, 또는, 빨간글씨(아이디를 입력해주세요.)

Display & Opacity
간단한 실행 파일 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage