[강석준] sprint3 #51
[강석준] sprint3 #51
Conversation
|
스프리트 미션 하시느라 수고 많으셨어요. |
|
크으 ~! 커밋 단위와 메시지가 정말 정말 깔끔하네요 👍👍 |
| @import "global.css"; | ||
| @import "reset.css"; |
There was a problem hiding this comment.
크으 global.css와 reset.css 활용이 정말 좋네요 ! 👍
이는 공통된 코드를 한 데에서 관리하므로 유지보수성을 높일 거로 기대가 됩니다 !
There was a problem hiding this comment.
근데, 순서를 바꾸시는게 어떨까요?:
| @import "global.css"; | |
| @import "reset.css"; | |
| @import "reset.css"; | |
| @import "global.css"; |
reset.css는 브라우저의 기본 스타일들을 초기화 합니다.
예를 들어
margin,padding,box-sizing등 초기화.
global.css는 앱에서의 전역적인 스타일을 제공합니다.
예를 들어 색상, 폰트, 공통 레이아웃 등.
reset.css를 먼저 적용한 후 global.css를 적용하는게 어떨까요?
| display: flex; | ||
| justify-content: center; | ||
| align-items: end; | ||
| background-color: #cfe5ff; |
There was a problem hiding this comment.
(선택/제안) 컬러 팔레트를 사용해보시는건 어떨까요?
컬러는 따로 선언해두시고 재사용 해보시는건 어떨까요?
컬러 팔레트는 color.css 혹은 global.css에서 정의하는게 일반적입니다 !
컬러 팔레트는 다음과 같이 정의할 수 있습니다:
* {
--primary: #6D6AFE;
--red: #FF5B56;
--black: #111322;
--white: #FFFFFF;
--gray-100: #3E3E43;
--gray-200: #9FA6B2;
--gray-300: #CCD5E3;
--gray-400: #E7EFFB;
--gray-500: #F0F6FF;
}| <meta property="og:title" content="판다 마켓" /> | ||
| <meta property="og:image" content="assets/thumbnail.png" /> | ||
| <meta property="og:description" content="일상의 모든 물건을 거래해보세요" /> | ||
| <meta property="og:locale" content="ko_KR" /> | ||
| <!-- Twitter(X) --> | ||
| <meta name="twitter:card" content="summary_large_image" /> | ||
| <meta name="twitter:title" content="판다 마켓" /> | ||
| <meta name="twitter:image" content="assets/thumbnail.png" /> | ||
| <meta | ||
| name="twitter:description" | ||
| content="일상의 모든 물건을 거래해보세요" | ||
| /> |
There was a problem hiding this comment.
굿굿 ~! 메타 태그를 적절하게 작성하셨군요 ! 👍👍
| <label for="email" class="form__field-label">이메일</label> | ||
| <div | ||
| class="form__field-input-wrapper form__field-input-wrapper--focused" | ||
| > | ||
| <input | ||
| class="form__field-input" | ||
| id="email" | ||
| type="email" | ||
| placeholder="이메일을 입력해주세요" | ||
| required | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
크으 적절한 label과 input입니다 ! 👍
둘의 연결도 적절하게 작성되었네요 !
| <input | ||
| class="form__field-input" | ||
| id="email" | ||
| type="email" | ||
| placeholder="이메일을 입력해주세요" | ||
| required | ||
| /> |
There was a problem hiding this comment.
또한, input의 프로퍼티도 매우 적절합니다 ! 👍👍👍
추 후 고려해볼 수도 있을만한 것은 name 정도네요 !
name:name은<form>을 사용해서 추 후submit을 사용하여 접근할 때 사용될 수 있습니다.
| const isFormFilled = Array.from(formInputs) | ||
| .map((input) => input.value) | ||
| .every((string) => !isEmpty(string)); | ||
|
|
||
| submitButton.disabled = !isFormFilled; |
There was a problem hiding this comment.
굿굿 ! 모던 자바스크립트로 쉽게 작성하셨군요 !
map, every 등 모던 자바스크립트 메써드를 적극 활용하셨네요. 또한, 조건 변수로 선언하여 사용함으로서 가독성도 좋습니다 👍👍👍
함수의 목적도 명확하구요 😊
|
훌륭합니다 석준님 ! 미션 수행하시느라 수고 많으셨습니다 ! 👍👍 |
2 participants
요구사항
기본
공통
랜딩 페이지
로그인, 회원가입 페이지 공통
심화
주요 변경사항
멘토에게