📂 자료 다운로드

이미지 자료_weniv 로그인 화면.zip

아래 디자인을 보고 로그인 화면을 구현해보세요

1. 디자인

log-in.png

2. 피그마 링크

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FrreCWZ2wH4DPJyozkuaZnL%2Flog-in%3Fnode-id%3D0%253A1

3. 정답코드

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>네이버 로그인</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        .cont {
            width: 350px;
            padding: 16px 16px 12px 17px;
            border: 1px solid #dae1e6;
            /*padding 값이 width 값의 일부가 되게 합니다.*/
            box-sizing: border-box;
        }

        .cont::after {
            /* 가상요소를 만들어 .find와 .join의 float을 해제합니다. */
            display: block;
            content: '';
            clear: both;
        }

        .cont p {
            font-size: 12px;
            color: grey;
            margin-bottom: 10px;
        }

        .link-login {
            display: block;
            padding: 15px 0;
            background: #19ce60;
            text-decoration: none;
            color: #fff;
            font-size: 13px;
            margin-bottom: 10px;
            /* 글자를 가운대로 정렬합니다. */
            text-align: center;
        }

        .link-login img {
            display: inline-block;
            width: 60px;
            height: 12px;
            margin-right: 5px;
            /* 상하 정렬을 조정해줍니다. 오직 inline, inline-block 요소에서만 작동합니다. */
            vertical-align: -1px;
        }

        .find {
            float: left;
        }

        .find img {
            width: 10px;
            height: 14px;
        }

        .find img,
        .find a {
            float: left;
        }

        .find a {
            margin: 3px;
        }

        /* 가상요소를 만들어 점을 그려줍니다. */
        .link-find::after {
            display: inline-block;
            content: '';
            width: 3px;
            height: 3px;
            background: #d7dce0;
            border-radius: 10px;
            /* 상하 정렬을 조정해줍니다. 오직 inline, inline-block 요소에서만 작동합니다. */
            vertical-align: 3px;
            margin-left: 5px;
        }

        .find a,
        .join a {
            text-decoration: none;
            color: #404040;
            font-size: 12px;
        }

        .join {
            float: right;
        }

        .join img {
            width: 11px;
            height: 11px;
            /* 상하 정렬을 조정해줍니다. 오직 inline, inline-block 요소에서만 작동합니다. */
            vertical-align: -1px;
        }
    </style>
</head>

<body>
    <div class="cont">
        <p>네이버를 더 안전하고 편리하게 이용하세요</p>
        <a href="" class="link-login"><img src="images/title.png" alt="네이버">로그인</a>
        <div class="find">
            <img src="images/lock.png" alt="">
            <a href="" class="link-find">아이디</a>
            <a href="">비밀번호찾기</a>
        </div>
        <div class="join">
            <img src="images/user.png" alt="">
            <a href="">회원가입</a>
        </div>
    </div>
</body>

</html>