728x90
반응형
오늘 따라 만들어본 웹페이지는 네이버로그인 화면이다.
원본 디자인은 다음과 같다.
내가 구현한 모습은 다음과 같다.
일부 폰트나 이미지가 차이가 있지만 최대한 비슷하게 하려 하였다.
전체 소스(HTML)
<!doctype HTML>
<head>
<meta charset="UTF-8">
<title>네이버 로그인</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/51db22a717.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="main-container">
<div class="main-wrap">
<header>
<div class="sel-lang-wrap">
<select class="lang-select">
<option>한국어</option>
<option>English</option>
</select>
</div>
<div class="logo-wrap">
<img src="img/logo.png">
</div>
</header>
<section class="login-input-section-wrap">
<div class="login-input-wrap">
<input placeholder="Username" type="text"></input>
</div>
<div class="login-input-wrap password-wrap">
<input placeholder="Password" type="password"></input>
</div>
<div class="login-button-wrap">
<button>Sign in</button>
</div>
<div class="login-stay-sign-in">
<i class="far fa-check-circle"></i>
<span>Stay Signed in</span>
</div>
</section>
<section class="Easy-sgin-in-wrap">
<h2>Easier sign in</h2>
<ul class="sign-button-list">
<li><button><i class="fas fa-qrcode"></i><span>Sign in with QR code</span></button></li>
<li><button><i class="fab fa-facebook-square"></i><span>Facebook</span></button></li>
<li><button><i class="fab fa-line"></i><span>line</span></button></li>
</ul>
<p class="forget-msg">Forgot your Username or Password? | Sign up</p>
</section>
<footer>
<div class="copyright-wrap">
<span> <img src="img/logo.png"> Copyright © NAVER Corp. All Rights Reserved.</span>
</div>
</footer>
</div>
</div>
</body>
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
전체소스(CSS)
:root{
--body-background-color: #f5f6f7;
--font-color: #4e4e4e;
--border-gray-color : #dadada;
--naver-green-color: #04c75a;
--naver-green-border-color: #06b350;
}
*{
margin:0;
padding:0;
}
body{
background:var(--body-background-color);
}
.main-container{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
margin-top: 21px;
}
.main-container .main-wrap{
width:768px;
}
.main-container .main-wrap .sel-lang-wrap .lang-select
{
width: 96px;
height: 30px;
color: var(--font-color);
border: solid 1px var(--border-gray-color);
}
.main-container .main-wrap .logo-wrap{
padding-top:55px;
}
.main-container .main-wrap .logo-wrap img
{
width: 231px;
height: 44px;
}
.main-container .main-wrap header .sel-lang-wrap{
display:flex;
justify-content:flex-end;
}
.main-container .main-wrap header .logo-wrap{
display:flex;
flex-direction: column;
align-items: center;
}
.login-input-section-wrap{
padding-top: 60px;
display: flex;
flex-direction: column;
align-items: center;
}
.login-input-wrap{
width: 465px;
height :48px;
border: solid 1px var( --border-gray-color );
background: white;
}
.password-wrap{
margin-top: 13px;
}
.login-input-wrap input{
border: none;
width:430px;
margin-top: 10px;
font-size: 14px;
margin-left: 10px;
height:30px;
}
.login-button-wrap {
padding-top: 13px;
}
.login-button-wrap button{
width: 465px;
height :48px;
font-size: 18px;
background: var(--naver-green-color);
color: white;
border: solid 1px var(--naver-green-border-color);
}
.login-stay-sign-in{
width: 465px;
height: 52px;
display: flex;
font-size: 15px;
color: #4e4e4e;
align-items: center;
justify-content: flex-start;
border-bottom: solid 1px var(--border-gray-color);
}
.login-stay-sign-in i{
font-size: 25px;
color: #9ba1a3;
}
.login-stay-sign-in span{
padding-left: 5px;
line-height: 25px;
}
.Easy-sgin-in-wrap{
display: flex;
flex-direction: column;
align-items: center;
padding-top: 40px;
}
.Easy-sgin-in-wrap h2{
font-size: 20px;
}
.Easy-sgin-in-wrap .sign-button-list
{
padding-top:25px;
list-style: none;
width: 465px;
display: flex;
flex-direction: column;
align-items: center;
}
.Easy-sgin-in-wrap .sign-button-list li{
padding-bottom: 10px;
}
.Easy-sgin-in-wrap .sign-button-list li button{
width: 465px;
height: 56px;
border: solid 1px var(--border-gray-color);
text-align: left;
background: white;
}
.Easy-sgin-in-wrap .sign-button-list li button i{
padding-left: 15px;
font-size: 20px;
}
.fa-qrcode
{
color:var(--naver-green-color);
}
.fa-line{
color:var(--naver-green-color);
}
.fa-facebook-square
{
color:#4064ac;
}
.Easy-sgin-in-wrap .sign-button-list li button span{
padding-left: 20px;
font-size: 18px;
}
.Easy-sgin-in-wrap .forget-msg{
color:var(--font-color);
font-size: 14px;
padding-top: 10px;
}
footer{
padding-top: 95px;
padding-bottom: 15px;
display:flex;
flex-direction:column;
align-items:center;
width:768px;
}
.copyright-wrap{
display: flex;
flex-direction: column;
align-items: center;
height: 15px;
}
footer .copyright-wrap span img{
width: 59px;
height: 11px;
}
footer .copyright-wrap span{
font-size: 13px;
line-height: 15px;
}
github
https://github.com/lucidmaj7/frontend_study/tree/master/naver-login
lucidmaj7/frontend_study
Frontend Study(html, css,react,etc). Contribute to lucidmaj7/frontend_study development by creating an account on GitHub.
github.com
728x90
반응형
'개발 > HTML_CSS' 카테고리의 다른 글
| [HTML/CSS] 로그인 페이지 만들기 / css 그림자, 그라데이션 (0) | 2020.09.01 |
|---|---|
| [HTML/CSS] 트위터 로그인 화면 따라 만들기 (0) | 2020.08.31 |
| [HTML/CSS] google 따라 만들기 (0) | 2020.08.27 |
| [HTML/CSS] 스타벅스 홈페이지 메뉴 따라 만들기 (0) | 2020.08.25 |
| CSS flex, justify-content 옵션 비교 (0) | 2020.04.28 |
댓글