JavaScript 인스타그램 클론코딩 1.login-page

JINI·2022년 5월 19일
0
post-thumbnail

인스타그램을 클론 코딩으로 구현해 보려는 이유는 간단하다. 배우고 있는 언어로 무언가를 만들어 보고 싶었는데 그 중에서도 다양한 기능이 있고 구현해 볼 수 있는게 뭐가 있을까 생각해보니 나도 많이 사용하고, 다른 사람들도 많이 사용하는 것이 인스타그램이니 그냥 만들어보자!였다.
아직은 무에서 유를 창조해낼 실력이 아닌지라 현재 있는 것을 최대한 따라해서 만들어보자가 내 목표다.



🏷️구현 기능


  • ID, PW 조건 입력시 로그인 버튼 클릭시 색변화
  • 📍 - 조건 : ID에 @포함,PW 5글자이상
  • 조건에 맞지 않거나 빈 입력창으로 로그인 할 때 alert창 뜨기




  • html

    <!DOCTYPE html>
    <html lang="en">
        <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>Instagram</title>
        <link rel = "stylesheet" href="css/login.css">
    </head>
    <body>
        <div id = "container_wrap">
            <div class="container">
                <header>
                    <img class = "brand_logo" src="img/brand_logo.png" alt="logo">
                </header>
                <form name="login" action="" method="post"> <!--method="post" : 정보를 숨겨서 보낸다-->
                    <input class = "id" type="text" placeholder="전화번호,사용자 이름 또는 이메일"> <!--placeholder : 입력창 안에 text를 넣을 수 있다-->
                    <input class = "pwd" type="password" placeholder="비밀번호">
                    <button class = "loginBtn"><a href="#">로그인</a></button>
                </form>
                <div class="or_line">
                    <div class="line"></div>
                    <div class="text">또는</div>
                    <div class="line"></div>
                </div>
                <ul class="findpw">
                    <li><a href="findpwd.html">비밀번호를 잊으셨나요?</a></li>
                </ul>
            </div>
            <div class = "account">
                <ul>
                    <li>계정이 없으신가요?</li>
                    <li><a href="join.html">가입하기</a></li>
                </ul>
            </div>
        </div>
        <script src="js/login.js"></script>
    </body>
    </html>

    1. 로그인 창을 구현하기 위해서 <header> 부분에 인스타그램 로고만 감싸주었다. <form> 태그 안에 <input> 으로 아이디와 비밀번호를 입력할 수 있는 창을 만들고, <button>을 사용해서 로그인 버튼을 만들었는데 클릭하면 다른 페이지로 넘어가도록 <a> 태그를 사용했다.

    2. action에는 아이디와 비밀번호가 넘어가기위해 백엔드를 연결해야 하는데
      이번 프로젝트는 백엔드없이 단순 화면 구현과 조건을 만족하는 코드만 작성할 것이기 때문에 비워두었다.

    3. 구현한 로그인 페이지 하단에 로그인할 계정이 없는 경우는 가입하기 부분을 만들어서 클릭시 회원가입 페이지로 연결되도록했다.




    CSS


    css부분은 전체 코드가 아닌 생각하기에 중요한 코드만 적기로했다!
    
    li{
        list-style: none;
    }
    a{
        text-decoration: none;
    }

    순서 없는 목록을 생성하는 <li> 때문에 처음부터 목록 생성 모양이 생기지 않도록 처리하고 시작했다.



    .container{
        background: #fff;
        width: 350px;
        height: 380px;
        border: 1px solid #dbdbdb;
        margin-bottom: 0.6rem;
    }

    전체적인 틀을 .container 로 묶어서 코드를 작성했다.



    .brand_logo{
        display: block;  
        width: 15rem;
        margin: 0 auto;
        padding-top: 2rem;
        padding-bottom: 1rem;
    }

    로그 이미지를 display: block;로 준 이유는 이미지는 인라인 요소라 margin을 줄 수 없기 때문에 block 요소로 바꿔주었다.



    input{ 
        display: block;
        width: 250px;
        height: 40px;
        margin: 0 auto;
        background: #fafafa;
        border: 1px solid #dbdbdb;
        border-radius: 3px;
        text-indent: 5px;
        outline-color: gray;
    }

    <input> 창에 대한 전체적인 css를 작성했다. 역시나 display: block; 을 지정해 세로 배치를 했고, margin으로 정렬했다.



    input:first-child{
        margin-bottom: 0.5rem;
    }
    input:nth-child(2){
        margin-bottom: 1.5rem;
    }

    <input> 입력창들의 간격을 각각 다르게 지정하기 위해 -child 속성을 이용했다.
    input:-child : 같은 형태 요소 반복시 특정 순서에 따라 속성을 다르게 지정
    first-child : 첫 번째
    nth-child : 그 중에서 선택





    JavaScript

    //조건을 만족할 때만 클릭시 버튼색 변경
    const btn = document.querySelector(".loginBtn");
    btn.addEventListener("click",function(e){
        const inputId = document.querySelector('.id').value;
        const inputPw = document.querySelector('.pwd').value;
        if(inputId.includes('@') && inputPw.length > 4){
            document.querySelector(".loginBtn").style.background = "rgb(46, 184, 223)";
        }else{
            alert("입력해 주세요");
            document.querySelector(".loginBtn").style.background= "default";    
        }
        return false;
    });
    

    원래 인스타그램은 조건을 만족할 시 버튼 색이 변하면서 활성화 되는 것이었는데 나는 클릭 했을 때 조건에 부합할 경우에만 버튼색이 변하도록 구현했다.



    ✒️조건을 만족할 때만 클릭시 버튼색상 변경


    btn변수를 만들어서.querySelector() 를 사용해서 클래스 값이 loginBtn인 첫번째 요소에 접근하도록 했다.


    .querySelector() : CSS 선택자로 요소를 선택하는데 주의할 점은 선택자에 해당하는 
                       첫번째 요소만 선택한다.

    btn 버튼 클릭시 addEventListener로 실행하는데 이때
    아이디와 비밀번호 변수를 각각 만들어서 새로운 값을 입력받고

    if 를 사용해 입력한 id@가 포함되어있으면서, 입력한 pw의 길이는 5자리 이상일 때만 로그인 버튼 색상이 바뀌도록 inputId.includes('@') && inputPw.length > 4 조건을 주었다.

    else에는 해당 조건을 불만족할 경우 default을 지정해 버튼 색상은 변함이 없도록했고, 동시에 alert 경고창이 뜨도록했다.

    또한, 무분별한 페이지 넘김을 방지하기 위해서 if문의 바깥쪽에 return false;를 지정해 경고창이 뜨면 넘어가지 않도록 설정했다.

    💡전체코드 보러가기

    profile
    꾸준히 성장하는 개발자

    0개의 댓글