인스타 UI 클론 팀 프로젝트 2일차
오늘은 인스타 UI 클론 코딩 2일차이다! 오늘은 내가 만든 로그인 페이지에 대한 전체적인 디자인
그리고 기본 기능들을 거의다 구현을 했다! 오늘안에 기본기능을 끝내고 내일부터는 API로 넘어가는 것이 목표였는데 그래도
어느정도 목표를 이뤄서 좋은것 같다
boxslider
저번 개인 프로젝트에서는 부트스트랩을 이용했지만 이번에는 박스 슬라이더를 이용했다 생각보다 간편했고, 직접 css를 수정하고
찾아는 법을 찾아 그래도 무난하게 작업을 했던 것 같다. 인스타의 거의 비슷하게 구현한 것 같아서 다행이다.
$(document).ready(function() {
$('.bxslider').bxSlider({
controls: false,
speed: 2000,
auto: true,
pager: false,
mode: 'fade',
pause: 3000,
});
}); <ul class="bxslider">
<li><img src="../static/login_img/phone_img1.png"/></li>
<li><img src="../static/login_img/phone_img2.png"/></li>
<li><img src="../static/login_img/phone_img3.png"/></li>
<li><img src="../static/login_img/phone_img4.png"/></li>
</ul>👉 간단하게 ul class 에 bxslider 를 주고 li 에 각 이미지를 넣어주면 간단하게 구성 할 수 있다.
슬라이더의 위치는 div 박스를 이용해서 조정해 주었다.
로그인,PW 입력시 span태그 이동, 비밀번호 표시
const login_input = document.querySelector(".login_input");
const login_input_text = document.querySelector(".login_input_text");
login_input.addEventListener('keydown', (event) => {
login_input_text.style.fontSize = "5px";
login_input_text.style.lineHeight = "1px";
login_input.style.padding ="7px 0 1px 4px";keydown 이벤트를 이용해 js 문법으로 작성하였다. 간단하게 querySelector 으로 값을 가져오고
keydown 이벤트를 추가했을때 style 을 추가 해 주었다. 인스타처럼 똑같이 하고 싶어서 여러 고민을 했었는데 인스타는
텍스트가 입력되면 텍스트 커서가 밑으로 내려간다. 그부분이 조금 어려웠는데 민기님이 dvi 안에 input 을 넣고 padding 값을 조정하면 될 것 이라고 해서 div로 테두리를 만들고 안에 input 을 넣고 값을 지정해줘서 완성을 했다.
나머지는 부분은 중복되는 것 같아 생략 하기로 한다.
- 텍스트가 입력되면 비밀번호 표시기능,
login_hide_pwd.addEventListener('click', (event) => {
$('.login_input2').prop("type","text");
login_hide_pwd.addEventListener('click', (event) => {
$('.login_input2').prop("type", "password");
})
})텍스트가 입력되면 type 이 password 여서 *** 이런 식으로 비밀번호가 표시된다. 클릭 이벤트를 통해
type을 text로 바꿔주면 간단하게 할 수 있는 기능이다.
오늘 좀 애먹었던 버튼 활성화 기능
이상하게 나는 disabled 가 input 에서 작동을 하지 않는다 그래서 어쩔수 없이 opacity 값을 이용해서
버튼 활성화를 구현하였다 . 우선 코드는 이러하다
let idValue = login_input.value;
let pwValue = login_input2.value;
if(
(idValue && pwValue) &&
(pwValue.length >= 5) &&
(idValue.length >= 1)
) {
login_btn.style.opacity = 1;
}
else {
login_btn.style.opacity = .3;
}제어문을 통해서 구현하였다. length 를 이용해서 비밀번호가 6자리를 입력해서 활성화가 되도록 구현하였다. 이 기능에서 많은 문법도 찾아보고 많은 시도를 했지만 역시 직접 머리를 써가면서 하는게 제일 잘 되는 것 같다.
- 오늘은 어제보다 컨디션이 좋아졌다. 내일은 휴일이니 놀지말고 아침에 적당할 때 일어나서 운동하고 밥먹고 코딩하자!
- 내일부터 API를 시작할 예정이다. 이제 백엔드 작업을 슬슬 시작할 예정인데, 프론트에서도 애를 많이 먹었지만 하면 할수록 실력이 느는게 보였다. 백엔드도 어려워 하지 말고 조급하지 않게 천천히 다가가자.
