[김태일] Sprint2 #108
[김태일] Sprint2 #108
Conversation
GANGYIKIM
left a comment
GANGYIKIM
left a comment
There was a problem hiding this comment.
태일님 2번째 PR 제출 고생하셨습니다!
코멘트 반영은 필수가 아닌 선택이기 때문에 1번째 PR 에서 코멘트 드렸던 것들 중 미반영된 부분에 있어서는 다시 코멘트를 드리지 않으려고 합니다.
다만 중요한 부분에 있어서는 중복으로 코멘트를 드리고 있으니 참고 부탁드려요!
다음 PR 제출도 화이팅입니다!
-
git commit 단위를 나누시는 연습을 해보시면 좋을 것 같아요. index page css 추가, html 수정과 같은 식으로 작게 쪼개시면 시점을 돌리시기도 더 좋답니다.
-
화면 확대 축소 했을때 템플릿처럼 안되는데 어떻게 하는지 궁금합니다.: 템플릿 사이트를 말씀하시는 거라면 해당 사이트는 모든 요구사항이 다 구현된 버전으로, 반응형 작업까지 완료되어 있어서 그렇습니다~ 다음 회차에서 반응형 작업을 하실텐데 그 후에는 화면크기 변경시 템플릿 사이트처럼 동작할거에요!
There was a problem hiding this comment.
❗️ 수정요청
eye_icon.png 와 invisible_icon.png 의 이미지 크기가 달라서 비밀번호 토글을 누를때마다 덜컹거리는 느낌이 들거에요.
이를 css로 해결하실 수도 있지만 추천드리는 방법은, 두 이미지를 같은 사이즈로 추출하시는 겁니다.
디자인 상 invisible_icon가 더 클 수 밖에 없으니 eye_icon 이미지를 여백을 주어 동일한 크기로 추출하시는 것을 추천드려요!
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>판다마켓 - 로그인</title> |
There was a problem hiding this comment.
💊 제안
타이틀은 브라우저 탭에 표시되는 정보로 주로 어떤 사이트의 어떤 페이지에 머무르고 있는지를 표시합니다~
자세히 적어주신 것 좋아요 👍
| <a href="./index.html"><img src="./image/panda.png" alt="판다로고"></a> | ||
| <h1>판다마켓</h1> |
There was a problem hiding this comment.
❗️ 수정요청
"판다마켓"이라는 로고를 피그마에서 확인해보면 지금 사용하고 있는 pretenard가 아닌 ROKAF라는 폰트로 사용되고 있는 것을 확인할 수 있습니다~
이를 디자인과 동일하게 구현하는 것이 좋고, 폰트 파일은 일반적으로 이미지보다 파일 크기가 크니, 이미지를 추출하셔서 사용하시는 것을 추천드려요!
또한 유저는 로고를 클릭하면 루트 페이지로 간다고 예상하니 a 태그 안에 판다마켓도 넣어주세요~
| <a href="./index.html"><img src="./image/panda.png" alt="판다로고"></a> | |
| <h1>판다마켓</h1> | |
| <a href="./index.html"> | |
| <img src="./image/panda.png" alt="판다로고"> | |
| <img src="./image/panda-typo.png" alt="판다마켓"> | |
| </a> |
| <a href="./index.html"><img src="./image/panda.png" alt="판다로고"></a> | ||
| <h1>판다마켓</h1> | ||
| </div> | ||
| <div input-form> |
There was a problem hiding this comment.
❗️ 수정요청
오타이신 것 같아요~
| <div input-form> | |
| <div class="input-form"> |
| </div> | ||
| </div> | ||
| <button type="submit">로그인</button> | ||
| </form> |
There was a problem hiding this comment.
👍 칭찬
form 태그로 관련된 요소만 묶어 주신 것 좋습니다~
| <a href="https://www.google.co.kr/?hl=ko" target="blank"> | ||
| <img src="./image/google.png"> | ||
| </a> | ||
| <a href="https://www.kakaocorp.com/page/service/service/KakaoTalk?lang=ko" target="blank"> |
There was a problem hiding this comment.
❗️ 수정요청
a 태그의 target 속성에는 예약어가 들어가야합니다~
mdn에서 입력 가능한 예약어와 동작을 확인할 수 있습니다.
새창으로 열리게 하고 싶으시면 _blank로 해주셔야 합니다~
|
|
||
| </div> | ||
| <div class="footer"> | ||
| <h1>판다마켓이 처음이신가요?</h1> |
There was a problem hiding this comment.
❗️ 수정요청
h1 태그는 heading 1이라는 의미의 태그입니다. 이러한 h1~h6까지의 태그들은 시멘틱한 작성에 중요한 역할을 합니다.
그중 h1 태그는 제목에 해당하는 친구입니다.
목차나 영화를 생각해보시면 제목은 늘 1개입니다. 그래서 h1태그는 한 페이지에 한번만 사용하는 것이 좋습니다.
다만 이는 접근성을 위한 권고 사항일 뿐 필수사항은 아니지만 지키시는 것이 좋습니다.
There was a problem hiding this comment.
❗️ 수정요청
사용하지 않는 파일이라면 삭제하시는 것이 관리측면에서 더 좋습니다~
There was a problem hiding this comment.
💊 제안
로그인 페이지와 회원 가입 페이지가 디자인이 비슷한만큼 공통적으로 사용하는 css가 많아 보입니다.
이러한 중복을 줄이기 위해 공통 CSS 파일을 작성하시면 유지보수 및 가독성 측면에서 더 좋을 것 같습니다.
auth.css // login, sign-up 페이지에서 공통으로 쓰는 것들의 모음
sign-in.css
sign-up.css
만약 signin.css, signup.css 파일에서 작성되는 css가 너무 적다면,
즉 분리할 필요를 못 느끼신다면 auth.css 하나에서 전부 작성하셔도 좋을 것 같아요~
| cursor: pointer; | ||
|
|
||
| } | ||
| button{ |
There was a problem hiding this comment.
💊 제안
태그 선택자는 해당 태그가 모든 페이지에 걸쳐 적용되어야 하는 스타일링 외에는 사용을 추천드리지 않습니다~
위의 경우도 프로젝트가 확장되다보면 변경될 수 있으니 가능한 class를 사용하시는 것을 추천드릴께요~
예를 들어, 기존에는 모든 페이지에서 button 태그가 동일한 디자인이었지만 추후 추가된 페이지에서는 다른 디자인일 수 있습니다. 그래서 대부분의 경우 classname을 통해 개별로 css 해주시는 것을 추천드려요.
물론 지금 저희가 작업하는 환경의 경우 위와 같은 일은 없겠지만 클래스를 이용해 스타일링하시는 습관을 들이시는 것이 좋아 코멘트 남깁니다!
GANGYIKIM
merged commit 6004827
into
codeit-bootcamp-frontend:Basic-김태일
2 participants
요구사항
Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
Netlify에 파일 배포가 아닌 포크한 Github 레포지토리로 연결합니다.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
기본
심화
주요 변경사항
palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가해 주세요.
스크린샷
멘토에게
화면 확대 축소 했을때 템플릿처럼 안되는데 어떻게 하는지 궁금합니다.