[이은주] sprint3 #99
There are no files selected for viewing
This file contains 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
This file contains 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,313 @@ | ||
| /* PC view */ | ||
| @media screen { | ||
|
Comment on lines
+1
to
+2
There was a problem hiding this comment. 기본값이라면 굳이 미디어를 씌우지 않아도 괜찮아요. |
||
| /* header */ | ||
| .header { | ||
| z-index: 99; | ||
| position: sticky; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| height: 70px; | ||
| background-color: var(--white); | ||
| } | ||
| .header__container { | ||
| height: 100%; | ||
| margin: 0 auto; | ||
| padding: 0 200px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| } | ||
| .header__logo--logo-text { | ||
| position: relative; | ||
| padding-left: 50px; | ||
| font-family: "ROKAF"; | ||
| font-size: 26px; | ||
|
There was a problem hiding this comment. html에게 font-size: 10px 를 제공하고, 이후 요소들에게는 rem유닛을 한번 적용시켜보면 어떤가요? |
||
| color: var(--blue1); | ||
| } | ||
| .header__logo--logo-text::before { | ||
| content: ""; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 0; | ||
| transform: translateY(-50%); | ||
| width: 40px; | ||
| height: 41px; | ||
| background: url("../img/logo.png") no-repeat center / contain; | ||
| } | ||
| .header__login--login-text { | ||
| padding: 15px 30px; | ||
| border-radius: 8px; | ||
| color: var(--gray-50); | ||
| font-size: 16px; | ||
| font-weight: 600; | ||
| text-align: center; | ||
| background: #3692ff; | ||
| } | ||
| .header__login--login-text:hover { | ||
| background-color: #1967d6; | ||
| } | ||
|
|
||
| /* every */ | ||
| .section-every { | ||
| position: relative; | ||
| padding-top: 100px; | ||
| background-color: var(--blue4); | ||
| } | ||
| .every__container { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100%; | ||
| margin: 0 auto; | ||
| } | ||
| .every__text-group { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| gap: 20px; | ||
| height: 100%; | ||
| } | ||
| .every__text { | ||
| font-weight: 700; | ||
| font-size: 40px; | ||
| line-height: 56px; | ||
| color: var(--gray-600); | ||
| } | ||
| .every__link { | ||
| padding: 15px 130px; | ||
| font-size: 20px; | ||
| font-weight: 600; | ||
| text-align: center; | ||
| color: var(--white); | ||
| background-color: var(--blue1); | ||
| border: none; | ||
| border-radius: 40px; | ||
| } | ||
| .every__link:hover { | ||
| background-color: var(--blue2); | ||
| } | ||
|
|
||
| /* goods */ | ||
| .goods__container { | ||
| display: flex; | ||
| max-width: 1200px; | ||
| margin: 200px auto; | ||
| flex-direction: column; | ||
| gap: 250px; | ||
| } | ||
| .goods__container-group { | ||
| display: flex; | ||
| width: 100%; | ||
| align-items: center; | ||
| border-radius: 12px; | ||
| overflow: hidden; | ||
| } | ||
| .goods__container-group:nth-child(even) .goods__img-container { | ||
| order: 1; | ||
| } | ||
| .goods__img-container { | ||
| width: 55%; | ||
| border-radius: 15px; | ||
| } | ||
| .goods__text-box { | ||
| display: flex; | ||
| width: 45%; | ||
| justify-content: center; | ||
| } | ||
| .goods__container-group:nth-child(even) .goods__inner { | ||
| text-align: right; | ||
| } | ||
| .goods__description { | ||
| font-size: 18px; | ||
| line-height: 26px; | ||
| font-weight: 700; | ||
| color: var(--blue1); | ||
| } | ||
| .goods__title { | ||
| padding: 20px 0; | ||
| font-size: 40px; | ||
| line-height: 56px; | ||
| font-weight: 700; | ||
| color: var(--gray-600); | ||
| } | ||
| .goods__text { | ||
| font-size: 24px; | ||
| line-height: 32px; | ||
| font-weight: 500; | ||
| color: var(--gray-600); | ||
| } | ||
|
|
||
| /* trust */ | ||
| .section-trust { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 20px; | ||
| padding-top: 100px; | ||
| background-color: var(--blue4); | ||
| } | ||
| .trust__text { | ||
| font-weight: 700; | ||
| font-size: 40px; | ||
| line-height: 56px; | ||
| color: var(--gray-600); | ||
| } | ||
|
|
||
| /* footer */ | ||
| .footer { | ||
| width: 100%; | ||
| padding: 40px 30px; | ||
| box-sizing: border-box; | ||
| background-color: var(--gray-900); | ||
| } | ||
| .footer__container { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| max-width: 1110px; | ||
| margin: 0 auto; | ||
| } | ||
| .footer p, | ||
| .footer a { | ||
|
Comment on lines
+170
to
+171
There was a problem hiding this comment. BEM을 사용하면서는 굳이 child element에대한 설정을 하기보다 명시적으로 BEM 요소로 적용시키는게 좋지 않을까 생각합니다. |
||
| font-size: 16px; | ||
| font-weight: 400; | ||
| } | ||
| .footer__copyright { | ||
| color: var(--gray-400); | ||
| } | ||
| .footer__menu-group { | ||
| display: flex; | ||
| gap: 30px; | ||
| } | ||
| .footer__menu-group a { | ||
| color: var(--gray-200); | ||
| text-decoration: none; | ||
| } | ||
| .footer__menu-group a:hover { | ||
| opacity: 0.5; | ||
| } | ||
| .footer__sns-group { | ||
| display: flex; | ||
| gap: 12px; | ||
| } | ||
| .footer__sns-group li { | ||
| width: 20px; | ||
| height: 20px; | ||
| } | ||
| .footer__sns-group a { | ||
| display: block; | ||
| width: 100%; | ||
| height: 100%; | ||
| font-size: 0; | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| } | ||
| .footer__sns-group a:hover { | ||
| opacity: 0.5; | ||
| } | ||
| .footer__sns-group--facebook { | ||
| background-image: url("../img/ic_facebook.png"); | ||
| } | ||
| .footer__sns-group--twitter { | ||
| background-image: url("../img/ic_twitter.png"); | ||
| } | ||
| .footer__sns-group--youtube { | ||
| background-image: url("../img/ic_youtube.png"); | ||
| } | ||
| .footer__sns-group--instagram { | ||
| background-image: url("../img/ic_instagram.png"); | ||
| } | ||
| } | ||
|
|
||
| /* Tablet view */ | ||
| @media (min-width: 768px) and (max-width: 1199px) { | ||
| .header__container { | ||
| padding: 0 24px; | ||
| } | ||
| .section-every { | ||
| height: auto; | ||
| } | ||
| .every__container { | ||
| flex-direction: column; | ||
| align-items: center; | ||
| gap: 150px; | ||
| padding-top: 100px; | ||
| } | ||
| .goods__container-group { | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| gap: 20px; | ||
| } | ||
| .goods__img-container { | ||
| width: 90%; | ||
| border-radius: 15px; | ||
| margin: 0 auto; | ||
| } | ||
| .goods__text-box { | ||
| width: 90%; | ||
| margin: 0 auto; | ||
| justify-content: flex-start; | ||
| } | ||
| .goods__container-group:nth-child(even) .goods__text-box { | ||
| justify-content: flex-end; | ||
| } | ||
| .goods__container-group:nth-child(even) .goods__img-container { | ||
| order: inherit; | ||
| } | ||
| .section-trust { | ||
| flex-direction: column; | ||
| padding: 0; | ||
| } | ||
| .trust__text { | ||
| padding: 100px 0; | ||
| } | ||
| } | ||
|
|
||
| /* Mobile view */ | ||
| @media (min-width: 375px) and (max-width: 767px) { | ||
|
There was a problem hiding this comment. 사실 어떤 경우에는 375픽셀보다도 더 좁은 경우가 발생할 수도 있어요 ㅋㅋ |
||
| main { | ||
| overflow: hidden; | ||
| } | ||
| .header__container { | ||
| padding: 0 16px; | ||
| } | ||
| .every__container { | ||
| flex-direction: column; | ||
| gap: 100px; | ||
| } | ||
| .goods__container { | ||
| gap: 80px; | ||
| margin: 80px auto; | ||
| } | ||
| .goods__container-group { | ||
| gap: 20px; | ||
| flex-direction: column; | ||
| } | ||
| .goods__img-container { | ||
| width: 90%; | ||
| } | ||
| .goods__text-box { | ||
| width: 90%; | ||
| justify-content: flex-start; | ||
| } | ||
| .goods__container-group:nth-child(even) .goods__img-container { | ||
| order: inherit; | ||
| } | ||
| .goods__container-group:nth-child(even) .goods__text-box { | ||
| justify-content: flex-end; | ||
| } | ||
| .section-trust { | ||
| flex-direction: column; | ||
| gap: 150px; | ||
| } | ||
| .footer__container { | ||
| position: relative; | ||
| padding-bottom: 80px; | ||
| height: 100%; | ||
| box-sizing: border-box; | ||
| } | ||
| .footer__copyright { | ||
| position: absolute; | ||
| bottom: 0; | ||
| } | ||
| } | ||
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.
font의 경우, pretendard는 외부에서 불러와 사용하는 폰트잖아요. 불러오는데에 실패하거나 오류가 발생한 경우, html은 브라우저에서 제공하는 못생긴 기본 폰트를 입혀서 제공해줍니다.
따라서 폰트 설정할때는 항상 fallback을 제공해줄 필요가 있어요