Conversation
|
로그인 버튼에 폰트 색상이 검은색으로 되어 있어서 피그마와 같은 색상으로 수정이 필요해 보입니다! |
| </div> | ||
| <button type="button" class="btn-login">로그인</button> | ||
| </form> | ||
| <strong class="join">회원가입<span class="bar">|</span> 아이디/비밀번호 찾기</strong> |
There was a problem hiding this comment.
회원가입, 아이디/비밀번호 찾기 부분은 a나 button 태그를 이용해서 cursor: pointer; 로 표현해 보시면 더 좋을 것 같아요! 😃
|
안녕하세요 예슬님!! |
| } | ||
|
|
||
| .section1 h3 { | ||
| font-family: 'SpoqaHanSansNeo-Regular'; |
There was a problem hiding this comment.
전체 페이지의 글씨체가 동일하기 때문에, body 태그에 font-family를 주셔도 좋을 것 같아요!
|
예슬님 고생하셨습니다 :) |
| .box { | ||
| display: flex; | ||
| flex-direction: column; | ||
| width: 520px; | ||
| margin: auto; | ||
| background-color: #FFFFFF; | ||
| border-radius: 10px; | ||
| justify-content: center; | ||
|
|
||
| } |
There was a problem hiding this comment.
border를 추가하시는 걸 추천드려요!
그리고 x축 뿐만아니라 y축도 화면 정중앙에 오도록 도전해봐요 :)
마지막으로 궁금한 점은
이 태그에 display:flex가 필요한 이유가 무엇일까요?
There was a problem hiding this comment.
예진님 자세한 리뷰 너무 감사해요ㅜㅜ 정말 많은 도움이 되고 공부가 된거같아요! 꼭 수정하겠습니다! 감사해요!!
| margin-left: 24px; | ||
| margin-top: 26px; | ||
| margin-bottom: 24px; |
There was a problem hiding this comment.
margin: 26px 0 24px 24px;
마진을 한번에 작성할 수 있는 방법도 있어요!
| .form { | ||
| width: 472px; | ||
| margin: 0 24px; | ||
|
|
||
| } |
There was a problem hiding this comment.
추후 반응형을 위해서 width를 px로 고정 시키는 것은 지양하는 것이 좋다고 합니다!
여기서 width를 따로 지정하지 않아도 잘 동작 하네요!
margin: 0 24px; 을 지정해놨기 때문인거같아요!
| .btn-login { | ||
| width: 100%; | ||
| height: 50px; | ||
| margin: 20px auto; | ||
| border-radius: 5px; | ||
| background: #2F80ED; |
There was a problem hiding this comment.
color, font-size , font-weight 피그마와 비교해보기
| background-color: #C4C4C4; | ||
| display: block; | ||
| position: absolute; | ||
| vertical-align: middle; |
There was a problem hiding this comment.
display로 인해 속성이 무시됩니다. 'display: block'에서 vertical-align을 사용할 수 없습니다.
사용하지 않으셔도 될꺼같아요!:)
| [class^="icon"] p { | ||
| margin: 0 auto; | ||
| } |
There was a problem hiding this comment.
[class^="icon"] 에서 이미 flex를 사용하고 있기 때문에
justify-content: center; 를 주는 방법도 좋을꺼 같습니다!
6 participants
로그인/회원가입 첫 번째 레이아웃을 구현하였습니다.
#To do