사용자와 웹페이지 간의 상호작용하는 모습을 예제를 통해 HTML/CSS/JavaScript가 어떻게 쓰이는지 포스팅하겠습니다.
1. Log-in 버튼 활성화
1-1. 소스 코드
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>westagram practice</title>
<link href="style/common.css" rel="stylesheet" type="text/css" />
<link href="style/login1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="contentsWrap">
<div class="loginWindow">
<img src="img/logo_text.png" alt="instagramLogo" id="instaLogo">
<input type="text" placeholder="전화번호, 사용자 이름 또는 이메일" class="inlineToBlock">
<input type="password" placeholder="비밀번호" class="inlineToBlock">
<button class="inlineToBlock ordinaryLogin unactivatedLoginColor">로그인</button>
<div class="horizonAndOrWrap">
<hr class="leftHr">
<div class="or">또는</div>
<hr class="rightHr">
</div>
<a href="https://www.facebook.com/" class="noneunderline">
<button class="inlineToBlock facebookLogin">
<img src="img/facebook_logo.png" alt="facebook login" class="facebookIcon">
Facebook으로 로그인
</button>
</a>
</div>
<div class="haveAccount">
<p>계정이 없으신가요?
<a href="https://www.instagram.com/accounts/emailsignup/" class="noneunderline">
가입하기
</a>
</p>
</div>
</div>
<script src="js/login.js"></script>
</body>
</html>CSS
body {
background-color: #f9f9f9;
}
.contentsWrap{
margin: 90px auto;
max-width: 340px;
border: none;
padding: 20px;
text-align: center;
}
.loginWindow {
background-color: #fcfcfc;
padding: 10px auto;
border: 1px solid #dfdfdf;
border-radius: 3px;
}
.loginWindow input{
margin-bottom: 10px;
background-color: #f5f5f5;
height: 37px;
padding: 10px 10px;
box-sizing: border-box;
border: 1px solid #eaeaea;
border-radius: 4px;
}
.loginWindow input::placeholder{
font-size: 12px;
font-weight:100;
}
.loginWindow input:focus {
outline:none;
border: 1px solid #aaaaaa;
border-radius: 4px;
}
.ordinaryLogin {
height: 37px;
margin-bottom: 10px;
box-sizing: border-box;
border: 0px;
border-radius: 5px;
color: #ffffff;
font-size: 15px;
font-weight: 700;
}
.unactivatedLoginColor {
background-color: #acd5e8;
}
.activatedLoginColor {
background-color: #00aeff;
}
.loginWindow * {
width: 70%;
margin-left: auto;
margin-right: auto;
}
#instaLogo {
margin: 40px auto 30px;
max-width: 175px;
}
.inlineToBlock {
display: block;
}
/*
.horizonAndOr {
margin:10% 0;
width:100%;
box-sizing: border-box;
}
*/
.leftHr {
float:left;
width:35%;
box-sizing: border-box;
}
.or{
float:left;
width:17%;
margin:2px 5%;
font-size: 13px;
box-sizing: border-box;
color: #999999;
font-size: 14px;
font-weight: 700;
margin:0px 15px;
}
.rightHr {
float: right;
width:35%;
box-sizing: border-box;
}
.facebookLogin {
margin-top: 10px;
margin-bottom:10px;
background-color: rgba(255, 255, 255, 0.5);
height: 37px;
box-sizing: border-box;
border: 0px;
border-radius: 5px;
color: #00628f;
font-size: 15px;
font-weight: 700;
}
.facebookIcon {
width:13px;
}
.haveAccount {
background-color: #fcfcfc;
margin-top: 10px;
padding: 15px;
border: 1px solid #dfdfdf;
border-radius: 3px;
}
.haveAccount p {
font-size: 14px;
font-weight: 300;
color: #333333;
}
.haveAccount p a{
font-weight: 600;
color: #248ae3;
}
.noneunderline {
text-decoration:none;
}Javascript
let inputTag = document.getElementsByTagName("input");
let buttonArray = document.getElementsByTagName("button");
let inputId = inputTag[0];
let inputPassword = inputTag[1];
let ordinaryButton = buttonArray[0];
let facebookLoginButton = buttonArray[1];
inputPassword.addEventListener("keyup", () => {
if(inputId.value){
ordinaryButton.classList.remove("unactivatedLoginColor");
ordinaryButton.classList.add("activatedLoginColor");
}
if(!inputPassword.value){
ordinaryButton.classList.remove("activatedLoginColor");
ordinaryButton.classList.add("unactivatedLoginColor");
}
})
ordinaryButton.addEventListener('click', () => {
if(inputId.value === "devzunky" && inputPassword.value === "junkyuu"){
alert("로그인 성공");
} else {
alert("로그인 실패");
}
})1-2. 작동원리 포인트
WEB View
현재 로그인 버튼이 뿌연색인 것을 볼 수 있습니다.
이유는 제가 기본값으로 뿌연값을 넣어놨기 때문입니다.
이는 HTML과 CSS에서 확인할 수 있습니다.
<button class="inlineToBlock ordinaryLogin unactivatedLoginColor">로그인</button>button의 class에 unactivatedLoginColor값을 넣어놨습니다.
.unactivatedLoginColor {
background-color: #acd5e8;
}
.activatedLoginColor {
background-color: #00aeff;
}CSS에 .unactivatedLoginColor와 .activatedLoginColor두가지가 존재합니다.
이제 JavaScript에서 이에 해당하는 부분을 살펴보겠습니다.
inputPassword.addEventListener("keyup", () => {
if(inputId.value){
ordinaryButton.classList.remove("unactivatedLoginColor");
ordinaryButton.classList.add("activatedLoginColor");
}
if(!inputPassword.value){
ordinaryButton.classList.remove("activatedLoginColor");
ordinaryButton.classList.add("unactivatedLoginColor");
}
})Password 라는 Input에 keyup event가 일어났을 때, 조건을 충족하면
unactivatedLoginColor 클래스를 삭제하고 activatedLoginColor 클래스를 추가해줌으로써 이를 구현했습니다.
조건을 만족했을 때의 WEB View
이때의 HTML이 어떤지 개발자 도구를 열어 확인해보겠습니다.
<button class="inlineToBlock ordinaryLogin activatedLoginColor">로그인</button>기본 클래스였던 unactivatedLoginColor가 삭제되고 activatedLoginColor가 추가된 것을 확인할 수 있습니다.
실제로 DOM을 통해 구현하는 과정에서 문법적 실수가 일어날 수 있습니다.
원하는 결과가 나오지 않을 때는
꼭 문법을 다시 확인하는 습관을 들여야겠다고 생각했습니다.
devzunky@gmail.com