[이지현] Sprint3 #93
[이지현] Sprint3 #93
Conversation
…, KakaoBg.png -> Kakao.png)
- body에 정의하고 나머지는 inherit 적용
조정, 로고 위치및 사이즈 조정(login페이지, signup 페이지)
GANGYIKIM
left a comment
GANGYIKIM
left a comment
There was a problem hiding this comment.
지현님 3번째 PR 제출 수고하셨습니다!
리팩토링 하시면서 작업하시는 것 같은데 좋은 방식입니다~
요구사항이 매회차마다 추가되고 구조가 변경되니 그때 상황에 맞는 방식과 구조를 고민해보는 것이 스프린트 미션의 재미라고 생각해요~
앞으로도 화이팅입니다!
-
파비콘이 추가되면 좋을 것 같아요!
-
쪼개서 commit 하는 것 너무 좋은 습관이에요 👍
-
Mobile과 Tablet에서 UI가 어떻게 달라야 할지에 대한 명확한 기준이 있을까요?:
피그마 디자인을 보시고 작업하시면 해당 분기에서 UI가 변하는 것을 구현하시면 됩니다~ 어떤 면에서 이러한 의문이 드셨는지 알려주시면 더 적절하게 답변이 가능할 것 같아요. -
반응형 디자인을 구현하는 코드가 점점 복잡해지는 경우, 어떻게 코드의 재사용성을 높이고 유지보수를 쉽게 할 수 있을까요?:
여러가지 방법이 있을 수 있습니다. 우선 PC를 작업할 때, 최대한 반응형 작업을 고려하며 layout과 html을 작성합니다. 특정 부모요소에만 고정값을 주고 자식요소들은 최대한 반응형 단위를 사용하여 추후 반응형 css 작성시 미디어 쿼리문 안에서 작성할 코드를 줄입니다. 혹은 재사용되는 속성들을 따로 빼서 반복작성을 줄일 수 있습니다! 다만 이는 경험이 필요한 일이니 지현님이 작업하시면서 아쉬운 부분들을 스스로 고쳐보시다보면 자연스럽게 해결하실 수 있으거라고 생각합니다. 우선 본인 코드를 보시면서 왜 "점점 복잡해진다"고 생각하셨는지 어떤 코드가 문제인지 아니면 구조가 문제인지 고민해보시고 이를 개선해보는 쪽으로 시도해보세요!
There was a problem hiding this comment.
💊 제안
이미지는 여백 없이 관리하시는 것이 디자인 구현할때 더 편리합니다.
이미지 자체가 여백을 가지고 있으면 헷갈릴 수 있으니 여백없이 추출하시는 것을 추천드려요!
| /* #pwd { | ||
| padding: 16px 24px 16px; | ||
| } */ | ||
|
|
There was a problem hiding this comment.
💊 제안
작성하셨다가 테스트를 하시려고 주석처리하신 것 같아요~
주석이 남아있으면 눈길이 가니 불필요한 코드라면 삭제하시는 것을 추천드려요!
|
|
||
| } | ||
|
|
||
| @media (max-width: 767px) and (min-width: 375px) { |
There was a problem hiding this comment.
💊 제안
min-width가 조건에 걸려있어 375px 미만으로 화면이 작아지게 되면 PC 스타일이 적용되네요~
body에 min-width: 375px를 추가하셔서 해당 사이즈 미만으로 작아지게 되면 가로 스크롤이 생기게 해주시거나
아니라면 min-width를 조건문에서 빼주시는 것을 추천드려요~
|
|
||
|
|
There was a problem hiding this comment.
❗️ 수정요청
불필요한 줄바꿈은 없는 것이 가독성에 더 좋습니다~
| margin: 0 auto; | ||
| } | ||
|
|
||
| input { |
There was a problem hiding this comment.
💊 제안
태그 선택자는 해당 태그가 모든 페이지에 걸쳐 적용되어야 하는 스타일링 외에는 사용을 추천드리지 않습니다~
위의 경우도 프로젝트가 확장되다보면 변경될 수 있으니 가능한 class를 사용하시는 것을 추천드릴께요~
예를 들어, 1월에는 auth.css를 사용하는 페이지가 로그인, 회원가입만 존재하고 해당 페이지의 input 요소가 width 속성 100%를 가지고 있어 이렇게 작업을 했지만 2월에 비밀번호 찾기라는 auth 관련 새 페이지가 추가될 수 있습니다. 해당 페이지는 다른 페이지들처럼 디자인은 거의 비슷하지만 사용되는 input 요소의 width 속성이 90% 일 수 있습니다. 따라서 이렇게 디자인에 따라 다양하게 적용될 수 있는 스타일의 경우 classname을 통해 개별로 css 해주시는 것을 추천드려요.
물론 지금 저희가 작업하는 환경의 경우 위와 같은 일은 없겠지만 클래스를 이용한 스타일링을 하시는 습관을 들이시는 것이 좋습니다~
| <meta property="og:url" content="https://pandamarket-leejihyun.netlify.app/"> | ||
| <meta property="og:title" content="판다마켓 - 이지현"> | ||
| <meta property="og:type" content="website"> | ||
| <meta property="og:image" content="/assets/images/img_home_01.png"> | ||
| <meta property="og:description" content="일상의 모든 물건을 거래해보세요"> |
There was a problem hiding this comment.
❗️ 수정요청
이러한 메타태그가 제대로 되어 있는지 확인할 수 있는 방법이 여러가지 있습니다~
확인해보시고 요구 사항에 따라 다른 SNS도 커버할 수 있게 meta 태그를 수정해보세요~
| <label for="email">이메일</label> | ||
| <input type="email" name="email" placeholder="이메일을 입력해주세요"> |
There was a problem hiding this comment.
👍 칭찬
label과 Input을 연결해주신 점 좋습니다~
There was a problem hiding this comment.
💊 제안
css 변수들을 분리하신 점 좋습니다. 다만 figma에 정의된 색상 변수보다 수가 더 적은 것 같아요~
큰 이유가 없다면 figma와 동일하게 색상 변수를 선언하시는 것이 좋습니다.
그래야 figma에서 해당 색상 변수가 사용될때 확인하기 쉽고 색상값은 디자이너와 의사 소통할 일이 많은 값이라 소통 측면에서도 같은 이름을 쓰는 것이 좋기 때문입니다~
| @@ -0,0 +1,3 @@ | |||
| body { | |||
| margin: 60px 640px; | |||
There was a problem hiding this comment.
❗️ 수정요청
해당 속성으로 인해 div.input-info 태그가 400px 만큼 커질 수 있을 때도 충분한 영역을 가지지 못하고 있는 것으로 보입니다~
아래처럼 작성해주시는 것을 추천드려요!
| margin: 60px 640px; | |
| margin: 60px auto; |
2 participants
요구사항
기본
심화
판다마켓
주요 변경사항
스크린샷
주강사님에게