사용자와 웹페이지 간의 상호작용하는 모습을 예제를 통해 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

스크린샷, 2019-10-07 20-50-48.png

현재 로그인 버튼이 뿌연색인 것을 볼 수 있습니다.
이유는 제가 기본값으로 뿌연값을 넣어놨기 때문입니다.

이는 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

스크린샷, 2019-10-07 20-54-33.png

이때의 HTML이 어떤지 개발자 도구를 열어 확인해보겠습니다.

<button class="inlineToBlock ordinaryLogin activatedLoginColor">로그인</button>

기본 클래스였던 unactivatedLoginColor가 삭제되고 activatedLoginColor가 추가된 것을 확인할 수 있습니다.


실제로 DOM을 통해 구현하는 과정에서 문법적 실수가 일어날 수 있습니다.
원하는 결과가 나오지 않을 때는
꼭 문법을 다시 확인하는 습관을 들여야겠다고 생각했습니다.