Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
수고 하셨습니다 ! 스프리트 미션 하시느라 정말 수고 많으셨어요. |
kiJu2
reviewed
Sep 23, 2024
| @@ -1,9 +1,9 @@ | |||
| @font-face { | |||
| font-family: "ROKAF sans"; | |||
| src: url(../../font/ROKAF\ Sans\ Bold.ttf); | |||
| font-family: "ROKAF-sans"; | |||
There was a problem hiding this comment.
굳굳 👍 띄어쓰기보다는 -로 이루어진 케밥케이스가 아무래도 편하죠.
띄어쓰기를 사용하면 \를 넣어야 되어서 불편하기도 하고 휴먼에러를 많이 발생시킬 수 있어요 ! 저도 이와같은 이유로 파일명이나 폴더명에는 띄어쓰기를 사용하지 않습니다. 😊
There was a problem hiding this comment.
일단 폰트부분은 건드리기 무서워 손대지 않고 제공(?)해준 대로 상요하고 있습니다. 파일명은 안바꾸고 CSS안에서만 이름 수정해도 되는 부분일까요?
Comment on lines
+86
to
+87
| .inputs:focus { | ||
| outline: 2px solid var(--blue-100); |
There was a problem hiding this comment.
상태 선택자를 넣었군요 !
좀 더 다채로운 UI가 되었을 것 같아요. 굳굳 👍
Comment on lines
+317
to
+324
| header { | ||
| padding: 0 16px; | ||
| } | ||
|
|
||
| header { | ||
| width: 100%; | ||
| gap: 126px; | ||
| } |
There was a problem hiding this comment.
혹시 두 개로 나눈 이유가 있으실까요?
Suggested change
| header { | |
| padding: 0 16px; | |
| } | |
| header { | |
| width: 100%; | |
| gap: 126px; | |
| } | |
| header { | |
| width: 100%; | |
| gap: 126px; | |
| padding: 0 16px; | |
| } |
Comment on lines
+129
to
+130
| margin: 100px 0; | ||
| /* reset css라는 것을 실행후 figma에서 보여지는 것과 다르게 article이 붙어 있어 임의로 수정하였습니다. */ |
| @@ -4,14 +4,15 @@ html { | |||
| } | |||
|
|
|||
| header { | |||
| position: fixed; | |||
| position:fixed; | |||
There was a problem hiding this comment.
코드 전반적으로 프리티어 적용한 것 같은데, 여기는 왜인지 적용이 안되어있네요 !
Suggested change
| position:fixed; | |
| position: fixed; |
There was a problem hiding this comment.
또한 ! sticky로 설정해두면 height만큼 상단에 공간을 차지하게 될 수 있습니다 !
Suggested change
| position:fixed; | |
| position: sticky; |
별도의 margin이나 padding 등의 height를 주지 않아도 되는 장점이 있습니다. 😊
kiJu2
approved these changes
Sep 23, 2024
| } | ||
|
|
||
| /* Mobile 스타일 (375px ~ 767px) 250%이상의 화면*/ | ||
| @media (max-width: 767px){ |
수고하셨습니다 종찬님 !꾸준히 과제를 제출하시고 항상 배우시려는 모습이 정말 보기 좋습니다. 🥺🥺🥺 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
요구사항
기본
브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
PC: 1200px 이상
Tablet: 768px 이상 ~ 1199px 이하
Mobile: 375px 이상 ~ 767px 이하
Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
X – 사진, 글씨 등의 크기가 변경되었습니다.
Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.
X – fiqma에서는 Fixed (343px)라는 표현이 있는데 이게 343px로 고정하라는 뜻이 아닌가요?
심화
나름 열심히 했는데 제대로 적용이 된건지도 잘 모르겠습니다.
주요 변경사항
스크린샷
멘토에게