위코드에서의 첫 과제!하하하핳핳ㅎ하^^
그동안 배운것들을 토대로 인스타그램의 로그인 페이지를 구현해야했다ㅠㅠ...
구글 사랑해요❤️ 그리고 많이 물어봐도 전혀 싫은 내색없이 흔쾌히 도와주셨던 동기분들도 감사합니다 사랑합니다ㅜㅜ💚💛❤️🧡👍
✨✨✨✨✨일단 최종 로그인 구현 파일을 보자면✨✨✨✨✨
✔️1. 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"> <link rel="stylesheet" href="style/login.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"> <title>Document</title> </head> <body> <main> <div class="login-form"> <div class="logo"> <h1>Westagram</h1> </div> <form> <input class="userName" type="text" placeholder="전화번호, 사용자 이름 또는 이메일" /> <input class="passWord" type="password" placeholder="비밀번호" /> </form> <button class="loginBtn">로그인</button> <div class="links"> <a href="#">비밀번호를 잊어버리셨나요?</a> </div> </div> </main> <script src="js/login.js"></script> </body> </html>
💭form태그의 특징을 이번에 처음 알았는데 submit 기능이 있어서 제출하는 속성이 있다고 한다.
그렇지만 굳이 안써도 됨...
• 사용자로부터 데이터를 입력받을 때 사용하며, 의도에 따라 다음의 11가지 태그들을 적절하게 조합해서 사용한다.
•form태그의 자식태그 중 input이 가장 많이 쓰임
<form태그의 메서드>
-reset(): form 내부의 모든 값(value)을 초기화해준다. 초기화 버튼(button type="reset")을 클릭한 것과 같은 효과이다. 기본값(default value)을 지정해놨다면 이 값으로 다시 초기화된다.
-submit(): form 을 제출한다. 제출 버튼(button type="submit")을 클릭한 것과 같은 효과이다.
✔️2. CSS 코드
* { box-sizing: border-box } main { width: 550px; height: 650px; border: 2px solid #f1ecee; text-align: center; margin: auto; border-radius: 2px; margin-top:100px; } .logo { margin-top: 50px; } h1 { font-family: 'Lobster', cursive; font-size: 80px; } a { text-decoration: none; color: rgb(53, 105, 150) } form { margin-top: 90px; margin-bottom: 30px; } input { text-align: left; display: flex; margin: auto; width: 450px; height: 50px; background: #FDFAFB; border: 1px solid #f1ecee; border-radius: 2px; margin-bottom: 10px; } .links { padding-top: 160px; font-weight: bold; } .loginBtn { width: 450px; height: 50px; background: rgb(187, 211, 228); border: none; border-radius: 4px; color: white; font-size: 18px; font-weight: bold; opacity: .3; } .active { opacity: 1; } input::placeholder { padding: 7px; }
💭CSS는 유지보수가 가장 어렵다더니 진짜였다^^...
기초 공사를 제대로 해야 나중에 고생을 안하는 느낌... 레이아웃에만 거의 며칠을 썼는지 모르겠다😥😥 그래도 느리지만 조금씩 느는게 보이니까 괜찮음 긍정긍정ㅜㅜ아자아자화이자(모더나 맞은 사람)
자 이제 대망의 자바스크립트 코드😔
나는 아직 무얼 구현 해낼 정도의 실력이 아니기 때문에 검색만이 살길ㄸㄹㄹ...
자바스크립트 복습 또 복습하고 + 미니 프로젝트도 많이 해봐야겠다!
✔️3. js 코드
const userName = document.querySelector('.userName'); //class 이름이 userName인 class를 찾음 const passWord = document.querySelector('.passWord'); const loginBtn = document.querySelector('.loginBtn') userName.addEventListener('keyup',inputValue); passWord.addEventListener('keyup',inputValue); function inputValue(){ loginBtn.classList.add("active"); const userNameLength = userName.value.length; const passWordLength = passWord.value.length; if((userNameLength && passWordLength)===0) { loginBtn.classList.remove("active"); } }
🔹querySelector는 특정 name,id,class를 제한하지 않고 css 선택자를 사용하여 요소를 찾는다. 같은 id 또는 class 일 경우 스크립트 최상단 요소만 로직에 포함한다.
🔸querySelector(#id) => id 값 id를 가진 요소를 찾는다. 🔸querySelector(.class) => class 값 class를 가진 요소를 찾는다.
🔹addEventListener()는 document의 특정요소(id,class,tag 등등) event(click하면 함수를 실행해라, 버튼을 누르면 함수를 실행해라 등등)를 등록할 때 사용한다.
//자주 사용하는 이벤트의 종류 🔸click - 마우스 버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다. 🔸mouseover – 마우스를 HTML요소 위에 올리면 발생한다. 🔸mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다. 🔸keypress – 키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생한다. 🔸keydown – 키를 누를 때 발생한다. 🔸keyup – 키를 눌렀다가 떼는 순간에 발생한다.
++0508 수정내용✨
(이렇게 작성해도 동일하게 작동함)
const userName = document.querySelector('.userName'); const passWord = document.querySelector('.passWord'); const loginBtn = document.querySelector('.loginBtn'); function logIn(){ loginBtn.classList.add("active"); //active라는 classList 추가 if ((userName.value.length && passWord.value.length) === 0) { loginBtn.classList.remove("active") //아이디와 비번이 0글자인 경우에만 remove } else { loginBtn.classList.add("active") } } userName.addEventListener('keyup',logIn); passWord.addEventListener('keyup',logIn);
🔹classList 메소드 알아보기
-add( String [, String [, ...]] )
지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.
-remove( String [, String [, ...]] )
지정한 클래스 값을 제거한다.
