01. 로그인 페이지 구상, 목표
24.01.30(화)_13:10
저번에 이어서 이번엔 로그인 화면 페이지 만들기!! 먼저 구상 그림~.~
아무튼 이런 형식으로 해서... 이번엔 div로 처음부터 제대로 구역을 나누어야지!!
전체적인 계획~~~
1. 제목 부분 -> a href로 클릭 시 메인 페이지로 이동, span으로 각 class 해서 색 바꾸기
2. 아이디 비밀번호 로그인 버튼 전체를 <form>으로 해서 나중에 제출할 때 적용할 수 있도록 하기 (찾아봤는데 다 form으로 함,,,)
3. 로그인 유지하는 체크 박스
4. 회원이 아니면 회원가입하기 페이지로 이동하기 -> 일단은 그냥 링크로만
---js---
5. rim08 / 1234로 고정된 아이디 / 비밀번호를 입력하면 로그인 성공 알림뜨면서 메인 페이지로 이동하기
6. 다른 아이디 비밀번호 입력하면 로그인 실패 알림
7. 둘 다 4자리 이상 입력 전까지는 로그인 버튼 불투명도 50%로 하고 버튼 비활성화 시키기
그럼 시작!!
02. 로그인 페이지 만들기 - html
24.01.30(화)_14:00
일단 제일 기본 틀이 되는 html부터 ㄱㄱ
구상 그림 대로 하면
흰 네모 배경: <wrap> - 전체 div
사이트 이름: <titleName>
input 전체: <form>
ID: text type (input type으로 css 선택자에 사용, name으로 js 변수에 사용, placeholder는 입력 전 설명)
PW: password type (이걸로 하면 칸에 입력할 때 ***등으로 보임)
유지: label (label for로 같은 id의 이름으로 써주면 글만 클릭해도 동일하게 체크박스 표시됨
checkbox + 글
제출: submit type
회원가입: <signUp>
js는 꼭 마지막에 추가!! (js는 실행될 때 dom 생성을 중단하고 진행하기 때문에 html보다 앞에 오면 오류날 수 있음, 맨 마지막에 넣거나 생성 중단을 무시하는 태그를 추가해야 됨)
<!DOCTYPE html>
<html>
<head>
<title>ILOHA-Login</title>
<meta charset="utf-8">
<!--여기 폰트 추가-->
<link rel="stylesheet" href="loginStyle.css">
</head>
<body>
<div class="wrap">
<div class="titleName">
<h1><a href="index.html"><span class="title_I">I</span><span class="title_LO">LO</span><span class="title_HA">HA</span></a></h1>
</div>
<form method="post" action="" id="loginForm">
<input type="text" name="Id" placeholder="아이디">
<input type="password" name="Pw" placeholder="비밀번호">
<label for="keepLogin"> <!--label for로 하면 같은 이름의 공간을 클릭해도 동일한 효과(문자 클릭해도 체크됨)-->
<input type="checkbox" id="keepLogin">
로그인 유지하기
</label>
<input type="submit" id="loginBtn" value="로그인">
</form>
<div class="signUp">
<span class="des">회원이 아니신가요? </span><span class="sign"><a href>회원가입 하기</a></span>
</div>
</div>
<script src="loginPage.js"></script>
</body>
</html>
03. 로그인 페이지 만들기 - css
먼저 *으로 전체 효과를 없애주고, body 전체에 배경 색을 깔아주고 시작한다.
그리고 흰 네모 wrap을 만들어주는데, 여기서 여러 사실을 알게 되었다.
그냥 가로세로를 정해주기 보다, max-width로 설정해주면 반응형처럼 줄였을 때 안에 있는 요소들까지 같이 줄어든다.
또한 margin: () auto; 를 하면 가로로 중앙 정렬이 된다.
*{
border: none;
padding: 0;
margin: 0;
}
body{
background-color: rgb(120, 213, 175);
}
.wrap{
background-color: rgb(252, 252, 252);
max-width: 400px; /*최대 max까지 늘어난 상태, 반응형*/
height: 450px;
padding: 50px;
border-radius: 16px;
margin: 100px auto; /*중앙 정렬*/
box-shadow: 0 0 10px rgba(67, 45, 112, 0.2);
}
.titleName{
text-align: center;
font-size: 30px;
margin-bottom: 40px;
}
.titleName a{
text-decoration: none;
font-family: 'Orbit', sans-serif;
}
.title_I{
color: rgb(48, 214, 159);
}
.title_LO{
color: rgb(239, 142, 194);
}
.title_HA{
color: rgb(214, 208, 34);
}
그다음 input의 타입들을 []으로 선택해서 효과를 주었다. 이거 할 때 placeholder가 옆으로 공간 있게 하려고 padding이나 margin을 설정해 주면 입력 칸까지 옆으로 늘어나서 중앙 정렬이 되지가 않았었다... 얘 때문에 계속 검색하다가 발견함
box-sizing: border-box; <-이걸 해주면 박스 안에서 중앙으로 예쁘게 정렬이 된다!!
그리고 체크박스도 커스터마이징 하는 방법대로 해봤는데 잘 안돼서 일단 얘는 건너뛰기로 했다... 체크박스에만 1시간 넘게 잡고 있었더니 문득 깨달음: 난 지금 디자인 공부하는 게 아니다(...) 빠르게 넘어가기 ㄱ
#loginForm input[type="text"], [type="password"], [type="submit"]{
width: 100%;
height: 60px;
box-sizing: border-box; /*이거 해야 padding해도 예쁘게 정렬됨,, 안하면 한쪽으로 늘어남*/
padding: 0 10px;
margin-bottom: 16px;
background-color: rgb(229, 226, 226);
border-radius: 6px;
font-size: 20px;
font-family: 'Nanum Gothic', sans-serif;
}
#loginForm input::placeholder{
color: rgb(159, 155, 155);
font-size: 16px;
}
#loginForm label{
color: rgb(91, 62, 68);
cursor: pointer;
font-family: 'Nanum Gothic', sans-serif;
}
그다음으로는 로그인 버튼과 회원가입 안내~~
#loginForm #loginBtn{ /*submit은 자동으로 box-sizing:border-box 적용됨*/
background-color: rgb(120, 213, 175);
color: white;
font-size: 16px;
margin-top: 30px;
cursor: pointer;
font-family: 'Nanum Gothic', sans-serif;
}
#loginForm #loginBtn:hover{
background-color: rgb(98, 176, 144);
}
.signUp{
text-align: center;
margin-top: 20px;
font-family: 'Nanum Gothic', sans-serif;
}
.signUp .des{
color: rgb(91, 62, 68);
}
.signUp a{
color: rgb(98, 176, 144);
}
04. 로그인 페이지 만들기 - javaScript
24.01.30(화)_17:50
이제 간단한 js 추가하기!! 솔직히 진짜 서버에 저장하고 그런 것도 해보고 싶지만... 그건 아직 모르기도 하고 생각해보니 그거 하려면 회원가입 페이지부터 만들었어야 되는 게 아닌가?라는 생각이 들어서 일단 알림창만 하기로!!(무엇보다 아직 이거 하기도 어렵다,,, 계속 찾아보면서 함)
일단 전역변수로!! getElementById();를 이용하여 id값을 가져온다. form 전체를 가져와서 아이디 비밀번호를 사용할 수 있도록 하였고, 버튼 비활성화 기능을 만들기 위해 버튼도 따로 가져와서 저장해두었다. 이들은 값이 변하지 않으므로 const로 선언해 주면 된다.
const loginForm = document.getElementById("loginForm");
const loginBtn = document.getElementById("loginBtn");
맨 아래에는 함수 호출을 써주었다. 자동으로 항상 호출이 되도록 하려고 위 form변수의 name값인 Id나 Pw가 변할 때마다(input) submitOn함수가 실행되도록 하였다.
//입력 칸의 값에 변화가 있을 때마다 호출
loginForm.Id.addEventListener("input", submitOn);
loginForm.Pw.addEventListener("input", submitOn);
이 함수에서는 입력받은 Id와 Pw의 value값을 trim으로 공백 제거 한 다음에(공백만 4자 쳐서 버튼이 활성화 되면 안 되므로) 각각 const로 저장하고 시작한다.
그리고 4자 미만일시 disableSubmitButton();이 실행되어서 버튼을 비활성화 시키고, 4자 이상이면 활성화시킨다.
function submitOn(){
const userID = loginForm.Id.value.trim(); //trim(): 공백 제거
const userPW = loginForm.Pw.value.trim();
if(userID.length<4 || userPW.length<4){
disableSubmitButton();
}
else{
enableSubmitButton();
}
}
function enableSubmitButton() {
loginBtn.disabled = false; //버튼 활성화
loginBtn.style.opacity = '1';
loginBtn.style.cursor = 'pointer';
}
function disableSubmitButton() {
loginBtn.disabled = true; //버튼 비활성화
loginBtn.style.opacity = '0.5';
loginBtn.style.cursor = 'default';
}
아래는 버튼을 클릭하는 event때마다 발생하는 함수로, loginBtn이 눌릴 때마다 실행된다.
일단 submit 후 새로고침하는 걸 막기 위한 것을 써준다.
그리고 아까와 마찬가지로 아이디와 비밀번호를 const로 저장하고, 예외처리를 해두고 맞는 아이디, 비밀번호면 로그인 성공 alert를 띄우고 location.href로 메인 화면으로 이동시킨다.
loginBtn.addEventListener("click", (event) => {
event.preventDefault(); //submit후 새로고침 막기
const userID = loginForm.Id.value;
const userPW = loginForm.Pw.value;
if(userID.length < 1 || userPW.length < 1){
alert("아이디와 비밀번호를 모두 입력하세요.");
return; //리턴 안하면 로그인 실패 문구까지 이어서 뜸
}
if(userID==="rim08" && userPW==="1234"){
alert("[로그인 성공] "+userID+"님 환영합니다.");
location.href="index.html";
}
else{
alert("[로그인 실패] 아이디 또는 비밀번호가 틀렸습니다.");
}
})
05. 로그인 페이지 결과물
24.01.30(화)_18:47
여기까지 한 결과~!!
06. TopBar 수정, Menu 창 만들기
24.01.30(화)_19:30
로그인 페이지 완성한 기념으로 이제 뭐하지 하다가,,, 이번에 이거 만들면서 div영역이나 css 중앙정렬 등을 조금 더 알게 되어서 이참에! 저번에 이상하게 만든 상단 탭을 수정하기로 하였다.
수정하면서 왼쪽 상단 Menu를 링크에서 버튼 속성으로 바꿔주고, 이를 누르면 왼쪽에서 메뉴 창이 슬라이드처럼 튀어나오는(?) 걸 만들어 보려고 한다.
일단 다시 좀 더 깔끔하고 명확하게 div로 나눠주고...
새로운 div로 menuBtn구역을 onClick 했을 때 toggleMenu함수가 호출되도록 한다.
그리고 menuBox로 내용 링크들을 써준다.
<div class="topBar">
<div class="menuBtn" onclick="toggleMenu()"><b>Menu</b></div>
<div class="menuBox">
<a href="">Home</a>
<a href="loginPage.html">Login</a>
<a href="">My page</a>
<a href="">About</a>
<a href="">Contact</a>
</div>
<div class="titleName">
<a href="index.html"><b>ILOHA</b></a>
</div>
<div class="menuBar">
<span><a href="loginPage.html"><b>Login</b></a></span>
<span><a href=""><b>My page</b></a></span>
</div>
</div>
그리고 수정하면서 알게 된 주요 포인트들!!
일단, 제일 부모 div인 topBar에서 position: relative로 하면 다른 자식 요소들이랑 관계된다. 이때 titleName과 같이 자식 중에 absolute가 있을 경우, 이것은 부모인 topBar를 기준으로 상대적인 위치를 갖게 된다.(다른 요소랑 영향받지 않음) 따라서 이렇게 하고 left, transform으로 정중앙에 오도록 설정할 수 있다.
.topBar{
position: relative;
display: flex;
justify-content: space-between; /*가로정렬: 자식 요소들끼리 최대한 멀리 배치*/
align-items: center; /*세로 정렬 (위아래 공간 똑같이)*/
height: 40px;
padding: 7px 30px;
background-color: rgb(75, 62, 87);
}
...
.topBar .titleName{
position: absolute; /*부모를 기준으로 상대적 위치, 정중앙 오게함*/
left: 50%;
transform: translateX(-50%); /*정확히 중앙에 오게 함*/
margin: auto;
color:white;
font-size: 30px;
}
그리고 중요한 menuBox!!
position: fixed, top, left로 그냥 화면 비율에 상관없이 고정시켜 준다. 가로크기가 250px이므로 기본 설정 left는 -250px로 하여 처음에는 안 보이도록 조정한다. 그리고 z-index... 이걸 해야 저번에 만든 슬라이드 배너보다 위로 올라와서 정상적으로 보인다...(안 했더니 메뉴 창보다 배너가 앞으로 튀어나왔음)
transition으로는 튀어나올 때() 효과를 줄 수 있다.
.topBar .menuBox{
position: fixed;
top: 0;
left: -250px;
width:250px;
height: 100%;
background-color: rgb(118, 83, 150);
padding-top: 50px;
transition: 0.5s;
z-index: 2;
opacity: 0.9;
}
이제 이걸 가지고 js에서 함수 만들기!!
먼저 html에서 menuBox 클래스를 가져와서 menu 변수에 저장한다.
그리고 여기서부터 중요... 처음에는 저 변수만 가지고 했다가, 메뉴 버튼을 두 번 클릭해야만 창이 뜨는... 상황이 발생하였다. 그래서 다시 찾아보니, 한 번에 뜨게 하려면 처음부터 window 상태를 알아야지 할 수 있다고 한다. 그래서 window의 컴퓨터 스타일을 가져와서 그것의 객체의 left변수를 currentLeft로 저장하고...
이 변수들을 가지고 메뉴 left의 스타일을 3단 조건문으로 정한다.(조건문 이름 까먹음)
현재 0px이 아닌 경우(숨겨진 상태)에만 0px로 변하게 한다.
//menu
function toggleMenu() {
const menu = document.querySelector('.menuBox');
const computeStyle = window.getComputedStyle(menu);
const currentLeft = computeStyle.getPropertyValue('left');
menu.style.left = (currentLeft === '0px' || currentLeft === '') ? '-250px' : '0px';
}
24.01.30(화)_20:46
결과물~!!
원래는 화면 빈 공간을 클릭할 시 다시 메뉴창이 사라지도록 하는,,, 그런 것도 만들려고 했으나 계속된 오류파티로 인해 얘도 일단 보류...
아무튼 여기까지 해서 로그인 페이지와 메뉴 창 만들기 완성~!!
그다음에는 마이 페이지 간단하게 만들거나 진짜 주요 기능? 인 여행 페이지를 만들어 봐야겠다
끝~!!!
'🌟Project > ILOHA - 여행 웹' 카테고리의 다른 글
| [토이프로젝트 개발일지 01] 구상, 메인 화면 만들기 (1) | 2024.01.28 |
|---|
