Conversation
There was a problem hiding this comment.
전반적으로 구현 잘 해주셨습니다!
코드도 깔끔해서 보기 편했습니다.
다만 클래스나 id 이름 명명이 일관적이면 좋을 것 같고, 한글은 안쓰셨으면 좋겠습니다!
아래는 질의응답입니다.
로그인, 회원가입 웹 페이지에서 input부분에 글을 입력할 때 너무 딱 붙어서 입력되는 것의 해결방법을 알고 싶습니다.
- signup.css 에서 다음과 같이 input 의 placeholder 에 패딩을 주셨습니다.
input::placeholder {
color: #9CA3AF;
padding: 15px 24px;
font-size: 16px;
}그래서 placeholder 는 이쁘게 중앙정렬된 것처럼 보이는데, 실제 인풋 커서는 그렇지 않아서 이상해 보이는 거에요! 실제 input 에도 padding-left 만 15를 준다거나 하면 해결될 것 같습니다.
'로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백을 동일하게' 요구사항을 받아서 에 margin-top을 줬는데, 이렇게 고정값을 주는게 맞는 건지 알고 싶습ㄴ다.
- 두 페이지 코드를 봤을 때, "모든 요소를 margin을 통해서" 정렬을 하고 계신데요, 이런 경우 유동적으로 유지보수하기가 쉽지 않습니다.
- html , body 에 width/ height 100% 씩을 주면, 페이지가 꽉 차게 되는데
- body 에다가 justify / align 둘다 center 를 주셨으므로, all-wrapper 에 별도의 높이를 주지 않으면, body의 자식인 all-wrapper 는 중앙정렬 될 것이고
- 그럼 자연스레 margin-top 으로 조정할 필요가 없겠습니다.
- all-wrapper 의 자손들도 flexbox 로 구현되지 않고 margin 에 의해 정렬되었는데요. 나쁘다는 건 아니지만 복잡한 구현이 될 경우 flexbox 로 인해 유동적으로 구현하는 것이 좋겠습니다!
| FAQ</a> | ||
| </div> | ||
| <div class="sns-item"> | ||
| <a class="item-1" width="50%" href="https://www.facebook.com/"> |
There was a problem hiding this comment.
[ O ] 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.
"새로운 창"이 열려야 합니다! target blank 를 생각해서 고쳐주세요.
| </header> | ||
|
|
||
| <div class="sky-top"> | ||
| <div class="두개포함1"> |
There was a problem hiding this comment.
변수명이나 주석에 한글 사용은 자제해주세요.
동작은 하지만 현업에서는 사용하지 않습니다!
아래 사이트 참고해서, 네이밍 컨벤션에 대해 알고 전체를 수정해보세요.
저는 HTML에서는 주로 (my-menu) 같은, 단어와 단어 사이를 - 로 분리해서 쓰곤 합니다.
|
추가로, 커밋 메시지에도 신경써주세요! |
## 미션1 요구사항
기본
[ O ] React와 같은 UI 라이브러리를 사용하지 않고 진행합니다
[ O ] PC사이즈만 고려해 주어진 디자인으로 구현합니다.
[ O ] HTML, CSS 파일을 Netlify로 배포해 주세요. (참고: https://www.codeit.kr/learn/5309)
[ X ] 랜딩 페이지의 url path는 루트(‘/’)로 설정합니다.
[ O ] title은 “판다마켓”로 설정합니다.
[ O ] “판다마켓” 로고 클릭 시 루트 페이지(‘/’)로 이동합니다.
[ O ] '로그인' 버튼 클릭 시 로그인 페이지(‘/login’)로 이동합니다 (빈 페이지)
[ O ] “구경하러 가기”버튼 클릭 시(’/items’)로 이동합니다. (빈 페이지)
[ O ] “Privacy Policy”, “FAQ”는 클릭 시 각각 Privacy 페이지(‘/privacy’), FAQ 페이지(‘/faq’)로 이동합니다.(모두 빈 페이지)
[ O ] 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.
[ O ] 아래로 스크롤해도 “판다 마켓” 로고와 “로그인” 버튼이 있는 상단 내비게이션 바(Global Navigation Bar)가 최상단에 고정되게 해 주세요.
[ O ] 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.
[ X ] 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px, “로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소 간 거리가 가까워지도록 설정합니다.
[ O ] 화면의 너비가 1920px 이상이면 내부에 있는 요소 간 동일한 간격을 유지하며 가운데 정렬해야 합니다.
[ O ] 화면의 너비가 1920px 보다 작아질 때, 최하단에 있는 “codeit-2024”의 왼쪽 여백 200px과 SNS 아이콘들의 오른쪽 여백 200px을 유지하면서 가운데 있는 “Privacy Policy”, “FAQ” 요소와 각각 동일한 간격을 유지하며 가까워져야 합니다.
[ O ] 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer로 설정합니다.
심화
[ O ] reset.css를 설정해 주세요.
[ O ] 사용자의 브라우저 설정에 따라 기본 폰트 크기 설정이 변화함에 따라서 페이지의 요소 간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 주세요.
## 미션2 요구사항
기본
[ O ] 로그인 페이지 “회원가입”버튼 클릭 시 “/signup” 페이지로 이동합니다.
[ O ] PC사이즈만 고려해 주어진 디자인을 구현합니다.
[ O ] HTML, CSS 파일을 Netlify로 배포해 주세요. (참고: https://www.codeit.kr/learn/5309)
=> https://mission2-sj.netlify.app/
로그인 페이지, 회원가입 페이지 공통
[ O ] “판다마켓" 로고 클릭 시 루트 페이지(“/”)로 이동합니다.
[ O ] 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
[ O ] SNS 아이콘들은 클릭 시 각각 “https://www.google.com/”, “https://www.kakaocorp.com/page/” 으로 이동합니다.
[ O ] input 요소에 focus in 일 때, 테두리 색상은 ##3692FF입니다.
[ O ] input 요소에 focus out 일 때, 테두리는 없습니다.
[ O ] input 요소에 focus in 일 때, 테두리 색상은 ##3692FF입니다.
[ O ] input 요소에 focus out 일 때, 테두리는 없습니다.
회원가입 페이지
[ O ] “로그인”버튼 클릭 시 “/login” 페이지로 이동합니다.
심화
[ O ] 비밀번호, 비밀번호 확인 input 요소 오른쪽에 비밀번호를 확인할 수 있는 눈 모양 아이콘을 추가합니다.
[ X ] palette에 있는 color값들을 css 변수로 등록해서 사용합니다.
[ O ] 구글 애널리틱스로 방문자 수 확인하기할 수 있도록 설정합니다.
주요 변경사항
스크린샷
미션1. 랜딩페이지
미션2. 로그인
미션3. 로그인-테두리
미션4. 회원가입
멘토에게