Conversation
There was a problem hiding this comment.
벡터 이미지로 나타낼 수 있는 이미지는 SVG 확장자로 export 하시는걸 추천드립니다. :)
(아이콘, 서비스 로고 등)
| </a> | ||
| <a class="login-button" href="login.html">로그인</a> | ||
| </header> | ||
| <!-- 상단 배너 --> |
There was a problem hiding this comment.
페이지 내 주요 콘텐츠 요소들을 <main/> 태그로 묶어주시면 더 좋을 것 같습니다!
| <img src="assets/ic_facebook.png" alt="페이스북 바로가기"> | ||
| <img src="assets/ic_twitter.png" alt="트위터 바로가기"> | ||
| <img src="assets/ic_youtube.png" alt="유튜브 바로가기"> | ||
| <img src="assets/ic_instagram.png" alt="인스타그램 바로가기"> |
There was a problem hiding this comment.
유의미한 대체 텍스트 잘 적용하셨습니다. 👍
푸터 내 SNS 아이콘은 클릭 시 해당 서비스로 이동하도록 되어 있는 것으로 알고 있는데, <a/> 태그 적용해야 하는지 한 번 확인해 주세요~
| <p class="card-header">Register</p> | ||
| <p class="card-title">판매를 원하는<br>상품을 등록하세요</p> | ||
| <p class="card-explain">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p> |
There was a problem hiding this comment.
각 섹션의 헤딩 요소는 <h1/> - <h6/> 요소를 나타내시면 더 좋을 것 같습니다!
| <form class="fields"> | ||
| <div class="field"> | ||
| <label for="email">이메일</label> | ||
| <input id="email" name="email" type="email" placeholder="이메일을 입력해주세요"> |
There was a problem hiding this comment.
폼 요소에 <form/> 태그 사용하시고, 각 필드에 id와 for 속성을 올바르게 지정하셨네요. 잘 하셨습니다! 👍
| <input id="password" name="password"type="password" placeholder="비밀번호를 입력해주세요"> | ||
| <img class="visibility-icon" src="assets/btn_visibility_off_24px.png"> | ||
| </div> | ||
| <button>로그인</button> |
There was a problem hiding this comment.
<form/> 태그 내에 여러 버튼을 사용할 수 있는데요. type='submit' 또는 별도로 지정하지 않은 버튼은 양식 제출 버튼으로 사용됩니다. 나중에 참고하시면 좋을 것 같네요~!!
| * { | ||
| box-sizing: border-box; | ||
| } |
There was a problem hiding this comment.
요소의 스타일을 초기화하는 CSS 파일은 reset 파일을 별도로 생성하셔서 사용하셔도 좋을 것 같습니다.
그리고 Reset CSS 또는 Normalize CSS 사용도 검토해 주세요~!
| .header { | ||
| position: fixed; | ||
| top: 0; | ||
| z-index: 1; |
There was a problem hiding this comment.
서비스 규모가 커지게 되면 z-index를 사용하는 곳이 많아지게 되는데요.
실제 서비스 중인 기업의 디자인 시스템에서 z-index 디자인 토큰을 어떻게 관리하고 있는지 한 번 보시면 좋을 것 같아 참고 차 공유드립니다.
| .main-content>section { | ||
| height: 720px; | ||
| background-color: #ffffff; | ||
|
|
||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .main-content>section.odd { |
| .card.odd { | ||
| flex-direction: row; | ||
| } | ||
|
|
||
| .card.even { | ||
| flex-direction: row-reverse; | ||
| } |
There was a problem hiding this comment.
odd, even으로 처리하신 방식 좋네요. 👍
nth-child 선택자도 사용 가능하니 참고해 주세요~ :)
| background-color: #F3F4F6; | ||
| border-width: 0px; | ||
|
|
||
| font-family: Pretendard, sans-serif; |
There was a problem hiding this comment.
font-family는 inherited property에 해당합니다. (inherit 명시 없이도 상위 요소의 값을 상속해 사용할 수 있습니다.)
body에 글꼴을 설정해주셔서 별도로 작성하실 필요 없습니다~!
CSS가 Cascading Style Sheets의 약자임을 기억해 주세요. :)
|
고생 많으셨습니다. 반응형 확인 + 스타일 정상 적용 확인을 위해 배포한 도메인도 함께 공유해주시면 좋을 것 같습니다~!! |
|
이전에 생성한 PR에 문제가 있어 새로 생성해주셨다고 합니다. 참고 부탁드립니다~ |
요구사항
기본(sprint1 부분)
(* 빈페이지는 title에 이름을 적어 페이지 이동만 확인할수있게 해두었습니다.)
기본(sprint2 부분)
심화
주요 변경사항
스크린샷
멘토에게