[김교연] Sprint2 #52
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,145 @@ | ||
| html, | ||
| body { | ||
| margin: 0; | ||
| height: 100%; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| main { | ||
| margin-top: 70px; | ||
| background-color: #ffffff; | ||
| } | ||
|
|
||
| .login_main { | ||
| display: grid; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 618px; | ||
| grid-template-rows: 1fr 3fr; | ||
| } | ||
|
|
||
| .login_header { | ||
| width: 100%; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| /*login_content */ | ||
| .login_content { | ||
| text-align: left; | ||
| width: 640px; | ||
| } | ||
|
|
||
| .login_content > h3 { | ||
| font-size: 18px; | ||
| font-weight: 700; | ||
| color: #1f2937; | ||
| margin-bottom: 16px; | ||
| } | ||
|
|
||
| /*input */ | ||
| .input_wrapper { | ||
| display: flex; | ||
| align-items: center; | ||
| background-color: #f3f4f6; | ||
| height: 40px; | ||
| border-radius: 12px; | ||
| padding: 16px 24px; | ||
| margin-bottom: 16px; | ||
| position: relative; | ||
| border: 2px solid transparent; | ||
| } | ||
|
|
||
| .input_wrapper:focus-within { | ||
| border-color: #3692ff; /* 포커스 상태 테두리 색상 */ | ||
| } | ||
|
|
||
| input { | ||
| border: none; | ||
| background-color: transparent; /* 투명 배경 */ | ||
| outline: none; | ||
| flex: 1; | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| input::placeholder { | ||
| font-size: 16px; | ||
| font-weight: 400; | ||
| line-height: 26px; | ||
| color: #9ca3af; | ||
| } | ||
|
|
||
| .input_icon { | ||
| display: flex; | ||
| width: 24px; | ||
| height: 24px; | ||
| justify-content: center; | ||
| align-items: center; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .btn_login2 { | ||
| width: 640px; | ||
| height: 56px; | ||
| background-color: #9ca3af; | ||
| color: #f3f4f6; | ||
| border: none; | ||
| border-radius: 40px; | ||
| padding: 16px 124px; | ||
| cursor: pointer; | ||
| font-size: 20px; | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| /*sns_login*/ | ||
| .sns_login { | ||
| display: flex; | ||
| margin-top: 24px; | ||
| width: 100%; | ||
| height: 74px; | ||
| background-color: #e6f2ff; | ||
| align-items: center; | ||
| border-radius: 8px; | ||
| } | ||
|
|
||
| .sns_login_content { | ||
| width: 594px; | ||
| height: 42px; | ||
| display: flex; | ||
| text-align: center; | ||
| align-items: center; | ||
| color: #1f2937; | ||
| font-size: 16px; | ||
| justify-content: space-between; | ||
| font-weight: 500; | ||
| } | ||
|
|
||
| .sns_login_text { | ||
| font-size: 16px; | ||
| margin-left: 15px; | ||
| font-weight: 500; | ||
| } | ||
|
|
||
| .sns_link { | ||
| color: #e6f2ff; | ||
| } | ||
|
|
||
| .sns_login_icon { | ||
| width: 42px; | ||
| height: 42px; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .first_text { | ||
| font-size: 14px; | ||
| margin-top: 15px; | ||
| text-align: center; | ||
| font-weight: 500; | ||
| } | ||
|
|
||
| .signup-link { | ||
| color: #3692ff; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,71 @@ | ||||||||||||||||||||||||||||||||||
| <!DOCTYPE html> | ||||||||||||||||||||||||||||||||||
| <html lang="ko"> | ||||||||||||||||||||||||||||||||||
| <head> | ||||||||||||||||||||||||||||||||||
| <title>로그인</title> | ||||||||||||||||||||||||||||||||||
| <meta charset="utf-8" /> | ||||||||||||||||||||||||||||||||||
| <link | ||||||||||||||||||||||||||||||||||
| rel="stylesheet" | ||||||||||||||||||||||||||||||||||
| href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css" | ||||||||||||||||||||||||||||||||||
| /> | ||||||||||||||||||||||||||||||||||
| <link rel="stylesheet" href="login.css" /> | ||||||||||||||||||||||||||||||||||
| </head> | ||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||
| <body> | ||||||||||||||||||||||||||||||||||
| <main> | ||||||||||||||||||||||||||||||||||
| <div class="login_main"> | ||||||||||||||||||||||||||||||||||
| <div class="login_header"> | ||||||||||||||||||||||||||||||||||
| <a href="/13-Sprint-Mission/" | ||||||||||||||||||||||||||||||||||
| ><img src="../img/login/login_logo.svg" | ||||||||||||||||||||||||||||||||||
| /></a> | ||||||||||||||||||||||||||||||||||
| </div> | ||||||||||||||||||||||||||||||||||
| <div class="login_content"> | ||||||||||||||||||||||||||||||||||
| <h3>이메일</h3> | ||||||||||||||||||||||||||||||||||
| <div class="input_wrapper"> | ||||||||||||||||||||||||||||||||||
| <input | ||||||||||||||||||||||||||||||||||
| id="email" | ||||||||||||||||||||||||||||||||||
| name="email" | ||||||||||||||||||||||||||||||||||
| placeholder="이메일을 입력해주세요." | ||||||||||||||||||||||||||||||||||
| /> | ||||||||||||||||||||||||||||||||||
| </div> | ||||||||||||||||||||||||||||||||||
|
Comment on lines
+22
to
+29
Collaborator
There was a problem hiding this comment.
|
||||||||||||||||||||||||||||||||||
| <h3>이메일</h3> | |
| <div class="input_wrapper"> | |
| <input | |
| id="email" | |
| name="email" | |
| placeholder="이메일을 입력해주세요." | |
| /> | |
| </div> | |
| <label for="email">이메일</label> | |
| <div class="input_wrapper"> | |
| <input | |
| id="email" | |
| name="email" | |
| placeholder="이메일을 입력해주세요." | |
| /> | |
| </div> |
라벨은 다음과 같은 이점이 있습니다:
<label> 을 <input> (en-US) 요소와 연결하면 몇 가지 이점이 있습니다:
- label 텍스트는 텍스트 입력과 시각적으로 관련이 있을뿐만 아니라 프로그래밍적으로도 관련이 있습니다. 예를 들어, 화면리더기(screenreader) 는 폼 입력(form input)에서 label 을 읽어서 보조기술(assistive technology) 사용자가 입력해야하는 텍스트가 무엇인지 더 쉽게 이해할 수 있게 합니다.
- 관련 label 을 클릭해서 input 자체에 초점을 맞추거나 활성화를 시킬 수 있습니다. (활성되어서)늘어난 누를 수 있는 영역(hit area)은 터치스크린 사용자를 포함해 입력하려하는 모든 사람에게 이점을 줍니다.
출처: MDN
Comment on lines
+33
to
+34
Collaborator
There was a problem hiding this comment.
줄임말 보다는 의도를 명확히 전달해보는건 어떨까요?
Suggested change
| id="passwd" | |
| name="passwd" | |
| id="password" | |
| name="password" |
물론 btn, pw 등 편의를 위해서 사용되기도 하나, 명확한 클래스 이름을 사용하시는게 더욱 의도된 바를 전달하기 쉽습니다.
이는 "닌자 코드"에 해당하는 문법입니다:
약어 사용하기
팀에 한 글자 짜리 변수나 모호한 변수명을 사용하지 못하게 하는 제약이 있다면 약어를 쓰는 기지를 발휘하세요. 변수명은 짧을수록 좋으니까요.
예시:
list → lst.
userAgent → ua.
browser → brsr.
등등…
모든 걸 줄여서 당신의 코드를 읽을 가치가 있는 직감이 뛰어난 개발자만 유지보수를 담당 할 수 있게 해 놓읍시다.
위 문서는 "이렇게 해라 !"가 아니라, "이를 지양하자 !"라는 것으로 작성된 문서 내용입니다. 😊
물론 oAuth(Open Authorization), sms(Short Message Service) 와 같이 내용이 길어서 통상적으로 줄임말을 사용하는 경우도 있기는 하기에 무조건 풀 텍스트를 사용하자 라는 차원은 아님을 전달드립니다. 😊
Comment on lines
+33
to
+38
Collaborator
There was a problem hiding this comment.
크으 input 프로퍼티에 무엇이 있는지 꼼꼼히 확인하신 티가 나시는군요 👍👍
input에 있는 적절한 유효성 검사 속성들을 잘 작성하셨습니다.
추가로 required도 적용해볼 수 있겠어요.
required:required는<form>내부에서 서식을 작성하지 않았을 때 브라우저에서 유저에게 피드백을 줄 수 있습니다.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| main { | ||
| margin-top: 70px; | ||
| background-color: #ffffff; | ||
| } | ||
|
|
||
| .signup_main { | ||
| display: grid; | ||
| width: 640px; | ||
| height: 842px; | ||
| justify-content: center; | ||
| align-items: center; | ||
| grid-template-rows: 1fr 3fr; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,91 @@ | ||||||
| <!DOCTYPE html> | ||||||
| <html lang="ko"> | ||||||
| <head> | ||||||
| <title>회원가입</title> | ||||||
| <meta charset="utf-8" /> | ||||||
| <link | ||||||
| rel="stylesheet" | ||||||
| href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css" | ||||||
| /> | ||||||
| <link rel="stylesheet" href="../Login/login.css" /> | ||||||
| </head> | ||||||
|
|
||||||
| <body> | ||||||
| <main> | ||||||
| <div class="signup_main"> | ||||||
| <div class="login_header"> | ||||||
| <a href="/13-Sprint-Mission/" | ||||||
| ><img src="../img/login/login_logo.svg" | ||||||
| /></a> | ||||||
| </div> | ||||||
| <div class="login_content"> | ||||||
| <h3>이메일</h3> | ||||||
| <div class="input_wrapper"> | ||||||
| <input | ||||||
| id="email" | ||||||
| name="email" | ||||||
| placeholder="이메일을 입력해주세요." | ||||||
| /> | ||||||
| </div> | ||||||
| <h3>닉네임</h3> | ||||||
| <div class="input_wrapper"> | ||||||
| <input | ||||||
| id="email" | ||||||
| name="email" | ||||||
| placeholder="닉네임을 입력해주세요." | ||||||
| /> | ||||||
| </div> | ||||||
| <h3>비밀번호</h3> | ||||||
| <div class="input_wrapper"> | ||||||
| <input | ||||||
| id="passwd" | ||||||
| name="passwd" | ||||||
| type="password" | ||||||
| minlength="8" | ||||||
| maxlength="20" | ||||||
| placeholder="비밀번호를 입력해주세요." | ||||||
| /> | ||||||
| <img src="../img/login/btn_showpw.svg" class="input_icon" /> | ||||||
| </div> | ||||||
| <h3>비밀번호 확인</h3> | ||||||
| <div class="input_wrapper"> | ||||||
| <input | ||||||
| id="passwd" | ||||||
| name="passwd" | ||||||
| type="password" | ||||||
| minlength="8" | ||||||
| maxlength="20" | ||||||
| placeholder="비밀번호를 다시 입력해주세요." | ||||||
|
Collaborator
There was a problem hiding this comment. 오타 발견 ! 😉
Suggested change
|
||||||
| /> | ||||||
| <img src="../img/login/btn_showpw.svg" class="input_icon" /> | ||||||
| </div> | ||||||
| <a href="/items"><button class="btn_login2">회원가입</button></a> | ||||||
| <div class="sns_login"> | ||||||
| <div class="sns_login_content"> | ||||||
| <span class="sns_login_text">간편 로그인 하기</span> | ||||||
| <div class="sns_login_icons"> | ||||||
| <a class="sns_link" href="https://www.google.com/"> | ||||||
| <img | ||||||
| class="sns_login_icon" | ||||||
| src="../img/login/icon_google.svg" | ||||||
| /> | ||||||
| </a> | ||||||
| <a class="sns_link" href="https://www.kakaocorp.com/page/" | ||||||
| ><img | ||||||
| class="sns_login_icon" | ||||||
| src="../img/login/icon_kakao.svg" | ||||||
| /></a> | ||||||
| </div> | ||||||
| </div> | ||||||
| </div> | ||||||
| <div class="first_text"> | ||||||
| <a>이미 회원이신가요? </a | ||||||
| ><a href="/13-Sprint-Mission/Login/Login.html" class="signup-link" | ||||||
| >로그인</a | ||||||
| > | ||||||
| </div> | ||||||
| </div> | ||||||
| </div> | ||||||
| </main> | ||||||
| </body> | ||||||
| </html> | ||||||
Binary file not shown.
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
(제안) 만약 스타일 선택자 목적이라면 태그보다는
class를 선택자로 사용하는게 어떨까요?클래스는 재사용이 가능하며, 자유롭게 태그에 스타일을 붙일 수 있어서 유지보수에 용이하므로 단순히 스타일을 위해서라면
class를 추천드려요 !좀 더 자세히 🤔
유지보수가 어려워질 수 있어요.
특정
p태그에만 다른 스타일을 적용하려면 추가적인 선택자를 작성하거나 기존 스타일을 덮어써야 하므로 유지보수가 어려워집니다.태그 의미를 명확히 부여하기 어려워요.
스타일링을 태그에 직접 적용하면, 태그가 어떤 의미를 가지는지 어렵기에 가독성이 보다 좋지 못할 수 있어요.
물론 전역적인 것을 의미한다면 일정 허용될 수 있어요.
예를 들어서
p의 기본 마진을 없애고 싶다면 다음과 같이 작성할 수 있을거예요:그렇지만 특정 스타일을 지정하고 싶다면 다음과 같이 작성해볼 수 있어요: