[이아름] sprint2 #50
[이아름] sprint2 #50
Conversation
|
스프리트 미션 하시느라 수고 많으셨어요. |
로그인과 회원가입 페이지를 만들었습니다. login.html과 signup.html로 만들었고 css를 적용하는 과정에서 style.css에서 로그인과 회원가입 페이지의 css인 auth.css를 import하고 login.html과 signup.html에서 style.css를 적용하면 위에 사진처럼 코드가 깨집니다. style.css를 적용하지 않고 auth.css를 적용하면 괜찮은데 무슨 문제일까요..?ㅠ
/* 헤더 영역 */
header {
width: 100%;
height: 70px;
padding: 0 200px;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
background-color: #fff;
}해당 스타일은 로그인/ 회원가입 페이지에 적용을 의도하시지는 않으셨을 것 같습니다 ! |
| @import "css/common_css/reset.css"; | ||
| @import "css/common_css/mainpage.css"; | ||
| /* @import "css/sub_css/auth.css"; */ |
There was a problem hiding this comment.
(질문 답변에 이어서/제안) 다음과 같이 작성해보시는건 어떠세요?
| @import "css/common_css/reset.css"; | |
| @import "css/common_css/mainpage.css"; | |
| /* @import "css/sub_css/auth.css"; */ | |
| @import "css/common_css/reset.css"; |
그리고 login.page 코드:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓 로그인</title>
<link rel="icon" href="../images/판다 얼굴.svg" type="image/x-icon" />
<link rel="stylesheet" href="../style.css" />
<link rel="stylesheet" href="../css/sub_css/auth.css" />
</head>이렇게 하면 style.css는 공통적으로 사용되는 css로서 사용될 수 있고 개별적인 스타일은 각 페이지에 맞게 import(<link />)할 수 있으실거예요 !
| a { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| ul, | ||
| li { | ||
| list-style: none; | ||
| } |
There was a problem hiding this comment.
해당 코드는 이미 reset.css에 적용되어 있는 것으로 보여요 !
| a { | |
| text-decoration: none; | |
| } | |
| ul, | |
| li { | |
| list-style: none; | |
| } |
reset.css는 모든 페이지에 공통적으로 작성되는 것을 의도하신 것 같아요.
| @font-face { | ||
| font-family: "Pretendard-Regular"; | ||
| src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff") format("woff"); | ||
| font-weight: 400; | ||
| font-style: normal; | ||
| } |
There was a problem hiding this comment.
(제안/선택)만약 기본 폰트를 pretendard로 지정하시고 싶다면
body에 폰트를 적용해볼 수 있으며, global.css라는 파일을 만들어서 적용해보실 수 있으실거예요.
이미 style.css가 있으시므로 style.css를 global.css처럼 사용하셔도 되고, style.css의 역할을 전역적인 css들을 import만 해주는 역할로 사용하셔도 될거라고 생각합니다 !
| <ul class="footer-social"> | ||
| <li> | ||
| <a href="https://www.facebook.com" target="_blank" | ||
| ><img src="images/mainpage_footer_sns/ic_facebook.svg" alt="sns facebook logo" | ||
| /></a> | ||
| </li> | ||
| <li> | ||
| <a href="https://x.com" target="_blank" | ||
| ><img src="images/mainpage_footer_sns/ic_twitter.svg" alt="sns twitter logo" | ||
| /></a> | ||
| </li> | ||
| <li> | ||
| <a href="https://www.youtube.com" target="_blank" | ||
| ><img src="images/mainpage_footer_sns/ic_youtube.svg" alt="sns youtube logo" | ||
| /></a> | ||
| </li> | ||
| <li> | ||
| <a href="https://www.instagram.com" target="_blank" | ||
| ><img src="images/mainpage_footer_sns/ic_instagram.svg" alt="sns instagram logo" | ||
| /></a> | ||
| </li> | ||
| </ul> |
There was a problem hiding this comment.
굿굿 ! 피드백 반영 훌륭합니다 !
이제 해당 html 코드는 "정렬되지 않은 목록"이라는 의미를 가지게 되었군요 !
| <label for="login-email">이메일</label> | ||
| <input class="auth-input" id="login-email" type="text" placeholder="이메일을 입력해주세요" /> |
There was a problem hiding this comment.
굿굿 ! label과 input을 적절히 연결시켰군요 ! 👍👍
| <label for="login-email">이메일</label> | ||
| <input class="auth-input" id="login-email" type="text" placeholder="이메일을 입력해주세요" /> |
There was a problem hiding this comment.
(제안) input type에는 email도 있습니다 !
| <label for="login-email">이메일</label> | |
| <input class="auth-input" id="login-email" type="text" placeholder="이메일을 입력해주세요" /> | |
| <label for="login-email">이메일</label> | |
| <input class="auth-input" id="login-email" type="email" placeholder="이메일을 입력해주세요" /> |
There was a problem hiding this comment.
(선택/제안) 그리고 옵션 중 required와 name도 고려해볼 수 있을 것 같아요 !
name:name은<form>을 사용해서 추 후submit을 사용하여 접근할 때 사용될 수 있습니다.required:required는<form>내부에서 서식을 작성하지 않았을 때 브라우저에서 유저에게 피드백을 줄 수 있습니다.
| </a> | ||
| </header> | ||
| <main class="auth-main"> | ||
| <section class="auth-form"> |
There was a problem hiding this comment.
(제안) section보다는 form이 더욱 적절해 보입니다 !
| <section class="auth-form"> | |
| <form class="auth-form"> |
HTML은 의미론적(synmantic) 태그를 사용하는 것을 권장합니다. <form> 태그는 사용자로부터 입력 데이터를 수집하여 서버에 전송하는 작업을 나타내는 데 사용되며, 로그인 또는 회원가입과 같은 폼 제출 작업에 적합해요.
현재 코드의 맥락: 로그인 폼으로 보이는 <section class="auth-form">는 사용자 입력을 받아 서버로 전송하는 구조입니다. 따라서, 이는 <form>으로 작성되어야 의미적으로 더 올바를 것으로 예상돼요 !
또한 기능적인 측면에서도 form이 더욱 적절할 것으로 보여요:
- Enter 키로 폼 제출 가능: input 요소에서 Enter 키를 누르면 자동으로 폼이 제출됩니다.
- 기본 폼 유효성 검사: required, type 등의 속성을 통해 클라이언트 사이드에서 기본적인 유효성 검사가 가능합니다.
|
수고하셨습니다 아름님 ! |
2 participants
요구사항
기본
심화
주요 변경사항
스크린샷
그냥 auth.css를 적용했을 때 모습
주강사님에게
-로그인과 회원가입 페이지를 만들었습니다. login.html과 signup.html로 만들었고 css를 적용하는 과정에서 style.css에서 로그인과 회원가입 페이지의 css인 auth.css를 import하고 login.html과 signup.html에서 style.css를 적용하면 위에 사진처럼 코드가 깨집니다. style.css를 적용하지 않고 auth.css를 적용하면 괜찮은데 무슨 문제일까요..?ㅠ