위코드 2주차 자바스크립트 레플릿을 마치고 주어진 과제. 인스타그램 클론 코딩하기. 자바스크립트를 온전히 이해하지 못한 채 조바심이 가득한 상태로 시작,, 정리할게 너무 많은데 우선 틈이 날 때마다 조금씩 벨로깅을 해보려고 한다. 일단 코드부터 봐보자.<!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>Login page</title> <link rel="stylesheet" type="text/css" href="login.css"> <link rel="stylesheet" type="text/css" href="common.css"> <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"> </head> <body> <div class="container"> <h1 class="westagram">Westagram</h1> <main class="bigbox"> <div class="inputs"> <input id ="userid" type="text" placeholder="아이디"></input> <input id = "password" type="password" placeholder="비밀번호"></input> </div> <div class="btn-container"> <button class="btn">로그인</button> </div> <div class="or"> <div class="line-l"></div> <div class="centerchar">또는</div> <div class="line-r"></div> </div> <div class="facebook"> <button class="btn-fb"> <img src = "1384053.svg" class="fb-icon"></> <Span class="fb-char">Facebook으로 로그인</Span> </button> </div> <div class="forget-box"> <button class="forget">비밀번호를 잊으셨나요?</button> </div> <footer class="joinform"> <p class="join">계정이 없으신가요? <button class="btn-join">가입하기</button></p> </footer> </div> </main> <script type="text/javascript" src="login.js"></script> </body> </html>로그인 페이지를 구현하면서 느낀 것은 html에서 중요한 부분은
<div>의 적절한 사용인 것 같다. 남발하지 않되, 레이아웃을 짜기위해<div>를 통해 잘 감싸주는 것. 일단 개발자 도구를 통해 인스타그램에선 어떤 식으로 레이아웃들을 감싸줬는지 파악하여 참고했다. 지난 레플릿 html/css 과제에서 레이아웃을 홈페이지 가운데에 구현하고 싶었는데 아이콘이 고정되지 않아 결국 포기했었는데.. html에서 적절한 태그를 통해 부모와 자식간의 연결을 잘만 해줬다면 그렇게 헤맬 문제도 아니었던 것이다. 그리고 또 하나 중요한 점. 태그들의 id 또는 class 네이밍이다. 되도록 직관적이며 연결성을 가진 네이밍을 해야 한다. 우리집 고양이 이름 짓는데도 참 오래걸렸었는데..body { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; } .container { width: 350px; height: 400px; border: 1px solid lightgray; } .westagram { text-align: center; font-family: "Lobster", cursive; font-size: 45px; margin: 40px; } .bigbox { display: flex; flex-direction: column; } .inputs { display: flex; flex-direction: column; align-items: center; } input { width: 250px; height: 30px; margin: 3px; padding: 3px; padding-left: 8px; font-size: 11px; border: 1px solid lightgray; border-radius: 3px; } .btn-container { display: flex; flex-direction: column; align-items: center; } .btn { width: 260px; height: 32px; margin: 15px; background-color: lightskyblue; color: white; font-weight: bold; font-size: 14px; border: 0; border-radius: 3px; } .or { display: flex; flex-direction: low; justify-content: center; margin-top: 10px; } .line-l { width: 95px; margin-top: 5px; margin-bottom: 20px; border: 0.5px solid lightgray; } .centerchar { margin-left: 20px; margin-right: 20px; font-size: 13px; font-weight: bold; color: lightslategray; } .line-r { width: 95px; margin-top: 5px; margin-bottom: 20px; border: 0.5px solid lightgray; } .facebook { display: flex; justify-content: center; margin-top: 15px; margin-bottom: 15px; } .fb-icon { width: 15px; height: 15px; } .btn-fb { width: 50%; cursor: pointer; background-color: white; color: navy; border: 0; font-weight: bold; } .forget-box { display: flex; justify-content: center; margin-bottom: 15px; } .forget { cursor: pointer; background-color: white; font-size: 12px; border: 0; } .joinform { display: flex; justify-content: center; width: 100%; height: 60px; margin-top: 22px; border: 1px solid lightgray; } .join { display: flex; align-items: center; padding: 5px; font-size: 14px; } .btn-join { display: flex; align-items: center; cursor: pointer; background-color: white; color: blue; padding: 5px; border: 0; font-weight: bold; }진짜..
flex너무 사랑해..flex모르는 사람 정말 바보.. html에서 레이아웃을 잘 짜줬다면, 적절하게 잘 감싸주어 부모와 자식간의 사이가 원할하다면,flex로 내가 원하는 위치에 딱 딱 놓을 수 있다. 이전 과제를 하며 원하는 위치에 놓지 못해 많은 시간을 할애하고도 찝찝하게 마무리 된게 여러번이었는데.. 로그인 페이지를 구현하면서레이아웃의 중요성을 정말 제대로 깨달았다. 괜히 페이지를 전체적으로 보면서 헤더 또는 네비게이션, 메인 그 안에 섹터 또는 아티클 푸터 사이드 등을 파악하라고 하는게 아니다. 그리고 개발자도구를 통해 좀 더 빠르게 파악이 가능하다.document.addEventListener('keyup', function() { /*레플릿에서 배운 이벤트 메소드를 써먹었다. 처음부터 html에 접근해 함수를 사용.*/ const userId = document.getElementById('userid'); //html에서 id로 이름을 지정해준 값을 가져오는 메소드. const userPassword = document.getElementById('password'); //id 와 password 를 가져와 각 각 변수 const로 선언. if (userId.value && userPassword.value ) { //id 와 password 두 곳에 입력이 됐다면, let color = document.getElementsByClassName('btn')[0]; //html에서 class로 이름을 지정해준 값을 가져오는 메소드. color.style.backgroundColor = "#1565c0"; //"#1565c0" 로그인 버튼의 색깔에 변화주기. } if (!userId.value || !userPassword.value ) { //id 또는 password 두 곳 중 한 곳이라도 값이 없다면, let color = document.getElementsByClassName('btn')[0]; color.style.backgroundColor = "lightskyblue"; } });자바스크립트로 구현한 것은 위스타그램 아이디와 비밀번호 두 입력창에 입력값이 주어졌을 때 로그인 버튼의 색깔이 변하게 하는 것, 그리고 다시 입력창에 값이 한 곳이라도 없다면, 다시 본래의 색으로 돌아가는 것.
코드리뷰로 뚜들겨 맞고 수정된 코딩도 아래에 포스팅 하도록 하겠다.
