Conversation
| @@ -24,12 +23,12 @@ <h1> | |||
| </h1> | |||
| <a href="/items" class="btn-go-looking element-click">구경하러 가기</a> | |||
| </div> | |||
| <img src="image/header_picture.png" alt="상단 그림"> | |||
| <img src="images/img/img_one_panda.png" alt="인사하는 판다 그림"> | |||
There was a problem hiding this comment.
images 폴더 안에서도 용도에 따라 폴더를 구분해 주신 것은 좋습니다. 그러나
images
ㄴimg
ㄴicon
의 구조는 다소 읽는 사람에게 혼란을 줄 수 있을 것 같습니다.
- images 하위에 또 img가 있음
- img는 폴더명임에도 축약어이고 복수형이 아님
- icon은 img와 다르게 풀네임이지만, 파일의 축약어 prefix 인 ic- 와는 다름. 복수형이 아님
제가 제안하는 네이밍은 다음과 같습니다.
assets (resources)
ㄴimages
ㄴimg_...
ㄴicons
ㄴic_...
- images와 icons를 포괄하는 상위 폴더를 assets로 네이밍
- 하위 폴더인 images, icons는 복수형으로 작성
- 폴더 내 파일의 prefix는 축약어인 img_, ic_ prefix로 작성
꼭 위와 같지 않더라도 나름의 통일성을 가진 규칙으로 작성해주시면 더 좋을 것 같습니다 🤗
| <a href="https://www.facebook.com" target="_blank"> | ||
| <img src="image/ic_facebook.png" alt="페이스북 아이콘"> | ||
| <img src="images/icon/ic_facebook.png" alt="페이스북 아이콘"> |
There was a problem hiding this comment.
icon의 경우 용량과 선명함을 위해 .svg 포맷을 사용하시면 더 좋을 것 같습니다.
각 방식의 장단점과 유스케이스는 참고 링크를 확인해 주세요 😃
| outline: none !important; | ||
| border: 1px solid var(--blue-color); |
There was a problem hiding this comment.
outline을 없애기 위해 !important를 사용하는 것은 지양하는 것이 좋습니다.
참고 링크에서 설명 되어있는 것처럼 CSS 우선순위에 방해가 되고 장기적으로는 !important가 남발되는 상황이 생길 수 있습니다.
There was a problem hiding this comment.
| outline: none !important; | |
| border: 1px solid var(--blue-color); | |
| outline: 1px solid var(--blue-color); |
그리고 border 보다는 outline 자체에서 효과를 주는 것을 추천드립니다. 현재는 border 크기인 1px 만큼 아래 요소가 밀려나는 현상이 발생하고 있습니다. 이렇게 레이아웃시프트가 발생하게 되면 다른 요소들이 재배치되면서 성능에 악영향을 줄 수 있어서요!
| </section> | ||
| </footer> | ||
| </body> | ||
| </html> |
There was a problem hiding this comment.
각 파일별 최하단에 오류 아이콘이 나오는 부분은 EOL(End of Line) 관련입니다. EOL의 경우 그 필요성에 대해 의견이 분분하므로 참고삼아 알아두시면 좋을 것 같습니다. 참고 링크
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| :root { | ||
| --light-blue-color: #E6F2FF; | ||
| --blue-color: #3692FF; | ||
| --gray900-color: #111827; | ||
| --gray800-color: #1F2937; | ||
| --gray700-color: #374151; | ||
| --gray600-color: #4B5563; | ||
| --gray500-color: #6B7280; | ||
| --gray400-color: #9CA3AF; | ||
| --gray200-color: #E5E7EB; | ||
| --gray100-color: #F3F4F6; | ||
| --gray50-color: #F9FAFB; | ||
|
|
||
| } | ||
|
|
||
| body { | ||
| margin: 0; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| } |
There was a problem hiding this comment.
3개의 style.css 파일에 중복되는 내용이 있는 것 같습니다. (root, login, signup 디렉토리)
대체로 css의 리셋 관련 내용이나 컬러파레트 내용인데요. 각각의 내용은 reset.css, common.css 같은 파일로 분리해서 적용해 주시면 좋을 것 같습니다.
이 경우 각 html 파일에서 스타일 시트를 3번 적용해야 하기에 코드가 늘어나게 되는데요. 장기적으로는 프로젝트의 유지보수를 편하게하고 더 확장성 있는 코드라고 할 수 있습니다.
| .guide-signup { | ||
| display: flex; | ||
| justify-content: center; | ||
| gap: 5px; |
There was a problem hiding this comment.
gap 속성을 활용해서 잘 처리해 주셨습니다. 👍
다만, 행 사이의 간격이므로 column-gap이 더 좋아보이네요!
There was a problem hiding this comment.
style.css라는 파일명이 반복되고 있습니다. .css 확장자가 스타일시트라는 것을 이미 나타내고 있으므로 어느 파일에 적용되는 스타일 시트인지 명시적으로 나타내면 가독성에 도움이 될 것 같습니다. login.css, signup.css 처럼요!
| } | ||
|
|
||
| input[type=password] { | ||
| background-image: url('/images/icon/ic_visible_off.png'); |
There was a problem hiding this comment.
비밀번호의 마스킹처리 여부를 나타내는 눈 아이콘을 배경으로 넣게 되면
스크린샷처럼 아이콘 영역과 입력창 영역이 겹치는 부분이 생기게 됩니다. 이러한 문제를 방지하기 위해 아이콘을 별도의 요소로 넣어주시면 좋을 것 같아요. 🤗
| </div> | ||
| </header> | ||
| <main> | ||
| <form> |
There was a problem hiding this comment.
form 태그를 이용해 정석적으로 잘 처리해 주셨습니다 👍👍
기본 요구사항
로그인 페이지, 회원가입 페이지 공통
로그인 페이지
회원가입 페이지
심화
주요 변경사항
스크린샷
https://pandamarket-leetj.netlify.app/
멘토에게