728x90
한 2~3주 동안 배운 내용을 토대로 네이버 로그인 화면을 만들어 보았다.
HTML이랑 CSS로만 만들어서 디자인에 중심을 두었다.
원래 만드려고 했던 로그인 화면은 아래와 같았는데
아직 기초단계이다 보니 조금 힘들 것 같아 상대적으로 쉬운 아래 사진과 위의 사진의 특징을 몇개씩 골라
만들어 보았다.
[HTML 코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>네이버 : 로그인</title>
<link rel="stylesheet" href="naverlogin.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
</head>
<body>
<select name="language" id="naverlanguage">
<option value="korean">한국어</option>
<option value="english">English</option>
</select>
<div class = "naverlogo">
<a href="https://www.naver.com/" ><img id = "logo" src="naver.png" alt="메인으로" ></a>
</div>
<div>
<div><input class = "id" type="text" placeholder=" 아이디"></div>
<div><input class = "pwd" type="text" placeholder=" 비밀번호"></div>
</div>
<div><button class = "loginbtn">로그인</button></div>
<div class ="loginkeep" >
<i class="bi bi-check-circle"></i> 로그인 상태 유지
</div>
<hr>
<br>
<strong>더욱 간편한 로그인</strong>
<br>
<div class ="easylogin">
<input id = "QR" type="button" value="QR코드 로그인">
<input id ="disposable" type="button" value="일회용 번호 로그인">
</div>
<div class ="idpwdfind">
<a id = "a" href="https://nid.naver.com/user2/help/pwInquiry?lang=ko_KR" target="_blank">비밀번호 찾기 | </a>
<a id ="b"href="https://nid.naver.com/user2/help/idInquiry?lang=ko_KR" target="_blank">아이디 찾기 | </a>
<a id ="c" href="https://nid.naver.com/user2/V2Join?m=agree&lang=ko_KR" target="_blank">회원가입 </a>
</div>
<footer>
<a id ="d" href="https://policy.naver.com/rules/service.html" target="_blank">이용약관 |</a>
<a id ="e" href="https://policy.naver.com/rules/privacy.html" target="_blank">개인정보처리방침 |</a>
<a id ="f" href="https://policy.naver.com/rules/disclaimer.html" target="_blank">책임의 한계와 법적고지 |</a>
<a id ="g" href="https://help.naver.com/support/service/main.help?serviceNo=532" target="_blank">회원정보 고객센터</a>
<br>
<a id ="h" href="https://www.navercorp.com/"><img id = "navercorp" src="naver.png" alt="메인으로" width="100px"></a>
Copyright © NAVER Corp. All Rights Reserved.
</footer>
</body>
</html>아이디 입력 창 위의 NAVER 로고를 눌렀을 때 메인 페이지로 이동하기 위해 링크를 첨부했다.
아이디/비밀번호/회원가입/footer 태그 안에 있는 메뉴를 골랐을 때 그 페이지로 이동하기 위해 링크를 첨부했다.
[CSS 코드]
body{
text-align: center;
background-color: #f5f6f7;
}
#naverlanguage{
margin-left: 700px;
width: 100px;
height: 30px;
border-radius: 0%;
}
#logo{
margin-top: 150px;
width: 10%;
}
.id{
margin-top: 70px;
width: 350px;
height: 40px;
border: none;
border-radius: 2%;
}
.pwd{
margin-top: 7px;
margin-bottom: 7px;
width: 350px;
height: 40px;
border: none;
border-radius: 2%;
}
.loginbtn{
margin-bottom: 7px;
width: 350px;
height: 40px;
background-color: rgb(24, 207, 24);
color: white;
border: none;
border-radius: 2%;
}
/*체크박스 자리*/
.loginkeep{
margin-right: 205px;
}
.bi-check-circle{
color: rgb(24, 207, 24);
}
hr{
width: 350px;
}
#QR, #disposable{
margin-top: 20px;
margin-bottom: 16px;
background-color: white;
border-radius: 2%;
border: gray;
width: 125px;
height: 30px;
padding: 0%;
}
.idpwdfind, footer{
font-size: small;
}
#a, #b, #c, #d, #e, #f, #g, #h{
text-decoration: none;
color: gray;
}
#navercorp{
width: 55px;
}[결과물]
아직 뭐가 뭔지 잘 몰라서 class랑 id 뭘 써야되나 고민하고 구글링해서 겨우 만들었는데 재미있긴 하다.
앞으로 계속 배우면서 고쳐나가야겠다.
728x90
'WEB' 카테고리의 다른 글
| [HTML/CSS] 그리드를 이용하여 웹 페이지 틀 짜보기 (0) | 2022.07.21 |
|---|---|
| [HTML/CSS] id와 class의 차이점 (0) | 2022.07.19 |
| [WEB/JS] 자바스크립트 객체 이해하기(선언, 반복문) (0) | 2022.07.13 |
| [WEB/JS] 함수(function) 이해하기 (0) | 2022.07.12 |
| [WEB/JS] 배열/반복문(for문, while문) (0) | 2022.07.11 |
