Conversation
There was a problem hiding this comment.
영주님 첫번째 스프린트 미션 제출하시느라 고생하셨습니다.
열심히 만드시고 제출하신것만으로 충분합니다.
아래는 전반적으로 참고하시면 좋을 것 같은 내용들입니다~
- 동일한 내용에 대해서는 코드에서 한번만 코멘트를 답니다.
- PR 올리실 때 이번주차 요구사항중 어떤 것을 완료하셨는지 체크해주세요.
이를 참고해 과제 확인 및 코드리뷰를 진행합니다. - git commit 단위를 쪼개시면 좋을 것 같습니다.
적절한 commit 단위와 메세지를 통해 어떤 작업을 하셨는지 구분할 수 있고, 이를 고려하시면서 작업하셔야 git commit 시점으로 돌아갈때도 도움이 되실겁니다. - 스타일링을 적용처별로 구분하신 것이 좋았습니다.
- id, classname별로 다른 네이밍 컨벤션을 적용하시고 이를 지키신 것이 좋았습니다.
- css 작성시 일반적으로 classname을 이용합니다. id는 우선순위가 너무 높아 나중에 스타일을 덮어쓰기가 어렵고, id는 꼭 필요한 경우에 사용하는 것이 좋기에 가능한 classname만 사용하시길 권장드립니다.
- 추후 반응형 디자인을 고려해 image 태그의 width 보다는 css 를 통해 스타일링하시기를 권장드립니다.
| /> | ||
| <div class="feature-content"> | ||
| <h2 class="feature-tag">Hot item</h2> | ||
| <h1>인기 상품을<br />확인해 보세요</h1> |
There was a problem hiding this comment.
P2:
한 페이지안에서 h1, h2 태그는 여러개 쓰지 않는 것을 추천드립니다.
h1, h2 태그는 각각 하나씩만을 사용하시고 h3부터 사용하시면 좋을 것 같습니다.
| </div> | ||
| <div class="feature"> | ||
| <img | ||
| src="igmes/home/feature3-imge.png" |
There was a problem hiding this comment.
P2:
| src="igmes/home/feature3-imge.png" | |
| src="images/home/feature3-image.png" |
There was a problem hiding this comment.
P2:
스타일링을 global -> 홈페이지 전반에 걸쳐 적용되는 것들과 layout_이름.css 여기서는 home.css 로 화면별 스타일링으로 구분해주신 것 같습니다.
다만 global css 에서 브라우저 별 tag 스타일링을 초기화하기 위한 코드와 반복되는 스타일을 위해 영주님께서 추가하신 코드가 혼재되어 있는 것 같습니다.
이를 해당 파일내에서 분리하시거나 파일을 분리하시는 것을 추천드립니다.
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| a{ | ||
| text-decoration: none; | ||
| color: inherit; | ||
| } | ||
|
|
||
| button { | ||
| background: none; | ||
| border: none; | ||
| outline: none; | ||
| box-sizing: none; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| img { | ||
| vertical-align: bottom; | ||
| } |
There was a problem hiding this comment.
P2:
이러한 것들이 위에서 언급드린 브라우저에서 자체 적용되는 스타일 초기화를 위한 코드입니다.
reset.css 라는 파일로 분리해서 많이 작성합니다.
| align-items: center; | ||
| padding: 0 200px; | ||
| background-color: #ffffff; | ||
| border-bottom: 1px solid; |
There was a problem hiding this comment.
P2:
디자인상에서는 회색 보더라인이니 아래와 같이 색상코드를 기제해주세요.
| border-bottom: 1px solid; | |
| border-bottom: 1px solid #DFDFDF; |
| .feature { | ||
| padding: 138px 0; | ||
| display: flex; | ||
| align-items: center; | ||
| } |
There was a problem hiding this comment.
P2:
| .feature { | |
| padding: 138px 0; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .feature { | |
| padding: 138px 0; | |
| display: flex; | |
| align-items: center; | |
| gap: 64px; | |
| } |
| font-size: 24px; | ||
| font-weight: 500; | ||
| line-height: 120%; | ||
| letter-spacing: 0.08em; |
There was a problem hiding this comment.
P2:
| letter-spacing: 0.08em; |
요구사항
기본
[x] 랜딩 페이지의 url path는 루트(‘/’)로 설정합니다.
[x] title은 “판다마켓”로 설정합니다.
[x] 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.
[x] 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.
[x] 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다.
-[x] “판다마켓” 클릭 시 루트 페이지(‘/’)로 이동합니다.
[x] '로그인'버튼 클릭 시 로그인 페이지(‘/login’)로 이동합니다 (빈 페이지)
[x] “구경하러가기”버튼 클릭 시(’/items’)로 이동합니다.(빈 페이지)
[x] “Privacy Policy”, “FAQ”는 클릭 시 각각 Privacy 페이지(‘/privacy’), FAQ 페이지(‘/faq’)로 이동합니다.(모두 빈 페이지)
[x] 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.
심화
[x] palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
[x ] 사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.(설정값은 자유입니다)
홈페이지
-https://storied-torte-70f434.netlify.app/
멘토에게
-열심히 만들었지만 완벽하게는 못 만들었습니다 죄송합니다...