인스타그램을 클론 코딩으로 구현해 보려는 이유는 간단하다. 배우고 있는 언어로 무언가를 만들어 보고 싶었는데 그 중에서도 다양한 기능이 있고 구현해 볼 수 있는게 뭐가 있을까 생각해보니 나도 많이 사용하고, 다른 사람들도 많이 사용하는 것이 인스타그램이니 그냥 만들어보자!였다.
아직은 무에서 유를 창조해낼 실력이 아닌지라 현재 있는 것을 최대한 따라해서 만들어보자가 내 목표다.
<!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>
<header>
부분에 인스타그램 로고만 감싸주었다. <form>
태그 안에 <input>
으로 아이디와 비밀번호를 입력할 수 있는 창을 만들고, <button>
을 사용해서 로그인 버튼을 만들었는데 클릭하면 다른 페이지로 넘어가도록 <a>
태그를 사용했다.action
에는 아이디와 비밀번호가 넘어가기위해 백엔드를 연결해야 하는데
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
: 그 중에서 선택
//조건을 만족할 때만 클릭시 버튼색 변경
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;
를 지정해 경고창이 뜨면 넘어가지 않도록 설정했다.