Instagram 페이지 copy 하기
1. 로그인 페이지 구현
HTML,CSS,JavaScript 를 이용하여
위와 같은 로그인 페이지를 만드는 것이다.
HTML 코드는 다음과 같다.
<button id="login" onclick="alert('로그인성공')" >
로그인
</button>
</div>
<div class="bottom">
<p class="passwordtext">비밀번호를 잊으셨나요? </p>
</div>
</div>CSS 코드는 다음과 같다.
body {
margin: 0 auto;
background: #fafafa;
}
.wrapper {
max-width: 350px;
height: 380px;
border: 1px solid #e6e6e6;
background: #fff;
margin: 60px auto;
}
img {
max-width: 175px;
height: 51px;
display: block;
white-space: nowrap;
text-indent: 110%;
margin: 22px auto 12px;
}
.phone,
.password {
margin-bottom: 5px;
display: block;
color: rgba(var(—i1d, 38, 38, 38), 1);
line-height: 18px;
background: #fafafa;
margin: 0;
font-size: 14px;
border: 1px solid #fafafa;
border-radius: 3px;
padding: 9px 0 7px 8px;
width: 250px;
height: 20px;
}
box1,
box2 {
margin: 0 auto 4px auto;
width: 266px;
height: 36px;
border: 1px solid #efefef;
border-radius: 3px;
padding-bottom: 3px;
}
login {
font-weight: bold;
display: block;
margin: 0 auto;
margin-top: 5px;
background-color: #c3dffa;
color: #ffffff;
border: 1px solid #efefef;
border-radius: 3px;
width: 268px;
height: 30px;
}
input {
margin: 0 auto;
line-height: 18px;
font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, ‘Open Sans’, ‘Helvetica Neue’, sans-serif
}
.passwordtext {
text-align: center;
font-size: 12px;
line-height: 14px;
margin-top: 140px;
color: #003569;
}
button {
margin: 0 auto;
line-height: 18px;
font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, ‘Open Sans’, ‘Helvetica Neue’, sans-serif
}
코드들이 정리가 안되고 반복되는 것이 많아 좋은 코드라 할 수가 없다… 만들당시에는 정신없이 쌓아가고 있었기 때문이다…
그 다음 제일 중요한 js 코드이다.
JavaScript 코드
const id = document.getElementsByClassName('phone')[0];
const password = document.getElementsByClassName('password')[0];
const loginButton = document.getElementById('login');
loginButton.disabled = true;
id.addEventListener(‘keydown’, function () {
loginButton.disabled = true;
})
password.addEventListener(‘keydown’, function(){
if(id.value ==”){
loginButton.disabled = true;
}else if(id.value || password.value){
loginButton.disabled= false;
loginButton.style.backgroundColor= “#3897f0”;
}else{
loginButton.disabled=true;
}
})
Javascript 의 내용을 보면 ID와 비밀번호에 입력값이 있어야 로그인 버튼이 활성화되고(클릭할수있고) 색이 변한다는 것이다.
4번째 줄부터 해석을 하면
loginButton.disabled = true;
- 로그인버튼의 비활성은 true , 즉 비활성화가 맞는 상태란 것이다.
id.addEventListener(‘keydown’, function () {
loginButton.disabled = true;
})
- 아이디입력칸에 keydown 이벤트가 발생하게 되면 함수가 실행된다. 그 함수의 내용에는 여전히 비활성이 true 라는 것.
password.addEventListener('keydown', function(){
if(id.value ==''){
loginButton.disabled = true;
}else if(id.value || password.value){
loginButton.disabled= false;
loginButton.style.backgroundColor= "#3897f0";
}else{
loginButton.disabled=true;
}
})
- 패스워드 입력칸에 keydown 이벤트가 발생하면 함수가 실행되는데,
if(id.value ==”){
loginButton.disabled = true;
그 함수에는 만약 id값이 비어 있다면 여전히 로그인 버튼은 비활성이고,
else if(id.value || password.value){
loginButton.disabled= false;
loginButton.style.backgroundColor= "#3897f0";
}else{
loginButton.disabled=true;
}
})
그렇지 않고 id의 value 값, 즉 아이디가 입력되거나 혹은 password의 value값이 있으면 로그인 버튼 비활성화는 false가 되어, 활성이 된다! 그리고, 로그인버튼의 배경색은 #3897f0 으로 변경되고!! if의 조건이 충족되지 않으면 활성이 일어나지 않는다!
그 결과 위와 같은 이미지가 완성 되었고, Javascript도 구현이 되었는데 어떻게 이곳에 올리는지는 모르겠다 … ㅠㅠ
이렇게 Instagram 로그인 페이지 구현은 완료되었다…