HTML
태그를 적절하게 사용하여 페이지 레이아웃을 스스로 구현할 수 있다.CSS
기초 개념을 활용하여 원하는 디자인을 요소에 적용할 수 있다. input
태그 활용법에 대해 익힌다.JavaScript
로 여러 기능을 구현하여 DOM
의 요소를 조작할 수 있다.git flow
를 이해하고 PR을 작성하여 github
을 통한 코드 리뷰 방식을 이해한다.그 동안 배운 HTML
, CSS
의 학습내용을 모두 이용해서 Starbucks 홈페이지와 유사한 웹페이지를 만들고, JavaScript
을 구현하여 기능들을 구현하는 프로젝트였으며, 드디어 공부한 내용을 활용하여 프로젝트를 할 수 있다는 생각에 신나기까지 했다. 프론트엔드에서 HTML
,CSS
,JavaScript
는 초반부이며 전반적인 내용이지만, 프로젝트를 진행하면서 내가 부족한 부분이나 미숙한 부분을 점검하면서 더 성장할 기회를 준 시간이었던 것 같다. 이 글을 작성하는 시점은 모든 프로젝트의 내용 구현을 마친 후에 내 자신을 돌아보기 위한 회고록이자 프로젝트에 모든 내용과 나 자신을 되돌아 보기 위한 피드백이기도 하다.
<HTML>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webucks</title>
<link href="styles/login.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
</head>
<body>
<section>
<h1>WeBucks</h1>
<div class="input">
<input type="text" placeholder="전화번호, 사용자 이름 또는 이메일" class="userid">
</div>
<div class="input">
<input type="password" placeholder="비밀번호" class="pw">
<button class="show">show</button>
<button class="hide">show&hide</button>
</div>
<div class="btn">
<button class="but" disabled>로그인</button>
</div>
<div class="forget">
<a href="">비밀번호를 잊으셨나요?</a>
</div>
</section>
</body>
<script src="js/login.js">
</script>
</html>
<CSS>
*{
box-sizing: border-box;
}
h1{
display:flex;
justify-content:center;
margin-top :10%;
font-style: Regular 400;
font-family: 'Dancing Script', cursive;
font-size : 100px;
font-weight :bold;
margin-bottom:20px;
}
.input{
display :flex;
justify-content: center;
position : relative;
}
input{
margin-top:15px;
padding: 12px 10px;
border-radius :5px ;
border : 1px solid lightgray;
width:32%;
background-color:#F7F7F7;
color:gray;
}
.btn{
display : flex;
justify-content: center;
margin-top:20px;
}
.but{
height:45px;
width:32%;
border-radius:10px;
border:none;
color:white;
background-color:#ADD3EB;
font-size :17px;
}
.but:enabled{
background-color: blue;
cursor : pointer;
}
.forget {
display : flex;
justify-content: center;
margin-top:170px;
color : #62b6ea;
font-weight:bold;
}
a{
color: blue;
text-decoration: none;
}
input:focus{
outline : none;
} /* 포커스 시 아웃라인 없애줌 */
.show{
position : absolute;
right : 37%;
top : 25px;
font-size : 11px;
margin-right : 1px;
padding : 1;
}
.hide {
position : absolute;
right : 34%;
top : 25px;
font-size : 11px;
padding : 1;
margin-right : 5px;
}
<JavaScript>
const emailForm = document.querySelector('.userid'); // 이메일 입력창
const passwordForm = document.querySelector('.pw'); // 패스워드 입력창
const loginButton = document.querySelector('button'); // 로그인 버튼
var reg = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/; // 이메일 조건식
var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; //패스워드 조건식
emailForm.addEventListener('keyup', () => { // 이메일 입력창에 'keyup' 이벤트가 작동할 때
if (emailForm.value.match(regExp) != null) {
emailForm.style.border = "2px solid green";
}
else {
emailForm.style.border = "1px solid lightgray";
}
if (true === reg.test(passwordForm.value)) {
passwordForm.style.border = "2px solid green";
}
else {
passwordForm.style.border = "1px solid lightgray";
}
if (emailForm.style.border === "2px solid green" && passwordForm.style.border === "2px solid green") {
loginButton.disabled = false;
}
else { loginButton.disabled = true; }
});
passwordForm.addEventListener('keyup', () => { //패스워드 입력창에 'keyup' 이벤트가 작동할 때
if (emailForm.value.match(regExp) != null) {
emailForm.style.border = "2px solid green";
}
else {
emailForm.style.border = "1px solid lightgray";
}
if (true === reg.test(passwordForm.value)) {
passwordForm.style.border = "2px solid green";
}
else {
passwordForm.style.border = "1px solid lightgray";
}
if (emailForm.style.border === "2px solid green" && passwordForm.style.border === "2px solid green") {
loginButton.disabled = false;
}
else { loginButton.disabled = true; }
});
let showandhide = document.getElementsByClassName("hide")[0]; // show&hide button
showandhide.disabled = false; //버튼 항상 활성화
showandhide.addEventListener("click", () => {
if (passwordForm.type === "text") {
passwordForm.type = "password";
return;
}
else if (passwordForm.type === "password") {
passwordForm.type = "text";
return;
}
});
/* 버튼이 입력될 때 password type이면 text, text type이면 password type으로 속성을 변경해주고,
visualiity를 조건마다 변경시켜준다. */
JavaScript
를 활용하여 만들어둔 로그인 페이지에 생동감을 불어주는 작업을 수행하였다. 우선, 로그인 버튼은 초기부터 비활성화로 설정해준 후, 이메일과 패스워드가 조건에 부합할 경우에만, 로그인 버튼이 활성화되도록 설정해주었다. 이메일은 이메일 형식, 패스워드는 "영소문자, 영대문자, 숫자, 특수문자 포함 8자리 이상" 일 경우에 각각 입력창의 테두리를 초록색으로 변경해주고, 입력창이 모두 초록색이 되었을 때, 버튼이 활성화되도록 JavaScript
코드를 설정해주었다. 생소했던 정규표현식을 학습하여 이메일과 패스워드의 조건과 이벤트핸들러를 구현할 수 있었고, 로그인 버튼의 활성화는 원래 학습했던 JavaScript를 통해 쉽게 구현할 수 있었다.