20210318 first project #2

오늘 한 것

• feat#18 login 컴포넌트
• feat#29 login page css

 

 오늘은 간단히 meetup을 마치고 로그인 컴포넌트를 만들었다. 아직 백에서 데이터베이스 및 서버를 구성이 완료가 되지 않아 기능 추가는 내일 할 예정이다.  먼저 컴포넌트와 페이지 css를 시작하기로 했다. css를 하면서 정말 공부할 것이 많았다. 단순히 개념을 공부해도 적용하는데 어려움을 느껴서 새 레포 짓을 만들고 연습을 하면서 익숙해지는 시간을 가졌다.

 

 

가상 선택자 :focus, :valid를 처음 써봐서 생소했는데 focus는 email input에 커서를 올릴 시에 적용이 되고 :valid는 값을 적으며 유효한지에 대한 판단을 할 때 적용이 되는 것을 확인했다. email 유효성 검사와 login 요청, Oauth는 내일 할 예정이다.(css에 정말 많은 시간이 들었다.)

 

로그인 페이지 디자인을 했다. tts를 일러스트로 만들어서 flex-grow로 공간 차지 비율을 정해줬다. 반응형 디자인도 적용했다.

미디어 쿼리를 사용해 태블릿용 width 인 1025px을 max로 지정해 위의 두 섹션의 포지션을 바꾸어 오버랩되게 만들었다. github에서 제공한 pc, 태블릿, 모바일 기준에 따라 만들었지만 height를 생각하지 못해서 다시 수정해야 한다. 그래도 만들고 나니 깔끔해서 만족했다.