[박지섭] sprint1 #24
There are no files selected for viewing
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
GANGYIKIM marked this conversation as resolved.
Show resolved
Hide resolved
|
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,150 @@ | ||||||
| <!DOCTYPE html> | ||||||
| <html lang="ko"> | ||||||
| <head> | ||||||
| <meta charset="UTF-8" /> | ||||||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||||||
| <title>판다마켓</title> | ||||||
|
|
||||||
| <meta name="description" content="판다마켓 - Sprint-Mission 1" /> | ||||||
| <meta name="keywords" content="판다마켓" /> | ||||||
| <meta name="author" content="Codeit Sprint FrontEnd" /> | ||||||
|
|
||||||
| <meta property="og:title" content="판다마켓" /> | ||||||
| <meta property="og:description" content="판다마켓 - Sprint-Mission 1" /> | ||||||
GANGYIKIM marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
| <!-- <meta property="og:image" content="배포 후 추가 예정" /> --> | ||||||
| <!-- <meta property="og:url" content="배포 후 추가 예정"/> --> | ||||||
|
|
||||||
| <link rel="icon" href="./assets/favicon.ico" type="image/x-icon" /> | ||||||
|
|
||||||
| <link | ||||||
| rel="stylesheet" | ||||||
| as="style" | ||||||
| crossorigin | ||||||
| href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css" /> | ||||||
|
|
||||||
| <link rel="stylesheet" href="./styles/reset.css" /> | ||||||
| <link rel="stylesheet" href="./styles/typography.css" /> | ||||||
| <link rel="stylesheet" href="./styles/header.css" /> | ||||||
| <link rel="stylesheet" href="./styles/banner.css" /> | ||||||
| <link rel="stylesheet" href="./styles/info.css" /> | ||||||
| <link rel="stylesheet" href="./styles/footer.css" /> | ||||||
| <link rel="stylesheet" href="./styles/index.css" /> | ||||||
GANGYIKIM marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
| </head> | ||||||
| <body> | ||||||
| <header class="header"> | ||||||
| <a href="/" class="header__logo"> | ||||||
| <picture> | ||||||
| <source media="(max-width: 480px)" srcset="./assets/logos/logo_typo.png" /> | ||||||
| <img src="./assets/logos/logo_sm.png" alt="판다마켓 로고" /> | ||||||
| </picture> | ||||||
| </a> | ||||||
|
Comment on lines
+35
to
+40
Collaborator
Author
There was a problem hiding this comment. 헤더 로고를 이미지로 다운받았다보니 picture을 사용해서 로고를 변화하게 구현했습니다.
Collaborator
There was a problem hiding this comment. 반응형 디자인은 1주차 요구사항이 아닌데 같이 구현하셨네요!
Collaborator
Author
There was a problem hiding this comment. 판다마켓 이라는 텍스트를 이미지로 관리하다보니 PC, 테블릿은 판다마켓 로고 + 판다마켓 으로 표현되어야 하고, 모바일 일때는 로고가 없느 판다마켓으로만 보여야하길래 picture 태그를 사용해서 width값 변화에 의해 이미지를 변경하게 구현했습니다. 처음 사용해보는 방법이고, 평소였다면 텍스트를 스타일값을 준 뒤, 앞에 이미지로고만 width값이 모바일 너비로 들어오면 안보이게 구현했을 것 같습니다.
Collaborator
There was a problem hiding this comment. 작업하신 방법도 적절합니다. 현 디자인의 경우 텍스트가 사이트내에서 사용되는 폰트와 다른 값이라 기존 방식대로 작업할 수 없는 경우니 이미지로 관리하시는 것이 더 적절합니다. |
||||||
| <a href="/login" class="header__login font-semibold text-lg">로그인</a> | ||||||
|
Collaborator
There was a problem hiding this comment. ❗️ 수정요청 지섭님이 코딩에 능숙하신 것 같아서 추천드리자면 왜 이렇게 동작하는지 고민해보세요~
Suggested change
Collaborator
Author
There was a problem hiding this comment. 빈페이지로 이동하라는 것이 빈 html로 이동하라는 것인지 모르고 라우트로만 해결하려고 했었습니다..! |
||||||
| </header> | ||||||
|
|
||||||
| <main> | ||||||
| <section class="banner"> | ||||||
| <div class="banner__container"> | ||||||
| <div class="banner__content"> | ||||||
| <p class="banner__title font-bold text-4xl"> | ||||||
|
Collaborator
There was a problem hiding this comment. 👍 칭찬 |
||||||
| 일상의 모든 물건을<br /> | ||||||
| 거래해보세요 | ||||||
| </p> | ||||||
| <a href="/items" class="banner__button font-semibold text-xl">구경하러 가기</a> | ||||||
| </div> | ||||||
| <img src="./assets/images/Img_home_top.png" alt="판다마켓 배너 이미지" class="banner__image" /> | ||||||
| </div> | ||||||
| </section> | ||||||
|
|
||||||
| <section class="info"> | ||||||
| <div class="info__container"> | ||||||
| <div class="info__wrapper"> | ||||||
| <img src="./assets/images/Img_home_01.png" alt="인기 상품" class="info__image" /> | ||||||
| <div class="info__content"> | ||||||
| <p class="info__category text-lg font-bold">Hot item</p> | ||||||
| <p class="info__title text-4xl font-bold"> | ||||||
| 인기 상품을<br /> | ||||||
| 확인해 보세요 | ||||||
| </p> | ||||||
| <p class="info__description text-2xl font-medium"> | ||||||
| 가장 HOT한 중고거래 물품을<br /> | ||||||
| 판다 마켓에서 확인해 보세요 | ||||||
| </p> | ||||||
| </div> | ||||||
| </div> | ||||||
| </div> | ||||||
|
|
||||||
| <div class="info__container"> | ||||||
| <div class="info__wrapper info__wrapper--reverse"> | ||||||
| <img src="./assets/images/Img_home_02.png" alt="상품 검색" class="info__image" /> | ||||||
| <div class="info__content"> | ||||||
| <p class="info__category text-lg font-bold">Search</p> | ||||||
| <p class="info__title text-4xl font-bold"> | ||||||
| 구매를 원하는<br /> | ||||||
| 상품을 검색하세요 | ||||||
| </p> | ||||||
| <p class="info__description text-2xl font-medium"> | ||||||
| 구매하고 싶은 물품은 검색해서<br /> | ||||||
| 쉽게 찾아보세요 | ||||||
| </p> | ||||||
| </div> | ||||||
| </div> | ||||||
| </div> | ||||||
|
|
||||||
| <div class="info__container"> | ||||||
| <div class="info__wrapper"> | ||||||
| <img src="./assets/images/Img_home_03.png" alt="상품 등록" class="info__image" /> | ||||||
| <div class="info__content"> | ||||||
| <p class="info__category text-lg font-bold">Register</p> | ||||||
| <p class="info__title text-4xl font-bold"> | ||||||
| 판매를 원하는<br /> | ||||||
| 상품을 등록하세요 | ||||||
| </p> | ||||||
| <p class="info__description text-2xl font-medium"> | ||||||
| 어떤 물건이든 판매하고 싶은 상품을<br /> | ||||||
| 쉽게 등록하세요 | ||||||
| </p> | ||||||
| </div> | ||||||
| </div> | ||||||
| </div> | ||||||
| </section> | ||||||
|
|
||||||
| <section class="bottom_banner banner"> | ||||||
| <div class="banner__container"> | ||||||
| <div class="banner__content"> | ||||||
| <p class="banner__title font-bold text-4xl"> | ||||||
| 믿을 수 있는<br /> | ||||||
| 판다마켓 중고 거래 | ||||||
| </p> | ||||||
| </div> | ||||||
| <img src="./assets/images/Img_home_bottom.png" alt="판다마켓 바텀 배너 이미지" class="banner__image" /> | ||||||
| </div> | ||||||
| </section> | ||||||
| </main> | ||||||
|
|
||||||
| <footer class="footer"> | ||||||
| <div class="footer__container"> | ||||||
| <p class="footer__copyright">@codeit - 2025</p> | ||||||
|
|
||||||
| <nav class="footer__nav"> | ||||||
| <a href="/privacy" class="footer__link">Privacy Policy</a> | ||||||
| <a href="/faq" class="footer__link">FAQ</a> | ||||||
| </nav> | ||||||
|
|
||||||
| <div class="footer__sns"> | ||||||
| <a href="https://facebook.com" target="_blank" class="footer__icon"> | ||||||
| <img src="./assets/icons/icon_facebook.svg" alt="Facebook" /> | ||||||
| </a> | ||||||
| <a href="https://x.com" target="_blank" class="footer__icon"> | ||||||
| <img src="./assets/icons/icon_x.svg" alt="X" /> | ||||||
| </a> | ||||||
| <a href="https://youtube.com" target="_blank" class="footer__icon"> | ||||||
| <img src="./assets/icons/icon_youtube.svg" alt="YouTube" /> | ||||||
| </a> | ||||||
| <a href="https://instagram.com" target="_blank" class="footer__icon"> | ||||||
| <img src="./assets/icons/icon_instagram.svg" alt="Instagram" /> | ||||||
| </a> | ||||||
| </div> | ||||||
|
Comment on lines
+133
to
+146
Collaborator
There was a problem hiding this comment. 💊 제안 <ul class="footer__sns">
<li>
<a href="https://facebook.com" target="_blank" class="footer__icon">
<img src="./assets/icons/icon_facebook.svg" alt="Facebook" />
</a>
</li>
</div>
Collaborator
Author
There was a problem hiding this comment. ul, li를 목록으로만 생각했는데 로고의 모음도 이런식으로 표현하는게 맞다고 생각합니다! 감사합니다! |
||||||
| </div> | ||||||
| </footer> | ||||||
| </body> | ||||||
| </html> | ||||||
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,37 @@ | ||
| .banner { | ||
| display: flex; | ||
| align-items: flex-end; | ||
| justify-content: center; | ||
| background-color: #cfe5ff; | ||
| height: 540px; | ||
| } | ||
|
|
||
| .banner__container { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| gap: 7px; | ||
| } | ||
|
|
||
| .banner__content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| color: var(--secondary-700); | ||
| gap: 32px; | ||
| padding-bottom: 60px; | ||
| } | ||
|
|
||
| .banner__button { | ||
| width: 357px; | ||
| height: 56px; | ||
| padding: 12px 124px; | ||
| background-color: var(--primary-100); | ||
| color: var(--secondary-50); | ||
| border-radius: 40px; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .banner__image { | ||
| width: 746px; | ||
| } |
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,37 @@ | ||
| .footer { | ||
| height: 160px; | ||
| background-color: var(--secondary-900); | ||
| color: var(--secondary-400); | ||
| padding: 32px 400px; | ||
| line-height: 19.09px; | ||
| } | ||
|
|
||
| .footer__container { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .footer__nav { | ||
| display: flex; | ||
| gap: 30px; | ||
| } | ||
|
|
||
| .footer__link { | ||
| color: var(--secondary-200); | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .footer__link:hover { | ||
| color: var(--secondary-50); | ||
| } | ||
|
|
||
| .footer__sns { | ||
| display: flex; | ||
| gap: 12px; | ||
| } | ||
|
|
||
| .footer__icon img { | ||
| width: 20px; | ||
| height: 20px; | ||
| } |
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,37 @@ | ||
| .header { | ||
| height: 70px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| border-bottom: 1px solid #dfdfdf; | ||
| padding: 9.5px 200px; | ||
|
Collaborator
There was a problem hiding this comment. 💬 여담 https://www.reddit.com/r/css/comments/148y3xm/is_it_ok_to_give_text_the_size_in_decimals_like/
Collaborator
Author
There was a problem hiding this comment. 피그마 속성 값을 보고 스타일을 적용하다보니 생긴 이슈입니다! |
||
| background-color: #ffffff; | ||
| margin: 0 auto; | ||
| position: sticky; | ||
| top: 0; | ||
| } | ||
|
|
||
| picture { | ||
|
Collaborator
There was a problem hiding this comment. 💊 제안
Collaborator
Author
There was a problem hiding this comment. 로고의 위치만 생각하고 이렇게 구현했던 것 같습니다! 미션2때 반영하도록 하겠습니다! |
||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .header__logo img { | ||
| width: 153px; | ||
| } | ||
|
|
||
| .header__login { | ||
| width: 128px; | ||
| height: 48px; | ||
| padding: 12px 23px; | ||
| color: white; | ||
| background-color: var(--primary-100); | ||
| border-radius: 8px; | ||
| text-decoration: none; | ||
| text-align: center; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .header__login:hover { | ||
| background-color: var(--primary-200); | ||
| } | ||
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.
Uh oh!
There was an error while loading. Please reload this page.