인스타그램 클론코딩 Start
1. 로그인 페이지 구현 ! ( HTML, CSS )
HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/container.css">
<link href="img/instagram (1).png" rel="shortcut icon" type="image/x-icon">
<script src="https://kit.fontawesome.com/6478f529f2.js" crossorigin="anonymous"></script>
<title>Westagram</title>
</head>
<body>
<main class="container_main_login">
<div class="container_sub_login">
<span class="login_logo">westagram</span>
<form action="main.html" class="login_form">
<input type="text" class="login_id" placeholder="전화번호, 사용자 이름 또는 이메일" maxlength="20">
<input type="password" class="login_pw" placeholder="비밀번호" maxlength="20">
<input type="submit" class="login_form_submit" value="로그인" disabled>
</form>
<span class="pwd_help">비밀번호를 잊으셨나요?</span>
</div>
</main>
<footer class="login_footer">
<div class="login_footer_option1">
<div class="login_footer_option_btn">소개</div>
<div class="login_footer_option_btn">블로그</div>
<div class="login_footer_option_btn">채용 정보</div>
<div class="login_footer_option_btn">도움말</div>
<div class="login_footer_option_btn">API</div>
<div class="login_footer_option_btn">개인정보처리방침</div>
<div class="login_footer_option_btn">약관</div>
<div class="login_footer_option_btn">인기 계정</div>
<div class="login_footer_option_btn">해시태그</div>
<div class="login_footer_option_btn">위치</div>
</div>
<div class="login_footer_option2">
<span>한국어<i class="fas fa-angle-down"></i></span>
<span><i class="far fa-copyright"></i>2021 Instagram from Facebook</span>
</div>
</footer>
</body>
<script src="js/login.js"></script>
</html>Comment
로그인 창에 있는 로고와 아이디 비밀번호 로그인 버튼 까지만 구현을 시도했지만
너무 밋밋한거 같아 footer까지만 구현 완료 상태이다 😑
로고는 구글폰트를 사용하였고 아이디와 비밀번호 로그인 버튼을 form 태그 안에 넣어줬다
또한 title 왼쪽 로고에 아이콘을 처음 넣어주었다!
CSS 코드
.container_main_login {
width: 100%;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.container_sub_login {
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
width: 350px;
height: 380px;
border: 1px solid #dbdbdb;
box-sizing: border-box;
}
.login_form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* westagram 문구 */
.container_sub_login span:first-child {
font-family: "Lobster", cursive;
font-size: 42px;
margin: 22px 88px 0px;
width: 180px;
height: 55px;
}
/* 아이디 비밀번호 input 칸 */
.login_id {
width: 260px;
height: 35px;
margin: 24px 0px 5px;
padding-left: 8px;
background-color: #fafafa;
border: 1px solid #dbdbdb;
border-radius: 3px;
font-size: 13px;
}
.login_pw {
width: 260px;
height: 35px;
margin-bottom: 15px;
padding-left: 8px;
background-color: #fafafa;
border: 1px solid #dbdbdb;
border-radius: 3px;
}
.container_sub_login input:focus {
border: 1px solid #8a8a8a;
outline: none;
}
/* 로그인 버튼 form사용 */
.login_form_submit {
width: 260px;
height: 30px;
color: white;
font-weight: bold;
border-radius: 3px;
border: none;
}
.login_form_submit:disabled {
background-color: #b2dffc;
}
/* 비밀번호를 잊으셨나요 ? */
.pwd_help {
margin-top: 120px;
font-size: 12px;
color: #365899;
}
.pwd_help:hover {
cursor: pointer;
}
/* footer */
.login_footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 130px;
}
.login_footer_option1 {
display: flex;
flex-direction: row;
margin-bottom: 20px;
color: #8a8a8a;
font-size: 12px;
}
.login_footer_option2 {
color: #8a8a8a;
font-size: 12px;
}
.login_footer_option1 div {
margin-right: 15px;
}
.login_footer_option2 span {
margin-right: 5px;
}
.login_footer_option2 i:first-child {
margin-left: 5px;
}
.login_footer_option2 i:nth-child(1) {
margin-right: 5px;
}
Comment
.login_form_submit:disabled {
background-color: #b2dffc;
}라는 기능을 처음 사용하여 disabled일 때에 색상을 넣어 줬다.
- 아이디, 비밀번호 입력 시 로그인 버튼 활성화 ! (js)
JS 코드
const weId = document.querySelector(".login_id");
const wePwd = document.querySelector(".login_pw");
const weSubmit = document.querySelector(".login_form_submit");
function changeColor() {
if(weId.value && wePwd.value){
weSubmit.removeAttribute('disabled');
weSubmit.style.backgroundColor = '#0095f6';
}else{
weSubmit.setAttribute('disabled', 'true');
weSubmit.style.backgroundColor = '#B2DFFC';
}
}
weId.addEventListener("keyup", changeColor);
wePwd.addEventListener("keyup", changeColor);Comment
일단.. 문제가 있었다
if else문으로 disabled 속성을 주고 빼고는 됬는데 분명히 css파일에서 disabled 속성일때
색상을 넣어주는걸 넣었는데도 불구하고 따로 js에다가 색상을 넣어줘야만 바뀐다.. 이해가안됨😅
일단.. main페이지 들어가보자
Frontend Developer