ID, Password에 한 글자 씩이라도 들어와야 로그인 버튼이 활성화 되는 기능을 구현했다.

폴더구성

html, css, javascript 폴더를 만들어 각각 배치했고,
import를 이용해 style.css파일에 모아줬다.
style.css파일에 전체 html에 적용되는 기본적인 css 코드도 넣어줬다.

test-border 태그는 레이아웃을 짜면서 border: 1px solid red;로 계속 확인하는데 편하도록 아예 태그를 만든후 html에 추가해서 눈으로 확인하고 작업이 끝나고 제거하는 방식으로 했다.
레이아웃을 짤때는 사실 그렇게 확인을 하기보다 모양 만드는데 급급했고.. 많이 이상하게 했지만
리팩토링을 해보면서 빨간 보더를 한 줄 한 줄 써서 확인해보고 많이 배웠다.
display, position, margin, padding을 쓰는 법을 더 알게됐다.
strong태그도 태그를 먼저 지정해놓고 두껍게 쓰고싶은 p나 span태그에 추가해주는 방식을 썼다.

login.html

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Log in</title>
   <link rel="stylesheet" href="../style/login.css" type="text/css">
   <link rel="stylesheet" href="../style/style.css" type="text/css">
</head>

<body>
   <header>
       <div class="userInfo">
           <div class="westa">westagram</div>

           <div class="inputs">
               <input type="text" id="id" placeholder="전화번호, 사용자 이름 또는 이메일">
               <input type="password" id="password" placeholder="비밀번호">
               <button class="btn xxx">로그인</button>
           </div>

           <a href="#">비밀번호를 잊으셨나요??</a>
       </div>

       <script src="../js/login.js"></script>  //
   </header>
</body>

</html>

login.css



header {
   margin: 10vh auto;       //margin-top,bottom 사이즈를 vh로 준 이유는 브라우저창의 크기가 변할때
   width: 500px;            //로그인창이 조금 움직였으면 해서이고 margin left와 right는
   flex-direction: column;  //auto를 줘서 가운데 정렬했다.
   align-items: center;
   border: 1px solid rgba(216, 211, 211, 0.493);
}

.userInfo {
   margin: 0 auto;   //  원래는 가운데정렬 방식으로 flex를 알고있어서, depth가 계속 깊어졌는데,
}                    // 왜 더 쉽고 좋은 방법을 몰랐을까 ㅎㅎ

.westa{
   text-align: center;
   font-family: 'Lobster', cursive;
   font-size: 80px;
   margin-top: 20px;
   margin-bottom: 40px;
}

.inputs {
   display: flex;
   flex-direction: column;
   align-items: center;
}

input {
   margin: 7px;
   outline : 1px solid rgba(239, 235, 235, 0.616);
   width: 400px;
   font-size: 19px;
   background-color: #f8f7f7a8;
}

.btn {
   width: 400px;
   height: 50px;
   border-radius: 5px;
   margin: 15px 0 180px;
   border: 0px;
   background-color: #3364eb;
   color: white;
   font-size: 19px;
}

a {
   display: block;       // a링크는 inline요소라서 text-align : center가 적용되지 않아,
   text-align: center;   // display:block을 주고 가운데 정렬했다.
   margin-bottom : 20px;
   color: navy;
   font-size: 19px;
   text-decoration: none;
}

.xxx {
   background-color: #96c2eb7c;
   cursor: not-allowed;   // JS에서 이벤트 핸들러에 의해 제거되는 클래스.
}                         //id, password 두 군데에 값이 하나라도 들어오면 xxx클래스가 제거된다.
            //로그인 버튼은 클래스로 btn, xxx를 갖고있고 btn은 진한 파란색, 
            //xxx는 옅은 파란색이 background-color로 설정되어있다.

login.js

const idtext = document.getElementById("id");  //DOM에 접근
const passtext = document.getElementById("password");
const btnBtn = document.getElementsByClassName("btn")[0]; //클래스는 다수일 수 있고 배열로 반환된다.  
//querySelector(".btn") 로도 접근가능하다. 쿼리셀렉터는 CSS선택자 방식을 사용한다. (클래스는 . id는 # 등..)



function test() {
   const id = idtext.value;
   const pass = passtext.value;

   if (id && pass) {   //두 인풋 모두에 들어온 값들이 truthy면, xxx태그가 제거된다.
       btnBtn.classList.remove('xxx');
   } else {
       btnBtn.classList.add('xxx'); //그렇지 않으면 xxx 태그가 추가된다.
   }
}



idtext.addEventListener("keyup", test);  //keyup 이벤트가 발생하면 test함수가 실행된다.
passtext.addEventListener("keyup", test);

Review
1. 단순히 로그인 버튼의 색상만을 바꾸지 않고 disabled라는 css 클래스를 부여하여 비활성화되는 값을 부여하는 법이 있다고 한다. 그렇게도 구현해 보겠다.
2. 로그인 버튼 활성화 기능을 구현해 보면서 DOM접근과 이벤트 적용을 할 수 있게 됐다.
역시 나는 프론트인지(?) 색깔만 바뀌어도 너무 재밌다..
3. 처음 레이아웃 짜고 css 작성 했을때와 리팩토링을 하고난 뒤가 정말 많이 다르다.

보더를 줘가면서 flex, inline요소, block요소를 계속 확인하면서 레이아웃을 다시 확인했다.
레이아웃은 bottom-up 방식으로 구성한다는 키워드가 정말 중요한 거였다.
부모요소의 크기를 고정해버리면 자식요소의 사이즈가 변함에 따라 부모요소의 크기가 유동적으로 변하지 않는다.

이런 상황에서 만약 자식요소의 크기가 변해야 한다면, 부모요소의 CSS도 같이 수정해줘야 하는 불편함이 생긴다.

이런 구성이 겹겹이 쌓인다면 추후에 CSS 유지보수가 매우 힘들어진다.
작업 처음부터 계획적으로 마크업해야 된다는 생각을 했다.

Author And Source

이 문제에 관하여(instagram clone 로그인버튼 활성화 기능), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@heyho9292/instagram-clone-layout-로그인버튼-활성화-기능-댓글-추가-기능

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)