[김현진] Sprint22 스프린트 미션 1, 2 #21
Conversation
ByungyeonKim
left a comment
ByungyeonKim
left a comment
There was a problem hiding this comment.
안녕하세요, 현진님!
스프린트 미션 완료를 축하드립니다. 🎉
이번에는 미션 1과 2, 둘 모두에 해당하는 내용으로 코드리뷰를 드리겠습니다. 🤓
전 직장에 다녔을 때(9년 이상) 단순한 CSS로 작업하는 것에 익숙해진 상태라, display 플렉스 or 그리드 속성을 적재적소에 잘 쓰지 못한 것 같습니다.
: 그렇다면, 현재 미션이 Flexbox를 연습하기 가장 좋은 기간이에요. 먼저, flex에 익숙해지신 다음, grid를 사용해봐도 좋아요. 공부하기 좋은 사이트 두 개를 알려드릴게요. 하나는 영어 문서지만, 내용이 굉장히 좋아서 구글 번역으로 천천히 보셔도 좋아요.
메인 섹션의 <Search - 구매를 원하는 상품을 선택하세요...> 부분에서 css를 이용해 좌/우를 변경하지 않고 html 코드상에서 순서를 바꾸는것으로 해결하였는데, 적절하지 않겠지요...?
: flex를 더 활용해보는 건 어떨까요? 레이아웃을 반대로 만들어주는 값이 있어요. 아래 스크린샷을 참고하셔서, 개발자 도구에서 강조 표시한 아이콘을 클릭 후, 다양하게 실험해보세요. 🧐
좋습니다! 미션 하시느라 고생 많으셨습니다. 👏
자세한 리뷰는 아래 코멘트를 참고해주세요! 😊
| <nav class="container"> | ||
| <div class="logo-box"> | ||
| <a href="/"> | ||
| <img src="./images/logo/panda_logo.png" alt="판다마켓 로고"> | ||
| </a> | ||
| <a href="./primary/login.html" class="btn btn-login">로그인</a> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
여는 태그와 닫는 태그가 다릅니다. 🧐
| <img src="./images/bg/desktop_05.png" alt="믿을 수 있는 판다마켓 중고 거래."> | ||
| </div> | ||
| </section> | ||
| <main> |
| <div class="icons"> | ||
| <a href="https://www.facebook.com" target="_blank"> | ||
| <img src="./images/icon/ic_facebook.png" alt="페이스북 바로가기"> | ||
| </a> | ||
| <a href="https://x.com" target="_blank"> | ||
| <img src="./images/icon/ic_twitter.png" alt="트위터 바로가기"> | ||
| </a> | ||
| <a href="https://www.youtube.com/" target="_blank"> | ||
| <img src="./images/icon/ic_youtube.png" alt="유튜브 바로가기"> | ||
| </a> | ||
| <a href="https://www.instagram.com" target="_blank"> | ||
| <img src="./images/icon/ic_instagram.png" alt="인스타그램 바로가기"> | ||
| </a> | ||
| </div> |
There was a problem hiding this comment.
좀 더 의미있는 태그인 ul 태그로 아이콘 항목들이 있는 목록으로 표현해보는 건 어떨까요?
There was a problem hiding this comment.
이렇게 작은 크기의 아이콘 이미지는 png로 사용할 경우 고해상도 모니터에서는 다소 흐릿하게 보일 수 있어요.
svg 이미지로 사용해보는 것은 어떨까요?
There was a problem hiding this comment.
텍스트, 배경과 함께 이미지를 통으로 사용하셨군요. 이렇게 통째로 이미지를 사용하는 경우에는 어떤 장단점이 있을까요? 현진님이 생각하시는 장점과 단점을 정리해서 다음 미션 때 학습 포인트에 내용을 채워주시면 좋을 것 같아요. 🤓
| .landing-text-right p:last-of-type { | ||
| color: #374151; | ||
| font-weight: 700; | ||
| font-size: 2.3vw; |
There was a problem hiding this comment.
vw 단위를 선택하신 이유는 무엇일까요?
경우에 따라 제목의 폰트 사이즈가 더 작게 표시될 수 있어요. 같이 줄어들 수 있도록 vw 단위로 통일하거나, 피그마의 디자인에 맞게 고정해주셔도 좋아요.
There was a problem hiding this comment.
png 이미지의 경우에는 고해상도 모니터를 고려해서 저장할 때 크기를 보통 2~3배 정도 키워서 저장합니다. 따라서, 경우에 따라 svg 이미지로 저장하는 게 용량이 더 작을 때가 있어요. svg 포맷은 이미지가 절대 깨지지 않고, 선명하죠. 지금처럼 간단한 그림 이미지나 아이콘같은 경우에는 svg가 더 효율적일 때가 많습니다.
이미지가 흐릿하게 보이는 경우, 웹 서비스의 전문성과 신뢰도에 영향을 끼칠 수 있어서 중요해요.
각 이미지를 다운 받아보시고, 용량 크기를 비교해보세요. 그리고 복잡한 이미지의 경우에는 png를 사용해야 할 때도 있을텐데, 이럴 땐 어떻게 해결하는지도 찾아보시면 좋을 것 같습니다. 🤓
| <a href="https://www.google.com/" class="easy-icon"> | ||
| <img src="../images/icon/ic_google.png" alt="구글 간편로그인"> | ||
| </a> | ||
| <a href="https://www.kakaocorp.com/page/" class="easy-icon"> | ||
| <img src="../images/icon/ic_kakao.png" alt="카카오 간편로그인"> | ||
| </a> |
There was a problem hiding this comment.
우리가 reset.css와 같이 미리 스타일 속성들을 초기화하는 이유가 여기에 있어요. 브라우저만의 기본 스타일(사용자 에이전트 스타일시트)에 대해서 학습해 보시면 좋을 것 같아요. 🧐
| <link rel="stylesheet" href="../style.css"> | ||
| </head> | ||
| <body> | ||
| <div class="login-container"> |
There was a problem hiding this comment.
해당 박스는 가로 뿐만 아니라 세로도 가운데 정렬이 되어야해요.
| <!-- 인풋 영역 --> | ||
| <div class="login-input"> | ||
| <label for="email">이메일</label> | ||
| <input type="text" name="email" id="email" placeholder="이메일을 입력해주세요"> | ||
| <div> | ||
| <label for="password">비밀번호</label> | ||
| <input type="password" name="password" id="password" placeholder="비밀번호를 입력해주세요"> | ||
| <img src="../images/icon/btn_visibility_off.png" alt="비밀번호 가리기" class="toggle-icon"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- 로그인 버튼 --> | ||
| <div class="login-button"> | ||
| <a href="#" class="btn btn-big-login">로그인</a> | ||
| </div> |
There was a problem hiding this comment.
각 입력 필드와 버튼을 그룹화 할 수 있는 form 태그를 사용하면 좋을 것 같아요.
2 participants
배포 링크
https://gilded-bienenstitch-5ca6a8.netlify.app/
진행한 미션 버전
미션 요구사항
스프린트 미션 1
기본
심화
스프린트 미션 2
기본
아래로 스크롤 해도 상단 네비게이션 바(Global Navigation Bar)가 최상단에 고정됩니다.
"판다마켓" 클릭 시 루트 페이지("/")로 이동합니다.(새로고침)
로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다.
"회원가입"버튼 클릭 시 "/signup" 페이지로 이동합니다.
"로그인"버튼 클릭 시 "/login" 페이지로 이동합니다.
심화
주요 변경사항 및 학습 포인트
주강사에게
집중적으로 봐줬으면 하는 부분
해결하지 못한 문제 / 궁금한 점