[윤다정] 스프린트 미션 1,2 #25
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 |
|---|---|---|
| @@ -1,50 +1,8 @@ | ||
| # 스프린트 미션 1~2 | ||
|
|
||
| > 스프린트 미션 1~2 작업물입니다. | ||
|
|
||
| ## 소개 | ||
|
|
||
| 랜딩페이지와 로그인 회원가입 페이지까지 작성되어있습니다. | ||
| 작업한 페이지 주소 : https://mission-panda-page.netlify.app |
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,214 @@ | ||
| /*로그인/회원가입 페이지 CSS*/ | ||
| :root { | ||
| --brand-blue: #3692ff; | ||
| --Brand-blue: #3182f6; | ||
|
|
||
| --Cool-Gray-50: #f9fafb; | ||
| --Cool-Gray-100: #f3f4f6; | ||
| --Cool-Gray-400: #9ca3af; | ||
| --Cool-Gray-600: #4b5563; | ||
| --Cool-Gray-800: #1f2937; | ||
|
|
||
| --Primary-100: #3692ff; | ||
|
|
||
| --Secondary-400: #9ca3af; | ||
| --Secondary-800: #1f2937; | ||
| } | ||
|
Comment on lines
+2
to
+16
Collaborator
There was a problem hiding this comment. 같은 이름인데 대소문자가 다르고 값도 다릅니다( |
||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| text-decoration: none; | ||
| } | ||
| input:focus { | ||
| border: 1px solid #3692ff; | ||
| } | ||
| .auth-page { | ||
| max-width: 40rem; | ||
| display: flex; | ||
| margin: 14.4rem auto 17.8rem; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-direction: column; | ||
| gap: 2.5rem; | ||
| flex-shrink: 0; | ||
| } | ||
|
|
||
| /*#region header 부분 스타일*/ | ||
| .brand-logo { | ||
| display: inline-flex; | ||
| justify-content: center; | ||
| align-items: flex-end; | ||
| gap: 1.39rem; | ||
| width: 24.75rem; | ||
| height: 8.25rem; | ||
| } | ||
| .brand-logo img { | ||
| width: 6.47056rem; | ||
| height: 6.4925rem; | ||
|
|
||
| margin: 0.81rem 0 0.95rem 0; | ||
| } | ||
| .brand-name { | ||
| color: var(--brand-blue); | ||
| font-family: "ROKAF Sans"; | ||
| font-size: 4.1465rem; | ||
| font-style: normal; | ||
| font-weight: 700; | ||
| line-height: normal; | ||
|
|
||
| padding: 1.5em 0.26rem 1.13rem; | ||
| } | ||
| /*#endregion*/ | ||
|
|
||
| /*#region 이메일,비밀번호 입력 부분 스타일*/ | ||
| .auth-form-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 1.5rem; | ||
| } | ||
|
|
||
| .form-group { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| gap: 1rem; | ||
| } | ||
|
|
||
| .form-label { | ||
| color: var(--Secondary-800); | ||
|
|
||
| /* pretendard/2lg-18px-bold */ | ||
| font-family: Pretendard; | ||
| font-size: 1.125rem; | ||
| font-style: normal; | ||
| font-weight: 700; | ||
| line-height: 1.625rem; /* 144.444% */ | ||
| } | ||
| .form-input { | ||
| width: 40rem; | ||
| height: 3.5rem; | ||
| padding: 1rem 1.5rem; | ||
| gap: 0.625rem; | ||
|
|
||
| color: var(--Secondary-400); | ||
|
|
||
| /* pretendard/lg-16px-regular */ | ||
| font-family: Pretendard; | ||
| font-size: 1rem; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 1.625rem; /* 162.5% */ | ||
|
|
||
| flex: 1 0 0; | ||
|
|
||
| border-radius: 0.75rem; | ||
| background: var(--Cool-Gray-100); | ||
| border: none; | ||
| outline: none; | ||
| } | ||
| .form-input-pwd { | ||
| padding-right: 3.5rem; | ||
| } | ||
| .password-wrapper { | ||
| position: relative; | ||
| top: 0; | ||
| left: 0; | ||
| } | ||
| .password-wrapper img { | ||
| position: absolute; | ||
| right: 3%; | ||
| top: 30%; | ||
| } | ||
| /*#endregion*/ | ||
|
|
||
| /*#region 로그인버튼 스타일*/ | ||
| .login-submit { | ||
| display: flex; | ||
| width: 40rem; | ||
| height: 3.5rem; | ||
| padding: 1rem 7.75rem; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 0.625rem; | ||
|
|
||
| border: none; | ||
| cursor: pointer; | ||
| border-radius: 2.5rem; | ||
| background: var(--Secondary-400); | ||
|
|
||
| color: var(--Cool-Gray-100); | ||
| text-align: center; | ||
|
|
||
| /* pretendard/xl-20px-semibold */ | ||
| font-family: Pretendard; | ||
| font-size: 1.25rem; | ||
| font-style: normal; | ||
| font-weight: 600; | ||
| line-height: 2rem; /* 160% */ | ||
| } | ||
| /*#endregion*/ | ||
|
|
||
| /*#region 간편로그인 부분 스타일*/ | ||
| .social-login { | ||
| display: flex; | ||
| width: 40rem; | ||
| height: 4.625rem; | ||
| padding: 1rem 1.4375rem; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| gap: 0.625rem; | ||
|
|
||
| border-radius: 0.5rem; | ||
| background: #e6f2ff; | ||
|
|
||
| color: var(--Secondary-800); | ||
|
|
||
| /* pretendard/lg-16px-medium */ | ||
| font-family: Pretendard; | ||
| font-size: 1rem; | ||
| font-style: normal; | ||
| font-weight: 500; | ||
| line-height: 1.625rem; /* 162.5% */ | ||
| } | ||
|
|
||
| .social-link { | ||
| display: flex; | ||
| align-items: flex-start; | ||
| gap: 1rem; | ||
| } | ||
|
|
||
| .social-link img { | ||
| width: 2.625rem; | ||
| height: 2.625rem; | ||
| } | ||
| /*#endregion*/ | ||
|
|
||
| /*#region 하단 로그인/가입 링크로 연결 부분*/ | ||
| .auth-helper-link { | ||
| text-align: center; | ||
| color: var(--Secondary-800); | ||
|
|
||
| /* pretendard/md-14px-medium */ | ||
| font-family: Pretendard; | ||
| font-size: 0.875rem; | ||
| font-style: normal; | ||
| font-weight: 500; | ||
| line-height: 1.5rem; /* 171.429% */ | ||
| } | ||
| .auth-helper-link a { | ||
| text-decoration: underline; | ||
|
|
||
| color: var(--Primary-100); | ||
| font-family: Pretendard; | ||
| font-size: 0.875rem; | ||
| font-style: normal; | ||
| font-weight: 500; | ||
| line-height: normal; | ||
| text-decoration-line: underline; | ||
| text-decoration-style: solid; | ||
| text-decoration-skip-ink: none; | ||
| text-decoration-thickness: auto; | ||
| text-underline-offset: auto; | ||
| text-underline-position: from-font; | ||
| } | ||
| /*#endregion */ | ||
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,129 @@ | ||
| /* http://meyerweb.com/eric/tools/css/reset/ | ||
| v2.0 | 20110126 | ||
| License: none (public domain) | ||
| */ | ||
|
|
||
| html, | ||
| body, | ||
| div, | ||
| span, | ||
| applet, | ||
| object, | ||
| iframe, | ||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6, | ||
| p, | ||
| blockquote, | ||
| pre, | ||
| a, | ||
| abbr, | ||
| acronym, | ||
| address, | ||
| big, | ||
| cite, | ||
| code, | ||
| del, | ||
| dfn, | ||
| em, | ||
| img, | ||
| ins, | ||
| kbd, | ||
| q, | ||
| s, | ||
| samp, | ||
| small, | ||
| strike, | ||
| strong, | ||
| sub, | ||
| sup, | ||
| tt, | ||
| var, | ||
| b, | ||
| u, | ||
| i, | ||
| center, | ||
| dl, | ||
| dt, | ||
| dd, | ||
| ol, | ||
| ul, | ||
| li, | ||
| fieldset, | ||
| form, | ||
| label, | ||
| legend, | ||
| table, | ||
| caption, | ||
| tbody, | ||
| tfoot, | ||
| thead, | ||
| tr, | ||
| th, | ||
| td, | ||
| article, | ||
| aside, | ||
| canvas, | ||
| details, | ||
| embed, | ||
| figure, | ||
| figcaption, | ||
| footer, | ||
| header, | ||
| hgroup, | ||
| menu, | ||
| nav, | ||
| output, | ||
| ruby, | ||
| section, | ||
| summary, | ||
| time, | ||
| mark, | ||
| audio, | ||
| video { | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0; | ||
| font-size: 100%; | ||
| font: inherit; | ||
| vertical-align: baseline; | ||
| } | ||
| /* HTML5 display-role reset for older browsers */ | ||
| article, | ||
| aside, | ||
| details, | ||
| figcaption, | ||
| figure, | ||
| footer, | ||
| header, | ||
| hgroup, | ||
| menu, | ||
| nav, | ||
| section { | ||
| display: block; | ||
| } | ||
| body { | ||
| line-height: 1; | ||
| } | ||
| ol, | ||
| ul { | ||
| list-style: none; | ||
| } | ||
| blockquote, | ||
| q { | ||
| quotes: none; | ||
| } | ||
| blockquote:before, | ||
| blockquote:after, | ||
| q:before, | ||
| q:after { | ||
| content: ""; | ||
| content: none; | ||
| } | ||
| table { | ||
| border-collapse: collapse; | ||
| border-spacing: 0; | ||
| } |
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.
전반적으로 엘리먼트의 크기를 고정값으로 설정하고 있는데, 반응형으로 작업해두는게 좋습니다.
예를들어 아래와 같이 폼 input을 고정크기인
위와 같이 처리하고 있는데, 이렇게 고정값을 주면 작은 화면에서 깨집니다. 유연하게 아래와 같이 처리하면 더 좋습니다.