Ex 002 | NAVER Login CSS

dhforb123·2021년 11월 11일

HTML/CSS 예제

목록 보기

2/4

[멋쟁이 사자처럼 프론트엔드 스쿨]에서 배운 내용을 활용한 연습 예제.
- NAVER Login CSS
- CSS flex

1. Result

학습한 flex 속성을 활용해 네이버 로그인 영역을 클론 코딩한 것이다.
Flex-container는 전체 영역을 <div class="login">로 설정하고
Flex-items은 크게 <header>, <main>, <footer>로 설정한 후
<footer>의 경우 Flex-conctainer로 다시 설정하여 마크업 하였다.

2. Code

<!-- This is clone of Naver Login Section (Flex) -->
<!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>NAVER Login</title>
    <style>
        /* reset css */
        html, body, div, p, a, ul, li, footer, header, main{
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
            list-style-type: none;
            border-style: unset;
        }

        p{
            color: gray;
        }
        
        a, a:link, a:visited, a:hover{
            color: gray;
            text-decoration: none;
        }

        /* Style */
        .login {
            display: flex;
            flex-direction: column;
            border: 1px solid #dae1e6;
            width: 500px;
            height: auto;
            margin: 10px;
            padding: 20px 30px;
            background-color: #f7f9fa;
        }
        

        main {
            width: 100%;
            text-align: center;
            margin-top: 11px;
            padding: 15px 0;
            background-color: #19ce60;
            border: 1px solid #15c654;
            border-radius: 2px;
        }

        main a, main a:link, main a:visited, main a:hover{
            color: white;
            font-size: 25px;
        }

        main a::before{
            content: url("./images/title.png");
            vertical-align: middle;
            margin-right: 10px;
        }

        .bottom{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            margin-top: 10px;
        }

        footer .id::before{
            display: inline-block;
            content: "";
            background-image: url("./images/lock.png");
            background-size: 12px 16px;
            width: 12px;
            height: 16px;
            margin-right: 10px;
            vertical-align: middle;
        }

        footer .pw::before{
            display: inline-block;
            content: "";
            width: 5px;
            height: 5px;
            background-color: gray;
            margin-left: 10px;
            margin-right: 10px;
            border-radius: 50%;
            vertical-align: middle;
        }

        footer .signup::before{
            display: inline-block;
            content: "";
            background-image: url("./images/user.png");
            background-size: 16px 16px;
            width: 16px;
            height: 16px;
            margin-right: 10px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="login">
        <header>
            <p class="top">네이버를 더 안전하고 편리하게 사용하세요</p>
        </header>
        <main>
            <a href="#">로그인</a>
        </main>
        <footer>
            <ul class="bottom">
                <li>
                    <a href="#" class="id">아이디</a>
                    <a href="#" class="pw">비밀번호찾기</a>
                </li>
                <li>
                    <a href="#" class="signup">회원가입</a>
                </li>
            </ul>
        </footer>
    </div>
</body>
</html>

3. Review

flex 속성을 통한 정렬을 주로 사용하고 Flex-container를 다중으로 사용하여 제작하면서 해당 속성에 대해 충분히 이해할 수 있는 예제였다. 평소 주로 사용하는 웹 포털인 만큼 더욱 흥미를 갖고 코딩할 수 있었고 클론 코딩의 장점을 몸소 느낄 수 있었기 때문에 본인이 자주 접하는 사이트를 클론 코딩하는 학습법을 매우 추천한다.