Conversation
| height: 70px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| max-width: 1520px; |
There was a problem hiding this comment.
| max-width: 1520px; |
max-width 속성은 제외하시는 게 좋을 것 같습니다. width 속성을 덮어쓰면서 gnb의 너비를 제한해 넓은 모니터에서 gnb가 잘려 보일 것 같아요
| position: fixed; | ||
| z-index: 2; | ||
| padding: 0 200px; | ||
| } |
There was a problem hiding this comment.
gnb에 대해 background-color가 필요해 보입니다. 별도의 색상이 없어 스크롤를 내리다 보면 뒤에 있는 요소와 겹쳐 보이고 있어서요.
There was a problem hiding this comment.
position: fixed 설정 이후에
top:0, left:0 도 설정해 주시면 좋을 것 같습니다. 명시적으로 최상단에 고정함을 확실히하고 크로스 브라우징에도 유리해서요.
| ><a target="_blank" href="https://www.facebook.com"> | ||
| <img src="./src/img/common/ic_facebook.svg" alt="facebook logo" /> | ||
| <li> | ||
| <a target="_blank" rel="noopener noreferrer" href="https://www.facebook.com"> |
There was a problem hiding this comment.
마침 멘토링 때 소개할까 고민했는데 noopener, noreferrer을 넣어주셨네요. 👍👍
보안, 성능상 유리해서 별도 프레임워크 없이 작성할 때는 작성해주는 것이 좋은 것 같습니다.
| @@ -11,7 +11,7 @@ | |||
| <body> | |||
| <header> | |||
| <nav class="gnb"> | |||
| <a href="/" class="logo"><img src="./src/img/common/logo.png" alt="판다마켓" /></a> | |||
| <a href="/" class="logo"><img src="./src/img/common/logo_small.png" alt="판다마켓" /></a> | |||
There was a problem hiding this comment.
상대경로보다는 절대경로를 써주시면 좋을 것 같습니다.
프로젝트가 커지면서 리팩토링을 할 때 유리해서요.
| <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.
많은 웹사이트에서 어떤 사이트인지는 favicon으로 표현하고 개별 페이지에 대해서는 별도의 타이틀을 주고 있습니다.
단순히 판다마켓 보다는 로그인 또는 판다마켓: 로그인 처럼 써주시면 더 좋을 것 같습니다.
| <body> | ||
| <div class="logo"> | ||
| <a href="/"> | ||
| <img src="../src/img/common/logo.png" alt="판다마켓" width="396" /> |
There was a problem hiding this comment.
| <img src="../src/img/common/logo.png" alt="판다마켓" width="396" /> | |
| <img src="../src/img/common/logo.png" alt="판다마켓" /> |
img 태그에서 width를 주는 것보다 별도의 css로 너비를 조절하는 방식을 추천드립니다.
현재는 css 관련 살펴보아야 할 포인트가 두 군데입니다. 또한 개별 img 태그에 적용 된 width 값을 수정하려면 일일이 모든 html 파일을 찾아 값을 수정해야 합니다. 반면에 공통 css 파일로 속성을 관리하면 한 번의 수정으로 여러 군데에 있는 값을 수정할 수 있어서요!
| .input_wrapper { | ||
| position: relative; | ||
| } | ||
| input { |
There was a problem hiding this comment.
로그인과 회원가입에 쓰이는 input을 공통 css 요소로 잘 처리해 주셨습니다. 👍👍
이번 과제에서 가장 중요한 부분 중에 하나라고 볼 수 있을 것 같은데요. 다만 전체 input 보다는 별도의 클래스를 이용해 스타일링을 해주시는게 더 좋을 것 같습니다. input은 너무 흔하게 쓰이는 태그라 사이트가 커질 수록 다른 형태의 input로 필요해 질 것 같아서요!
요구사항
sprint1 수정
기본
로그인 페이지, 회원가입 페이지 공통
로그인 페이지
회원가입 페이지
메인 페이지
심화
주요 변경사항
스크린샷
멘토에게