[🔖실습01] 로그인 페이지 만들기 연습 + click시 toggle

🔖 미해결 건

#221027

로그인 페이지 연습하기 그런데 등록 페이지로 넘어가지 않는다. 

 

See the Pen Untitled by Emma-Hyejin (@Emma-Hyejin) on CodePen.

 

 

▶ 해결 방법 : 

https://stackoverflow.com/questions/52384228/javascript-animate-toggle-for-3-forms

Javascript Animate Toggle for 3 forms

 

 추후 업데이터 적용 해볼 예정. 

 

 

 

 

🍋🍋🍋🍋🍋🍋🍋🍋🍋🍋

 

 

 

 

#230114

 

원본 처럼 toggle (jquery)이용 해서 스근하게 넘어가는 방식은 아니지만 click 해서 숨겨진 화면이 보이거나 안보이게 만드는데 고민 끝에 성공함.!!!!

 

→ 2차 시도

💡회고 

이번에 getElementsByClassName 은 getElemetByID와 달리 바로 CSS 속성에 접근이 안되어서 굉장히 고민하고 찾아보던 중에 

이 s 요녀석, (복수띠) 에 주의해야 한다는 글을 찾았다. className은 인덱스 값을 써야 한다는 주요한 사실 ! 

물론 [0] 선택하고 속성 적용하니 display 속성 none으로는 바뀌는데 다음 페이지가 나오지 않아서 계속 고민하고 있었다. 

 

🪄참고 사이트

: ClassName()으로 Element요소를 가져올 때 유의점

: JS 에서 스타일 접근하기

: JS - click 이벤트(onclick속성)

 

 

→ 3차 시도 : 성공!😂

See the Pen Untitled by Emma-Hyejin (@Emma-Hyejin) on CodePen.

 

 

💡회고

display 속성을 visible에서 block으로 적용하니 아주 알맞게 내가 원하는데로 바뀌었다. 휴... 

하지만 내가 최종적으로 만들어야 하는 건 원본 처럼 toggle로 slow하게 아래로 스무스하게 넘어가는 효과를 적용해야 하기 때문에 더 고민이 필요할 듯. jquery를 이용한 방법도 고민해 봐야 하고.. 

 

가장 큰 문제점이 지금 form class의 padding 에 맞추어 button 은 사이즈가 지정되었는데 왜 input 부분은 지 맘대로 저렇게 삐져나왔는지 원인을 알 수가 없다.. 이 부분도 다음 고민에 찾아봐야 할 것 같다. 

 

🪄참고 사이트

: JS display 속성 -block확인 블로그 ( JS에서 보였다 안 보였다 만들기 )