[백승렬] Week4 #72
Closed
[백승렬] Week4 #72
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2주차 위클리 미션으로서 웹사이트 기본 2개 창들을 구현했습니다
10팀 백승렬 2주차 위클리 미션 완성본(랜딩페이지, 로그인, 회원가입 페이지 디자인 완성)
- 3주차 위클리 미션 기본 요구사항 반영
- 일부 이미지를 png에서 svg로 교체
- landing-pc.css 의 파일이름을 index.css로 수정
- 페이지 사이즈에 대해 tablet으로 볼 때와 mobile로 보는 것에 대해 지원
모바일 사이즈의 정의(767px로 해야 함)를 잘못 설정하여 생긴 오류 수
- global.css 작성 - 모든 페이지에서 쓰이는 설정 모음 - global.css에 작성된 설정은 나머지 각각의 css에서 제거
<html> -> <html lang="ko"> - index.html, login.html, signup.html 에 추가
- button 태그에서 a 태그로 변경 - button태그, a태그에 대해 cursor: pointer; 일괄 적용 (global.css에 작성) & 각 파일의 관련 내용 삭제
-공유 시 관련 이미지 보이게 됨
이미지 경로에 오류가 있어 수정함
메타태그 이미지 변경 및 경로 수정
- css클래스 이름 변경 (BEM 적용) - login-signup.css -> auth.css로 파일이름 변경
- mobile 사이즈에서만 랜딩 페이지의 제품 소개 영역의 배치 순서가 제목, 이미지, 설명으로 바뀌게 됨
-reset.css 추가 및 일괄 적용
메타태그 이미지 경로 수정(절대 경로로 함)
- 잘못된 입력에 대해 에러메시지와 함께 입력 필드 테두리 빨갛게 변함 - 이메일: test@codeit.com, 비밀번호: codeit101 으로 로그인 시도할 경우, “/folder” 페이지로 이동
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
요구사항
기본
이메일 input에서 focus out 할 때, 값이 없을 경우 아래에 “이메일을 입력해 주세요.” 에러 메세지를 보입니다.
이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 아래에 “올바른 이메일 주소가 아닙니다.” 에러 메세지를 보입니다.
이메일: test@codeit.com, 비밀번호: codeit101 으로 로그인 시도할 경우, “/folder” 페이지로 이동합니다.
비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해 주세요.” 에러 메세지를 보입니다.
이외의 로그인 시도의 경우, 이메일 input 아래에 “이메일을 확인해 주세요.”, 비밀번호 input 아래에 “비밀번호를 확인해 주세요.” 에러 메세지를 보입니다.
input에 에러와 관련된 디자인은 좌측 상단의 Components 영역에 있는 디자인을 참고해 주세요.
로그인 버튼 클릭 또는 Enter키 입력으로 로그인 실행돼야 합니다
심화
눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 합니다.
비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이도록 합니다.
주요 변경사항
스크린샷
https://main--seungryeolbaek-sprint-weekly.netlify.app/
멘토에게