ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • CSS - 인스타 클론(2)
    CSS/CSS 2020. 5. 1. 13:02

    앞에서 인스타그램을 html/css를 이용해서 만들었다.

    이제 이 로그인 화면에 기능을 넣어 보도록 하자.

    Event

    구현할 기능은 아이디와 비밀번호에 각각 한 글자 이상 써야 버튼이 활성화되도록 해야 한다.

    버튼 색깔이 원래 연한 파란색이었다가 -> 활성화되면 파란색으로!

    [ html ]

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>repl.it</title>
        <link href="style/common.css" rel="stylesheet" type="text/css" />
        <link href="style/login.css" rel="stylesheet" type="text/css" />
      </head>
      <body>
        <div class="login-form">
          <img src="img/logo_text.png" />
          <input
            type="text"
            placeholder="전화번호, 사용자 이름 또는 이메일"
            id="userId"
          />
          <input type="password" placeholder="비밀번호" id="userPw" />
          <button class="loginBtn" type="button">로그인</button>
        </div>
        <script src="js/login.js"></script>
      </body>
    </html>
    

    [ javascript ]

    const userId = document.querySelector("#userId");
    const userPw = document.querySelector("#userPw");
    const loginBtn = document.querySelector(".loginBtn");
    
    function check() {
      if (userId.value.length === 0 && userPw.value.length === 0) {
        loginBtn.style.backgroundColor = "#b2dffc";
      } else {
        loginBtn.style.backgroundColor = "#83ccfb";
      }
    }
    
    userId.addEventListener("keyup", check);
    
    userPw.addEventListener("keyup", check);
    
    check();

    일단, 아이디와 비밀번호, 버튼에 해당하는 태그들을 담을 const형의 변수를 선언한다.

    그리고, querySelector()를 이용해서 아이디, 비밀번호, 버튼에 해당하는 태그의 셀렉터(selecter)를 가져와서 태그들을 얻어온다.

    여기서, 이 내용을 이해하려면 DOM을 이해해야 한다.

    DOM이란?

    - Document Object Model의 약자로, 웹 페이지의 HTML을 계층화시켜 트리 구조로 만든 객체(Object) 모델이다. 

    - JavaScript는 이 model로 document라는 전역 객체를 통해서 웹 페이지에 접근하고, 페이지를 수정할 수 있다.

    - 즉, JavaScript의 document 객체는 DOM 구조를 접근하는 관문이며, document 객체는 HTML 문서를 나타낸다.

    출처 : https://medium.com/@wooder2050/%EC%9D%B4%EB%A1%A0-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-dom-%ED%8A%B8%EB%A6%AC-96ca3008a474

     

    그리고 =(대입 연산자)를 통해서 얻어온 태그들을 const형 변수에 담는다.

    여기서 const를 쓴 이유는 아이디와 비밀번호, 버튼 이외에 다른 태그를 또 담을 필요가 없기 때문에 const로 변수를 선언했다. 

    이제 얻어온 태그를 이용해서 아이디와 비밀번호에 각각 한 글자 이상 쓰면 버튼이 활성화되도록 구현해야 한다.

    일단, userId와 userPw에는 아이디와 비밀번호에 해당하는 태그들이 담겨 있기 때문에, 이 두 개의 변수한테 addEventListener("이벤트 종류", 함수)을 이용해 적용시켰다.

    여기서 addEventListener란 무엇인가?

    - event listener 단어를 해석하면 이벤트를 듣고 있다는 뜻이며, addEventListener는 특정 이벤트가 언제 발생하는지 가만히 듣고 있다가, 발생하면 인자로 받은 함수를 실행시켜준다.

    이벤트 종류는 'keyup'이라는 이벤트이고, 이 이벤트는 키보드를 눌렀다가 떼는 순간 발생한다.

    즉, 아이디와 비밀번호에 해당하는 태그에 무언가의 반응을 주면 함수가 실행될 것이다.

    그러면 이제 함수를 만들어야 한다.

    함수 이름은 check라는 함수이고, 그 안에 조건문을 통해서 아이디의 값의 길이, 비밀번호의 값의 길이를 통해서 만약 길이가 0이면 값이 없다는 뜻이기 때문에 기존의 연한 파란색 버튼으로 활성화를 시킨다.

    아이디와 비밀번호의 값의 길이가 0이 아니면 값이 존재한다는 뜻이기 때문에, else로 진한 파란색으로 버튼 색을 바꾸게 설정한다. 

    그러면 아이디와 비밀번호에 키를 눌렀다 떼면, 이벤트가 발생하고 그 이벤트에 해당하는 함수가 실행해서 아이디와 비밀번호에 값이 있으면 버튼 색이 진한 파란색으로 변하는 것을 볼 수 있을 것이다.

    'CSS > CSS' 카테고리의 다른 글

    CSS - 개구리 게임(2)  (0) 2020.04.29
    CSS - flex 개구리 게임(1)  (0) 2020.04.28
    CSS - 인스타 클론(1)  (0) 2020.04.28
    CSS - flexbox 정리  (0) 2020.04.25
    CSS - 레이아웃의 모든 것 정리  (0) 2020.04.21

    댓글

Designed by Tistory.