[김리온] sprint2 - #9
Hidden character warning
Conversation
| @@ -0,0 +1,932 @@ | |||
| title="style-sheet.css" | |||
There was a problem hiding this comment.
파일 첫 두 줄의 title=..., :::writing...은 CSS 문법이 아니라 문서 작성 도구의 메타데이터로 보입니다. Chromium은 이 부분을 무시하고 이후 규칙을 읽어서 현재 화면은 보이지만, CSS 검사기나 다른 도구에서는 유효하지 않은 문장으로 처리됩니다.
두 줄을 삭제한 뒤 파일의 맨 위와 맨 아래에 코드 밖 문자열이 더 섞이지 않았는지 확인해주세요. ‘브라우저가 오류를 복구했다’와 ‘올바른 CSS다’는 어떤 차이가 있을까요? MDN의 CSS 문법 설명도 같이 읽어보시면 좋습니다.
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>로그인</title> |
There was a problem hiding this comment.
회원가입 화면인데 브라우저 탭 제목이 로그인으로 표시됩니다. 화면 본문만 보지 않고 탭, 방문 기록, 즐겨찾기에서 사용자가 어떤 이름을 보게 될지도 함께 확인해주세요. 이 페이지의 역할에 맞는 title로 바꿔보면 좋겠습니다.
| SIGN-UP PAGE | ||
| ======================================== */ | ||
|
|
||
| .signup-page { |
There was a problem hiding this comment.
여기부터 시작하는 회원가입 규칙은 위의 .login-page 규칙과 선택자 이름만 다르고 거의 같습니다. 지금은 input 높이나 footer 간격을 바꿀 때 두 구간을 모두 찾아야 해서 한쪽만 빠뜨리기 쉬워요.
아직 컴포넌트까지 만들 필요는 없습니다. 두 <body>에 공통 인증 화면 클래스를 하나 더 주고, 공통 layout, form, input, button 규칙만 한 번 작성해보면 어떨까요? 페이지별로 실제로 다른 규칙만 따로 남겨보세요.
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; |
There was a problem hiding this comment.
로그인과 회원가입 전체를 각각 세로 중앙 정렬하면, 내용이 더 긴 회원가입 상자의 시작점이 더 위로 올라갑니다. 1440×900에서 확인했을 때 로그인 로고 top은 162px, 회원가입은 48px라서 두 페이지의 로고 위 여백이 같지 않았어요.
높이가 다른 두 상자를 각각 중앙에 놓으면 윗부분도 같은 위치가 될까요? 로고의 위 기준은 두 페이지에서 같은 값으로 두고, 그 아래 폼만 내용만큼 늘어나는 구조를 생각해보세요.
| } | ||
|
|
||
| .login-page .body-container { | ||
| width: 640px; |
There was a problem hiding this comment.
랜딩에서는 rem을 잘 사용했는데 인증 화면은 여기서부터 640px, 24px, 56px처럼 px가 다시 많이 등장합니다. 이번 심화 요구는 브라우저의 기본 글꼴 크기가 달라질 때 간격과 요소 크기도 함께 변하는 것이어서 인증 화면까지 같은 기준이 필요해요.
모든 값을 한 번에 바꾸기보다 16px = 1rem을 기준으로 container 폭, gap, input 높이 중 한 묶음부터 바꾸고 브라우저 기본 글꼴 크기를 키워 비교해보세요. MDN의 CSS 길이 단위 문서도 참고해보시면 좋습니다.
| <a href="./"> | ||
| <img src="images/logo.png" class="logo" alt="판다마켓 로고"> | ||
| </a> | ||
| <a href="/login.html" class="login-button">로그인</a> |
There was a problem hiding this comment.
현재 Netlify는 Pretty URLs 후처리로 이 /login.html을 배포 HTML에서 /login으로 바꿔주기 때문에 실제 사용자는 요구 경로로 이동합니다. 다만 source 자체도 요구사항의 /login으로 맞추면 Netlify 설정에 덜 의존하고, 다른 정적 서버에서 코드를 읽을 때도 의도가 바로 드러납니다.
같은 관점으로 인증 화면의 index.html, signup.html, /login.html 링크도 한 번에 점검해주세요. 같은 지적을 여러 줄에 반복하지 않기 위해 대표 줄에만 남깁니다. Netlify의 Pretty URLs 설명도 같이 보시면 좋습니다.
|
|
||
| <section> | ||
| <a href="https://www.google.com/" | ||
| target="_blank" rel="noopener noreferrer"> |
There was a problem hiding this comment.
[좋습니다 👏] 요구된 Google 주소를 정확히 사용했고, 새 창을 열 때 noopener noreferrer까지 함께 넣었습니다. 회원가입 화면에도 같은 기준을 일관되게 적용한 점이 좋아요. 기능 요구와 안전한 외부 링크 처리를 동시에 챙긴 코드입니다.
2 participants
요구사항
https://rainbow-donut-41cea9.netlify.app/
기본
공통
로그인 페이지
회원가입 페이지
심화
** 주요 변경사항
멘토님에게 남길 메시지