Skip to content

구현 과제 - 로그인/회원가입 모달 - 예빈#35

Open
yebinholmes wants to merge 1 commit intomainfrom
11-parkYeBin
Open

구현 과제 - 로그인/회원가입 모달 - 예빈#35
yebinholmes wants to merge 1 commit intomainfrom
11-parkYeBin

Conversation

@yebinholmes
Copy link
Copy Markdown

로그인 버튼, 소셜 미디어 구현 완료

Copy link
Copy Markdown
Collaborator

@merrybmc merrybmc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

안녕하세요 예빈님. 첫 pr에 성공하신걸 축하드려요 🎉🎉🎉

아직 프로젝트 상에서 미구현된 부분이 많은데 구현에 특별히 어려운 점이나 궁금한 점이 있으시면 코멘트로 남겨주세요. 도와드리겠습니다. 😊

Comment on lines +50 to +62
.login {
color: white;
font-family: 'SpoqaHanSansNeo-Regular';
font-size: 18px;
line-height: 22px;
font-weight: 700;
border: #2F80ED;
border-radius: 5px;
background: #2F80ED;
padding: 14px;
display: block;
width: 90%;
}
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

피그마의 요구사항대로 버튼을 다른 요소들과 위치가 맞게 중앙으로 정렬을 해주면 좋을 것 같습니다.

Comment on lines +21 to +24
<div class="join">
<a href="">회원가입</a>
<a href="">아이디/비밀번호 찾기</a>
</div>
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a태그끼리 줄바꿈이 일어나고 있습니다. join 클래스에 flex 속성을 주어 가로 정렬을 해주는게 좋을 것 같습니다.

Comment on lines +11 to +12
<header>
<h3>로그인 또는 회원가입</h3>
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

로그인 또는 회원가입은 시맨틱 태그를 고려하였을 때 h1 태그로 바꾸어 주는 것이 좋을 것 같습니다.

Comment on lines +17 to +20
<input>
<input>
<button class="login_state">로그인 상태 유지</button>
<button class="login">로그인</button>
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. input과 함께 관련된 button 태그들은 form 태그로 묶어주시는게 웹접근성의 시맨틱 태그나 js의 submit을 구현하는 것을 고려하여 좋습니다.

참고 해보시면 좋아요. :)
https://developer.mozilla.org/ko/docs/Web/HTML/Element/form

  1. 로그인 상태 유지와 체크박스의 경우 input 태그와 label 태그를 활용하여 구현해주시는 것이 좋습니다.

  2. 현재 로그인 버튼의 커서가 pointer로 먹히고 있지 않습니다. css 수정이 필요해 보입니다.

Comment on lines +21 to +24
<div class="join">
<a href="">회원가입</a>
<a href="">아이디/비밀번호 찾기</a>
</div>
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a태그 사이에 | 구분선이 빠져있습니다.
그리고 구분선을 추가하실 때 구분선까지 cursor가 pointer 되지않게 고려하여서 구현하시면 좋습니다.

@YennieJ
Copy link
Copy Markdown
Collaborator

YennieJ commented Aug 8, 2023

안녕하세요 예빈님:)

html 뼈대는 잘 잡으셨고, 좀 더 세부적으로 들어 갔을때
1.정보를 전달하는 부분은 button type submit까지 form태그로 감싸주기
2.input태그도 type을 지정해주시면 text,password,checkbox를 구현하기 좋아요!
3.같은 내용이 반복 된다면 ul,li 태그를 활용해 주셔도 좋습니다. ex)ul>li>a

css는 클래스로 지정해서 설정하는 것이 추후에 html에 추가 혹은 삭제 되어도
디자인에는 영향을 거의 미치지 않게 되니 클래스명을 생각하기 머리 아프지만 한번 도전해 보는것도 좋을 것 같습니다:)

어려운 점이나 궁금한 점이 있으시다면,
디스코드 주세요! 같이 공부해봐요:)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants