[전병진] Sprint3 #138
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,281 @@ | ||
| /* PC 스타일 */ | ||
| .banner { | ||
| background-color: #cfe5ff; | ||
| height: 540px; | ||
| display: flex; | ||
| align-items: center; | ||
| background-repeat: no-repeat; | ||
| background-position: 80% bottom; | ||
| background-size: 55%; | ||
| } | ||
|
|
||
| #hero { | ||
| background-image: url("images/Img_home_top.png"); | ||
| } | ||
|
|
||
| #features { | ||
| padding-bottom: 138px; | ||
| } | ||
|
|
||
| #bottomBanner { | ||
| background-image: url("images/Img_home_bottom.png"); | ||
| } | ||
|
|
||
| #loginLinkButton { | ||
| font-size: 16px; | ||
| font-weight: 600; | ||
| border-radius: 8px; | ||
| padding: 11.5px 23px; | ||
| } | ||
|
Comment on lines
+12
to
+29
Collaborator
There was a problem hiding this comment. id를 기반으로 스타일링을 하셨는데, 혹시 이유가 있을까요? 보통은 class로 하셨던것같은데 이번에 id로 하셨길래요... 물론 이미지나 배너는 한번만 나오니 id로 해도 문제는 없긴 합니다만...ㅠ |
||
|
|
||
| .banner .pill-button { | ||
| margin-top: 32px; | ||
| } | ||
|
|
||
| .feature { | ||
| padding: 138px 0; | ||
|
Collaborator
There was a problem hiding this comment. padding 값을 고정값으로 넣게되면 유연하게 화면 크기 전환에 대응하기가 어려워져요ㅠ |
||
| display: flex; | ||
| align-items: center; | ||
| gap: 5%; | ||
rnquf59 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } | ||
|
|
||
| .feature:nth-child(2) { | ||
| text-align: right; | ||
| } | ||
|
Comment on lines
+42
to
+44
Collaborator
There was a problem hiding this comment. 오... 두번쨰에서 오른쪽 정렬 너무 좋아요ㅎㅎ! 디자인을 보면, 짝수일떄랑 홀수일때랑 정렬 순서나 값들이 달라지는 경우가 있잖아요...! 그런경우엔 이렇게 처리하면 좋아요! /* 홀수 */
li:nth-child(odd) {
background-color: #f0f0f0;
color: #333;
}
/* 짝수 */
li:nth-child(even) {
background-color: #ffffff;
color: #666;
}
|
||
|
|
||
| .feature-content { | ||
| flex: 1; | ||
| } | ||
|
|
||
| .feature-tag { | ||
| color: #3692ff; | ||
| font-size: 18px; | ||
| line-height: 25px; | ||
| font-weight: 700; | ||
| margin-bottom: 12px; | ||
| } | ||
|
|
||
| .feature-description { | ||
| font-size: 24px; | ||
| font-weight: 500; | ||
| line-height: 120%; | ||
| letter-spacing: 0.08em; | ||
| margin-top: 24px; | ||
| } | ||
|
|
||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| a { | ||
| text-decoration: none; | ||
| color: inherit; | ||
| } | ||
|
|
||
| button { | ||
| background: none; | ||
| border: none; | ||
| outline: none; | ||
| box-shadow: none; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| img { | ||
| vertical-align: bottom; | ||
| } | ||
|
|
||
| body { | ||
| color: #374151; | ||
| word-break: keep-all; | ||
| font-family: "Pretendard", sans-serif; | ||
| } | ||
|
|
||
| header { | ||
| width: 100%; | ||
| height: 70px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| padding: 0 200px; | ||
| background-color: #ffffff; | ||
| border-bottom: 1px solid #dfdfdf; | ||
| } | ||
|
|
||
| footer { | ||
| background-color: #111827; | ||
| color: #9ca3af; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| padding: 32px 200px 108px 200px; | ||
| font-size: 16px; | ||
| } | ||
|
Comment on lines
+66
to
+114
Collaborator
There was a problem hiding this comment. 가능하면 tag 기반으로 스타일링 하지 않는게 좋긴 해요...! 다만 가능하면 class로 쓰되, footer 같은건 id로 쓰는게 어떨까 싶어요ㅎㅎ! |
||
|
|
||
| #footerMenu { | ||
| display: flex; | ||
| gap: 30px; | ||
| color: #e5e7eb; | ||
| } | ||
|
|
||
| #socialMedia { | ||
| display: flex; | ||
| gap: 12px; | ||
| } | ||
|
|
||
| .wrapper { | ||
| max-width: 1200px; | ||
| margin: 0 auto; | ||
| width: 100%; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 40px; | ||
| font-weight: 700; | ||
| line-height: 56px; | ||
| letter-spacing: 0.02em; | ||
| } | ||
|
|
||
| .button { | ||
| background-color: #3692ff; | ||
| color: #ffffff; | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .button:hover { | ||
| background-color: #1967d6; | ||
| } | ||
|
|
||
| .button:focus { | ||
| background-color: #1251aa; | ||
| } | ||
|
|
||
| .button:disabled { | ||
| background-color: #9ca3af; | ||
| cursor: default; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| .pill-button { | ||
| font-size: 20px; | ||
| font-weight: 700; | ||
| border-radius: 999px; | ||
| padding: 16px 124px; | ||
| } | ||
|
Comment on lines
+140
to
+167
Collaborator
There was a problem hiding this comment. 버튼을 잘 나눠주신것같아요ㅎㅎ |
||
| /* Tablet */ | ||
| @media(max-width: 1199px){ | ||
| header{ | ||
| padding: 24px 10px 9px; | ||
| } | ||
| .banner { | ||
| height: 771px; | ||
| align-items: start; | ||
| background-position: bottom; | ||
| background-size: 100%; | ||
|
|
||
| } | ||
| .wrapper { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| margin-top: 84px; | ||
| } | ||
| .wrapper h1{ | ||
| font-size: 40px; | ||
| } | ||
| .wrapper h1 br{ | ||
| display: none; | ||
| } | ||
| .button pill-button{ | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| .feature-tag{ | ||
| font-size:18px; | ||
| } | ||
| .feature-description{ | ||
| font-size:18px; | ||
| } | ||
| .feature{ | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-wrap: wrap; | ||
| padding:52px 24px; | ||
| } | ||
| #feature-lank{ | ||
| order:0; | ||
| } | ||
| #features img{ | ||
| width:696px; | ||
| height: 524px; | ||
| } | ||
|
|
||
| footer{ | ||
| padding: 32px 104px 108px; | ||
| } | ||
| #bottomBanner{ | ||
| height: 771px; | ||
| } | ||
|
|
||
| } | ||
| /* mobile 사이즈 */ | ||
| @media(max-width: 767px){ | ||
| header{ | ||
|
Comment on lines
+224
to
+226
Collaborator
There was a problem hiding this comment. 따로 미디어쿼리로 적용한 부분들 잘 작성해주셨네요ㅎㅎ;; 이부분이 손이 많이가는 부분중에 하나라...ㅠ |
||
| padding: 16px 10px 9px; | ||
| } | ||
| .banner { | ||
| height: 540px; | ||
| align-items: start; | ||
| background-position: bottom; | ||
| background-size: 120%; | ||
| } | ||
| .wrapper { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| margin: 48px; | ||
| } | ||
|
|
||
| .wrapper h1{ | ||
| font-size: 32px; | ||
| } | ||
| .button pill-button{ | ||
| font-size: 18px; | ||
| } | ||
| .feature-tag{ | ||
| font-size:18px; | ||
| } | ||
| .feature-description{ | ||
| font-size:18px; | ||
| } | ||
| .feature{ | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-wrap: wrap; | ||
| padding:40px 16px; | ||
| } | ||
| #feature-lank{ | ||
| order:0; | ||
| } | ||
| #features img{ | ||
| width:100%; | ||
| height:259px; | ||
| } | ||
| footer{ | ||
| flex-wrap: wrap; | ||
|
|
||
| } | ||
| #bottomBanner{ | ||
| height: 540px; | ||
| } | ||
| #footerlogo{ | ||
| order:1; | ||
| } | ||
| #bottomBanner { | ||
| background-size: 100%; | ||
| } | ||
|
|
||
| } | ||
|
Collaborator
There was a problem hiding this comment. 파일 맨 마지막은 빈 라인 하나를 추가해주시는게 좋아요~ |
||
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.
background-size는 어떤 용도로 추가하신건가여??