Conversation
There was a problem hiding this comment.
과제 고생 많으셨어요!
페이지별로 마크업이 익숙하지 않으시다보니 많이 고생하셨을 것 같아요
그래도 큰 구조적인 측면에서 아주 잘못된 부분이 보이지는 않아서 몇번만 더 리뷰받아 개선한다면
금방 좋은 프로젝트 구조가 될 것 같습니다!
페이지 개발하기 앞서, 꼭 한번씩은 그림판이나 낙서장, 아니면 종이에 펜을 갖고라도 구조도를 한번 그려보세요! 그렇게 해보면 어떻게 레이아웃을 그룹화 시켜서 구현하면 될 지 조금 감이 보이게 된답니다.
전반적으로 한번 개편해보면 좋을것 같아서, 코드안에 남긴 리뷰와 내일 진행할 멘토링 내용 참고해서 한번 개편해볼까요?
| </a> | ||
| </div> | ||
| <div class="dim"> | ||
| <img class="dim-image" src="https://s3-alpha-sig.figma.com/img/2080/5edd/4edb32d644767d750d576d9e6c790df2?Expires=1709510400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ZHY4ziShFQbL4H1pOOs6fEBS3XVknNxN0vqhml9qyhJrFfu8MBOIVC4UD20VV3wQlKsY61aOFDi4ZyH46oZqNTHHdwUj6fTTryVXKlX6kGB9gxD~Ph3DC46KQ20I4bOVwJdVkgJzOuig4Va3s3t0-7lVaG5Bp3MCCEQpdR3RtaL2e~4dk6dLNKYjoAzqyQxYsyIY0FyUeSoIe1Jsn2e-0cm5XBTsmKGdfuZa~e3pPd2gfsCjVpro7PpnC~4BMX1W6mUqwiYvv1AN2NsAMquwOoBAva3qsV8N1enIuNhdRlDViFLZ74yMgnv8Y1sO6-Unhi5R-hXqAel-sOqtK45WYA__"> |
There was a problem hiding this comment.
피그마 저장소를 그대로 링크 걸어오기보단, 다운받아서 우리 프로젝트 내에 있는 이미지를 활용해볼까요?
| 중요한 정보들을 검색으로 쉽게 찾아보세요. | ||
| </p> | ||
| </div> | ||
| </section> |
There was a problem hiding this comment.
위에 있던 각 섹션들을 보면 사실 구조는 다 동일하죠 ㅎㅎ
그런만큼 공통 콤포넌트 화를 시킬 수 있다는 뜻이기도 합니다!
따라서 다음과 같은 구조로 구분해서 스타일 및 마크업을 작성해본다면 어떨까요?
| #textcolor01 { | ||
| background-clip: text; | ||
| -webkit-background-clip: text; | ||
| color: transparent; | ||
| background-image: linear-gradient(91.26deg, #6D6AFE 17.28%, #FF9F9F 74.98%); | ||
| } |
There was a problem hiding this comment.
조금 더 직관적인 네이밍을 활용해보면 어떨까요?
예를 들면, .text-gradient-pink-to-purple 처럼요!
| .contents-linkadd{ | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .linkadd { | ||
| position: relative; | ||
| inset: 0; | ||
| width: 350px; | ||
| height: 53px; | ||
| z-index: 1; | ||
| gap: 10px; | ||
| border-radius: 8px; | ||
| border: none; | ||
| background-image: linear-gradient(90.99deg, #6D6AFE 0.12%, #6AE3FE 101.84%); | ||
| font-size: 18px; | ||
| font-weight: 600; | ||
| line-height: 21px; | ||
| text-align: center; | ||
| text-decoration-line: none; | ||
| color: #F5F5F5; | ||
| } |
There was a problem hiding this comment.
이 이름만으로는 해당 스타일들이 어디에 적용되는지 파악하기가 쉽지 않습니다!
한번 클래스 네이밍들을 잘 정리해보면 어떨까요?
| .dim { | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .dim-image { | ||
| position: relative; | ||
| top: 50px; | ||
| width: 1118px; | ||
| height: 659px; | ||
| border-radius: 25px; | ||
| background-color: #F0F6FF; | ||
| box-shadow: 0 4px 25px #00000014; | ||
| } | ||
|
|
||
| .contents-02, | ||
| .contents-03, | ||
| .contents-04, | ||
| .contents-05 { | ||
| display: flex; | ||
| justify-content: center; | ||
| background-color: #FFFFFF; | ||
| position: relative; | ||
| top: 120px; | ||
| gap: 157px; | ||
| padding: 50px; | ||
| } |
There was a problem hiding this comment.
위에 섹션 이미지 관련 설명드린 피드백 참고해서 개선해보면 어떨까요? :)
| <header class="topbox"> | ||
| <a href="index.html"> | ||
| <img class="logo" src="Linkbrary.png"> | ||
| </a> | ||
| <div class="gotosignup"> | ||
| <span id="signupask">회원이 아니신가요?</span> | ||
| <a class="signup" href="signup.html">회원 가입하기</a> | ||
| </div> | ||
| </header> | ||
| <main class="inputform"> | ||
| <div class="getemail"> | ||
| <label id="inputemail" for="signinemail">이메일</label> | ||
| <input id="signinemail" name="email" type="email"> | ||
| </div> | ||
| <div class="getpassword"> | ||
| <label id="inputpassword" for="signinpassword">비밀번호</label> | ||
| <div class="passwordbox"> | ||
| <input id="signinpassword" name="password" type="password"> | ||
| <img class="eyevector" src="Vector.jpg"> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| <div class="entering"> | ||
| <button class="entersignin">로그인</button> | ||
| </div> | ||
| <footer class="anothersignin"> | ||
| <div class="sociallogin"> | ||
| 소셜로그인 | ||
| </div> | ||
| <div class="anothersigninicon"> | ||
| <a href="https://www.google.com/" target="_blank"> | ||
| <img class="googleicon" src="google icon.png"> | ||
| </a> |
There was a problem hiding this comment.
마크업 구성을 한번 다시 생각해볼까요?
홈페이지 메인 안에 로그인 폼이 존재하구
로그인 폼에는 최상단에 로고와 설명이 들어가는 헤더가,
중간에는 폼 콘텐츠가 들어가는 바디가
그리고 하단에는 로그인 버튼과 소셜 그룹이 있잖아요.
이에 맞춰 마크업을 한번 작성해보면 어떨까요?
아래 이미지를 참고해서 해보면 도움이 될 것 같아요!
요구사항
기본
[기본] PC사이즈만 고려해 주어진 디자인을 구현했나요?
[기본] HTML, CSS 파일을 Netlify로 배포했나요? (참고: https://www.codeit.kr/learn/5309)
[] [기본] 랜딩 페이지의 url path는 루트(‘/’)로 설정했나요?
[기본] title은 Linkbrary로 설정했나요?
[기본] 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 했나요?
[기본] 화면의 너비가 1920px 보다 작아질 때, “Linkbrary” 로고의 왼쪽 여백 200px “로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 했나요?
[기본] Linkbrary 아이콘은 클릭 시 루트 페이지(‘/’)로 이동하나요?
[기본] 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 cursor: pointer를 설정했나요?
[기본] “로그인”은 클릭 시 로그인 페이지(‘/signin’)로 이동하나요?
[기본] “링크 추가하기”는 클릭 시 회원가입(‘/signup’)로 이동하나요?
[기본] 화면의 너비가 1920px 이상이면 내부에 있는 요소간 동일한 간격을 유지하며 가운데 정렬해야 합니다.
[기본] 화면의 너비가 1920px 보다 작아질 때, 최하단에 있는 “codeit-2023”의 왼쪽 여백 104px과 SNS 아이콘들의 오른쪽 여백 104px을 유지하면서 가운데 있는 “Privacy Policy”, “FAQ” 요소와 각각 동일한 간격을 유지하며 가까워져야 합니다.
[기본] “Privacy Policy”, “FAQ”는 클릭 시 각각 Privacy 페이지(‘/privacy’), FAQ 페이지(‘/faq’)로 이동하나요?
[기본] 페이스북, 트위터, 유튜브, 인스타그램 아이콘은 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동 하나요?
[랜딩] 아래로 스크롤 해도 “Linkbrary” 로고와 “로그인” 버튼이 있는 상단 네비게이션 바(Global Navigation Bar)영역이 최상단에 고정되게 했나요?
[로그인 페이지, 회원가입 페이지 공통] Linkbrary 로고 클릭시 루트 페이지(“/”)로 이동하나요?
[로그인 페이지, 회원가입 페이지 공통] 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일한가요?
[로그인 페이지, 회원가입 페이지 공통] input 요소에 focus in 일 때, 테두리 색상이 파랑색인가요?
[로그인 페이지, 회원가입 페이지 공통] input 요소에 focus out 일 때, 테두리 색상이 회색인가요?
[로그인 페이지, 회원가입 페이지 공통] SNS 아이콘들은 클릭시 각각 “https://www.google.com/”, “https://www.kakaocorp.com/page/” 으로 이동하나요?
[] [로그인 페이지] “회원 가입하기”는 클릭시 “/signup” 페이지로 이동하나요?
심화
[] [심화] 사용자의 브라우저 font-size가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정했나요?
[] [심화] palette에 있는 color값들을 css 변수로 등록하고 사용했나요?
[심화] 비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 눈 모양 아이콘을 추가했나요?
##주요 요구사항
스크린샷
멘토에게
-회원가입 페이지와 로그인 페이지를 동일한 레이아웃으로 만들었는데 왜 '회원 가입하기'에 링크가 적용이 안되는지 궁금합니다
-아직 레이아웃을 배치하는 것이 미흡하지만 노력하겠습니다..!