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

18842 단어 CSSCSS

220415 과제

로그인화면구현_1 만들기

HTML

✍

  <body>
    <article class="cont-login clear-fix">
      <h2 class="blind">위니브 로그인</h2>
      <p class="txt-login">더 편리해진 위니브에 오신 것을 환영합니다.</p>
      <a href="#none" class="link-login">
        <img
          src="./이미지 자료_weniv 로그인 화면/weniv-logo.png"
          alt="weniv"
          class="img-logo"
        />
        로그인
      </a>
      <div class="cont-find">
        <img
          src="./이미지 자료_weniv 로그인 화면/icon-lock.png"
          alt=""
          class="img-find"
        />
        <a href="#none" class="link-id">아이디</a>
        <a href="#none" class="link-pw">비밀번호찾기</a>
      </div>
      <div class="cont-join">
        <img
          src="./이미지 자료_weniv 로그인 화면/icon-user.png"
          alt=""
          class="img-join"
        />
        <a href="#none" class="link-join">회원가입</a>
      </div>
    </article>
  </body>

CSS

✍

   <style>
      .blind {
        position: absolute;
        clip: rect(0 0 0 0);
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
      }

      .clear-fix::after {
        content: "";
        display: block;
        clear: both;
      }

      .cont-login {
        margin: 20px auto;
        width: 350px;
        padding: 18px 15px 17px;
        border: 1px solid #dbdbdb;
        border-radius: 5px;
        box-sizing: border-box;
      }

      .cont-login a {
        text-decoration: none;
      }

      .cont-login .txt-login {
        margin-bottom: 16px;
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: #000000;
      }

      .cont-login .link-login {
        display: block;
        padding: 10px 0 12px;
        margin-bottom: 16px;
        background: #711bff;
        border-radius: 4px;
        font-weight: 500;
        font-size: 12px;
        line-height: 15px;
        color: #fff;
        text-align: center;
      }

      .link-login .img-logo {
        width: 64px;
        margin-right: 4px;
        vertical-align: bottom;
      }

      .cont-login .cont-find {
        float: left;
      }

      .cont-find .img-find {
        float: left;
        margin: -1px 4px 0 0;
      }

      .cont-find .link-id::after {
        float: right;
        display: block;
        content: "";
        width: 1px;
        height: 12px;
        margin: 0 4px;
        background-color: #767676;
      }

      .cont-find [class^="link"] {
        float: left;
      }
      .cont-find .img-find {
        width: 16px;
        height: 16px;
      }

      .cont-login .cont-join {
        float: right;
      }

      .cont-join [class$="join"] {
        float: left;
      }

      .cont-join .img-join {
        margin: -1px 4px 0 0;
        width: 16px;
        height: 16px;
      }
    </style>

💻

가상구현하는법 정리

[알고리즘/백준] 1476: 날짜 계산(python)
4월 19일

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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