Conversation
There was a problem hiding this comment.
-
사용자 입력 영역을 input으로 잘 수정 해주셨네요! :-)
사용자 입력영역이 input만 있는건 아니어서 다른 태그들도 많이 알아 두시면 나중에 도움이 되실꺼에요!
select, option, textarea, label, 그리고 input 태그의 여러 type들이 있어요!
mdn 문서를 참고해보시면 더 도움이 되실것 같아요 :-) - 마지막 payment Form을 보시면 됩니다! -
반응형 디자인을 어디서부터 손을 대야할까 고민이 많으실텐데 media query를 다루는 방법부터 익히시고 눈에 잘 띄는 class 하나 골라서 background color도 바꿔보고, font-size도 바꿔보면서 크기가 늘어나거나 줄어들거나 할 때에 화면에 어떻게 바뀌는지 눈으로 보시면 좀더 와닿으실 꺼에요.
-
한번에 많은 부분을 바꾸려기 보단 section하나, footer하나씩 media-query문법대로 조금씩 바꿔보세요! 여기서 layout이 많이 바뀔텐데 이때에 필요한건 flex, 그리고 grid 이 둘중에 하나를 써서 바꾸시면 됩니다. 아마 flex가 좀더 친숙할꺼에요!
-
조금씩 차근차근 하다보면 어느새 모바일쪽이 완성되어있을꺼고, 태블릿도 조금씩 수정해보시면 금방 완성하실꺼에요! 포기하지마시고 ! 어떤걸 모르고 있는지부터 체크해보세요! 👍🏻
| @@ -5,6 +5,7 @@ | |||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
| <title>판다마켓</title> | |||
| <link rel="stylesheet" href="./stylesheets/style.css"> | |||
| <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" /> | |||
There was a problem hiding this comment.
font 적용 방법이 이렇게 CDN을 이용해서 다운로드 받는 방식이 있고,
font 파일을 프로젝트에 함께 두고 font-face로 설정하는 방법도 있습니다.
시간이 되실때 font-face로 설정하는 방법도 적용해보시면 좋을것같아요! :-)
| <form> | ||
| <div class="input-item"> | ||
| <label for="login-email">이메일</label> | ||
| <input id="login-email" name="email" type="email" placeholder="이메일을 입력해주세요" required autocomplete="on"> |
There was a problem hiding this comment.
오! input으로 잘 바꿔주셨네요! :-)
| :root { | ||
| --blue: #3692ff; | ||
| --red: #f74747; | ||
| --gray900: #111827; | ||
| --gray800: #1f2937; | ||
| --gray700: #374151; | ||
| --gray600: #4b5563; | ||
| --gray500: #6b7280; | ||
| --gray400: #9ca3af; | ||
| --gray200: #e5e7eb; | ||
| --gray100: #f3f4f6; | ||
| --gray50: #f9fafb; | ||
| --white: #ffffff; | ||
| } |
There was a problem hiding this comment.
컬러 변수 설정 잘 해주셨네요!
같은 gray여도 색이 다른 gray라는것도 잘 알 수 있게 변수 설정 잘 해주셨습니다 👍🏻
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게