[figma 실습] 로그인 페이지 만들기

글라스 느낌의 로그인 페이지 만들기

디자인하면서 고려한 부분

- 이메일 및 패스워드 유효성 검사 시 오류가 날 경우 문구 생성

- 문구가 생성되면서 늘어나는 container 크기는 어떻게 처리할지?

- 이메일 및 패스워드 작성 시 해당 내용 전체 삭제 버튼 만들기

---

로그인 페이지 메인화면

로그인 페이지 - default

---

input에 focus 이벤트 발생 시

- input : border 색상 변경(#FF6E84)

- icon : color 변경(#FF6E84)

- text color : #444444

input에 onkeypress() 이벤트 발생 시

- input의 value 값을 전체 삭제해 주는 'x' 버튼 'display : block';

- input의 value 값이 전체 삭제될 경우 'x' 버튼 'display : none';

로그인 페이지 - focus

---

유효성 검사 시 오류 문구 나타내기

- login__container를 고정요소로 설정하여 오류 문구가 나타나도 크기에 구애받지 않도록 설정

로그인 페이지 - error message