Conversation
Kbomi16
added
순한맛🐑
There was a problem hiding this comment.
안녕하세요 보미님~!
작성해주신 코드 잘 확인했습니다! 👏👏 빠르게 잘 구현해주셨네요!
요구사항에 관한 내용도 살펴봤는데, 별건 아니지만 요구사항이랑 살짝 달라서 한번 확인해보시면 좋을 것 같아요.
- '로그인'버튼 클릭 시 로그인 페이지(‘/login’)로 이동합니다 (빈 페이지)
→signin페이지로 연결되어용
또, 요 commit message 규칙도 한번 살펴보시고 차근차근 적용해보시는 것두 추천드립니다! 👍
고생하셨어요!
| <a href="./index.html"> | ||
| <picture> | ||
| <source srcset="./img/logo_text.png" media="all and (max-width: 768px)"> | ||
| <img src="./img/logo.png" class="logo" alt="로고"> | ||
| </picture> | ||
| </a> |
There was a problem hiding this comment.
같은 레벨의 태그에서 indent 가 안맞고 있는 것같은데 prettier 설정 한번 살펴보시면 좋을 것 같아요!
파일 저장할 때마다 정리해주는 format on save 쪽 살펴보시면 될거에요! 🤸
| <img src="./img/logo.png" class="logo" alt="로고"> | ||
| </picture> | ||
| </a> | ||
| <a href="./signin.html"><button id="btn_small">로그인</button></a> |
There was a problem hiding this comment.
button tag와 a tag를 같이 사용하신 이유가 있을까용~? 두 태그 모두 이벤트가 발생하는 태그여서, 같이 사용하시게되면 두 이벤트가 서로 충돌하면서 하나의 이벤트가 무시되거나 제대로 동작하지 않는 문제가 발생할 수 있어요. (물론 지금은 a 태그에만 이벤트를 달아주셔서 문제가 발생하지는 않겠지만요!)
| </footer> | ||
| </body> | ||
|
|
||
| </html> |
There was a problem hiding this comment.
🙋♀️ eof (end of file) 이슈가 있네요! 프로그램을 돌릴 때 문제가 생기지는 않지만 관행적으로 사용되는 부분이라 확인해주시면 좋을 것 같아요! 요부분도 prettier나 lint 설정에서 마지막 줄에 개행문자를 넣어줄 수 있어요. ㅎㅎ
| @@ -0,0 +1,280 @@ | |||
| /* 색상 css 변수 */ | |||
There was a problem hiding this comment.
지금은 하나의 페이지만 있어서 큰 문제가 없겠지만,
앞으로 점차 파일이 늘어날수록 css 파일도 비대해지게 될텐데요, 어떻게 하면 파일을 잘 분리할 수 있을지 고민해보시는 것두 좋을 것 같아요! 🚀
| * { | ||
| box-sizing: border-box; | ||
| font-family: "Pretendard-Regular"; | ||
| color: var(--gray700); | ||
| } | ||
| html { | ||
| height: 100%; | ||
| } | ||
| body { | ||
| min-height: 100%; | ||
| margin: 0; | ||
| padding: 0; | ||
| } |
There was a problem hiding this comment.
전반적으로 가독성을 위해 스타일 사이에 개행이 있으면 좋을 것 같아요! 🌳
| :root { | ||
| --main: #3692ff; | ||
| --error: #f74747; | ||
| --gray50: #f7f7f8; | ||
| --gray100: #e8ebed; | ||
| --gray200: #e5e7eb; | ||
| --gray400: #9ea4a8; | ||
| --gray500: #72787f; | ||
| --gray600: #454c53; | ||
| --gray700: #374151; | ||
| --gray800: #26282b; | ||
| --gray900: #1b1d1f; | ||
| --btn1: #3692ff; | ||
| --btn2: #1967d6; | ||
| --btn3: #1251aa; | ||
| --btn4: #9ca3af; | ||
| --bannerbg: #cfe5ff; | ||
| } |
There was a problem hiding this comment.
변수 등록해서 사용하시는거 완존 좋아용 👏👏
| <a href="./signin.html"><button id="btn_small">로그인</button></a> | ||
| </header> | ||
| <section class="s1"> | ||
| <div class="banner"> | ||
| <div class="bannertext"> | ||
| <h1>일상의 모든 물건을<br>거래해 보세요</h1> | ||
| <a href="./items.html"><button id="btn_large">구경하러 가기</button></a> | ||
| </div> | ||
| <img src="./img/img_home_top.png" class="home_img1" alt="메인이미지1"> |
There was a problem hiding this comment.
🦖 class는 여러 element에 스타일링 할 수 있는 반면에 id는 딱 하나의 element에만 사용할 수 있어요.
만약 요 페이지 내에서 또다른 small button 혹은 large button 을 사용하고자 할 때에는 어떻게 할 수 있을까용~?
| #btn_small:hover, | ||
| #btn_large:hover { | ||
| background-color: var(--btn2); | ||
| } |
There was a problem hiding this comment.
모든 버튼에 기본적으로 들어가야하는 스타일링이라면 button:hover 속성에 요 속성을 주어도 될 것 같아요! 🙋♀️
그렇지 않다면 슥 넘어가셔두 좋습니다 ㅎㅎ
| border-radius: 0.5rem; | ||
| padding: 0.5rem 1.5rem; | ||
| width: 128px; | ||
| height: 48px; | ||
| font-size: 16px; |
There was a problem hiding this comment.
px / rem을 함께 사용해주고 계신데요, 어떤 기준으로 사용하고 계신지 알고싶어요!
There was a problem hiding this comment.
원래 rem을 쓰는데 혼자 정하기 애매한 크기들은 피그마 시안에 나와있는 width, height를 그대로 써서 px를 쓰게 되었습니다...!
| .home_img1 { | ||
| width: 996px; | ||
| height: 447px; | ||
| /* 가로세로 비율 일정하게 줄이려고 */ | ||
| object-fit: scale-down; | ||
| } | ||
| .home_img2 { | ||
| width: 996px; | ||
| height: 447px; | ||
| /* 가로세로 비율 일정하게 줄이려고 */ | ||
| object-fit: scale-down; | ||
| } | ||
| /* a태그 텍스트 스타일 제거 */ |
There was a problem hiding this comment.
요렇게 주석을 다셔도 좋지만, 현업에서는 주석은 정말 정말 필요한 경우가 아니라면 달지 않는 것이 권장되어요 홍홍
요구사항
기본
https://part1-kimbomi-sprint6.netlify.app/
심화
주요 변경사항
스크린샷
멘토에게