From 183f5701b25b377277dcad6b5ccfcf4cc8ec3277 Mon Sep 17 00:00:00 2001 From: rhojunseo Date: Fri, 13 Jun 2025 19:03:03 +0900 Subject: [PATCH 1/2] apply sprint2 comment --- .github/img/Property 1=lg.png | Bin 6318 -> 0 bytes ...bility_off_24px.svg => visibility_off.svg} | 0 ...sibility_on_24px.svg => visibility_on.svg} | 0 .github/login.html | 5 +--- .github/login_signup.css | 21 ++++++++------ .github/signup.html | 13 ++++----- .github/style.css | 26 ++++++++++++------ 7 files changed, 37 insertions(+), 28 deletions(-) delete mode 100644 .github/img/Property 1=lg.png rename .github/img/{btn_visibility_off_24px.svg => visibility_off.svg} (100%) rename .github/img/{btn_visibility_on_24px.svg => visibility_on.svg} (100%) diff --git a/.github/img/Property 1=lg.png b/.github/img/Property 1=lg.png deleted file mode 100644 index 77c501496e2dfb26a8558e592457f43b77c598d5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6318 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 diff --git a/.github/img/btn_visibility_off_24px.svg b/.github/img/visibility_off.svg similarity index 100% rename from .github/img/btn_visibility_off_24px.svg rename to .github/img/visibility_off.svg diff --git a/.github/img/btn_visibility_on_24px.svg b/.github/img/visibility_on.svg similarity index 100% rename from .github/img/btn_visibility_on_24px.svg rename to .github/img/visibility_on.svg diff --git a/.github/login.html b/.github/login.html index 5e2ea458..347e517e 100644 --- a/.github/login.html +++ b/.github/login.html @@ -35,10 +35,7 @@ required /> diff --git a/.github/login_signup.css b/.github/login_signup.css index 79d67b52..2723df27 100644 --- a/.github/login_signup.css +++ b/.github/login_signup.css @@ -14,6 +14,11 @@ body { padding: 20px; } +:root { + --primary-color: #3692ff; + --background-color: #f3f4f6; +} + .logo img { width: 396px; height: 132px; @@ -59,7 +64,7 @@ input { height: 56px; padding: 16px 24px; border: none; - background-color: #f3f4f6; + background-color: var(--background-color); border-radius: 12px; font-size: 16px; font-weight: 400; @@ -70,7 +75,7 @@ input { input:focus { outline: none; - background-color: #f3f4f6d0; + background-color: var(--background-color); } input[type="password"]::-ms-reveal { @@ -86,7 +91,7 @@ input[type="password"]::-ms-reveal { align-items: center; border: none; border-radius: 12px; - background-color: #f3f4f6; + background-color: var(--background-color); padding: 16px 24px; } @@ -118,8 +123,8 @@ input[type="password"]::-ms-reveal { width: 100%; height: 56px; padding: 16px 124px; - background: #3692ff; - color: #f3f4f6; + background: var(--primary-color); + color: var(--background-color); border: none; border-radius: 40px; font-size: 20px; @@ -131,7 +136,7 @@ input[type="password"]::-ms-reveal { } .login-button:hover { - background: #3692ff; + background: var(--primary-color); } .ez-login-container { @@ -140,7 +145,7 @@ input[type="password"]::-ms-reveal { padding: 16px 23px; border: none; border-radius: 8px; - background: #e6f2ff; + background: var(--background-color); display: flex; align-items: center; justify-content: space-between; @@ -183,7 +188,7 @@ input[type="password"]::-ms-reveal { } .help-text a { - color: #3692ff; + color: var(--primary-color); text-decoration: underline; text-decoration-style: solid; } diff --git a/.github/signup.html b/.github/signup.html index b5845bc4..ac40160d 100644 --- a/.github/signup.html +++ b/.github/signup.html @@ -9,7 +9,9 @@
@@ -47,10 +49,7 @@ required />
@@ -59,13 +58,13 @@
diff --git a/.github/style.css b/.github/style.css index 4044853a..d941e8e9 100644 --- a/.github/style.css +++ b/.github/style.css @@ -1,9 +1,17 @@ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); +:root { + --primary-color: #3692ff; + --primary-color-hover: #1967d6; + --background-color: #ffffff; + --background-gray-color: #f3f4f6; + --section-text-color: #374151; +} + .top { position: sticky; top: 0; - background-color: #ffffff; + background-color: var(--background-color); display: flex; align-items: center; max-width: 1920px; @@ -27,8 +35,8 @@ } .loginbutton { - background-color: #3692ff; - color: white; + background-color: var(--primary-color); + color: var(--background-color); display: flex; justify-content: center; align-items: center; @@ -44,7 +52,7 @@ } .loginbutton:hover { - background-color: #1967d6; + background-color: var(--primary-color-hover); } .panda { @@ -84,11 +92,11 @@ align-items: center; color: #f9fafb; border-style: none; - background-color: #3692ff; + background-color: var(--primary-color); } .gotosee:hover { - background-color: #1967d6; + background-color: var(--primary-color-hover); } .section_card { @@ -128,7 +136,7 @@ } .section_text :nth-child(1) { - color: #3692ff; + color: var(--primary-color); font-size: 18px; font-family: "Abhaya Libre ExtraBold", sans-serif; font-weight: 800; @@ -138,7 +146,7 @@ .section_text :nth-child(2) { height: 112px; - color: #374151; + color: var(--section-text-color); font-size: 40px; font-family: Pretendard, sans-serif; font-weight: 700; @@ -147,7 +155,7 @@ } .section_text :nth-child(3) { - color: #374151; + color: var(--section-text-color); font-size: 24px; font-family: Pretendard, sans-serif; font-weight: 500; From 250c115a1cfe66ffc843d413a02f1ba7e6b38528 Mon Sep 17 00:00:00 2001 From: rhojunseo Date: Tue, 17 Jun 2025 16:12:16 +0900 Subject: [PATCH 2/2] sprint3 --- .github/basictag.css | 34 +++++++- .github/index.html | 19 +++-- .github/login.html | 4 +- .github/login_signup.css | 17 ++++ .github/style.css | 178 ++++++++++++++++++++++++++++++++++++--- 5 files changed, 229 insertions(+), 23 deletions(-) diff --git a/.github/basictag.css b/.github/basictag.css index 1e3ee208..8b6cd6d0 100644 --- a/.github/basictag.css +++ b/.github/basictag.css @@ -9,15 +9,43 @@ a { text-decoration: none; } -section { +/*section { width: 1920px; padding: 138px 466px; gap: 10px; +}*/ +section { + width: 100%; /* 화면 너비에 맞춤 */ + max-width: 1920px; /* 최대 너비 제한 (PC 기준) */ + display: flex; + justify-content: center; + align-items: center; + /* margin-left: auto; + margin-right: auto; */ + padding-top: 138px; + padding-bottom: 138px; +} + +@media (max-width: 1199px) { + section { + padding: 80px 24px; + } +} +@media (max-width: 767px) { + section { + padding: 40px 8px; + } } figure { background-color: #cfe5ff; - height: 540px; + width: 100%; + max-width: 1920px; /* 최대 너비 제한 (PC 기준) */ + padding-top: 80px; + display: flex; + justify-content: center; + align-items: flex-end; + height: auto; } figure p { @@ -30,6 +58,8 @@ figure p { } footer { + display: flex; + justify-content: space-between; background-color: #111827; height: 160px; } diff --git a/.github/index.html b/.github/index.html index a10f6836..5037aeb7 100644 --- a/.github/index.html +++ b/.github/index.html @@ -16,14 +16,14 @@
- 판다마켓 로고 + 판다마켓 로고 로그인
-

일상의 모든 물건을
거래해 보세요

+

일상의 모든 물건을 거래해 보세요

구경하러 가기
pandamarket @@ -34,8 +34,8 @@ Hot item

Hot item

-

인기 상품을
확인해 보세요

-

가장 HOT한 중고거래 물품을
판다 마켓에서 확인해 보세요

+

인기 상품을 확인해 보세요

+

가장 HOT한 중고거래 물품을
판다 마켓에서 확인해 보세요

@@ -43,8 +43,8 @@

Search

-

구매를 원하는
상품을 검색하세요

-

구매하고 싶은 물품은 검색해서
쉽게 찾아보세요

+

구매를 원하는 상품을 검색하세요

+

구매하고 싶은 물품은 검색해서
쉽게 찾아보세요

Search
@@ -54,15 +54,16 @@ Register

Register

-

판매를 원하는
상품을 등록하세요

-

어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요

+

판매를 원하는 상품을 등록하세요

+

어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요

-

믿을 수 있는
판다마켓 중고 거래

+

믿을 수 있는

+

판다마켓 중고 거래

pandamarket bottom
diff --git a/.github/login.html b/.github/login.html index 347e517e..87a494d1 100644 --- a/.github/login.html +++ b/.github/login.html @@ -9,7 +9,9 @@
diff --git a/.github/login_signup.css b/.github/login_signup.css index 2723df27..f1beace2 100644 --- a/.github/login_signup.css +++ b/.github/login_signup.css @@ -192,3 +192,20 @@ input[type="password"]::-ms-reveal { text-decoration: underline; text-decoration-style: solid; } + +@media (max-width: 767px) and (min-width: 375px) { + .login-container { + width: 100%; + max-width: 400px; + padding: auto 16px; + } + .logo a { + display: flex; + align-items: center; + justify-content: center; + } + .logo img { + width: 50%; + height: 50%; + } +} diff --git a/.github/style.css b/.github/style.css index d941e8e9..6129d0a3 100644 --- a/.github/style.css +++ b/.github/style.css @@ -18,16 +18,17 @@ height: 70px; border-bottom: #dfdfdf solid 1px; padding: 9px 200px; + z-index: 10; } .topheader { display: flex; - width: 1120px; - margin: 0 auto; + width: 100%; + /* margin: 0 auto; */ height: 51px; justify-content: space-between; align-items: center; - padding: 9px 0px; + /* padding: 9px 0px; */ } .top img { @@ -58,7 +59,7 @@ .panda { display: flex; justify-content: center; - margin: 0 auto 0 0; + margin: auto; padding-top: 200px; gap: 7px; max-width: 1920px; @@ -77,6 +78,11 @@ gap: 32px; } +.panda_left p { + width: 295px; + height: 112px; +} + .gotosee { border-radius: 40px; width: 357px; @@ -104,7 +110,7 @@ width: 988px; display: flex; align-items: center; - justify-content: space-between; + justify-content: space-around; border-radius: 12px; } @@ -118,17 +124,18 @@ .section_text { display: flex; flex-direction: column; + max-width: 362px; gap: 12px; padding-right: 24px; } .first { - padding-right: 66px; + padding-right: 24px; } .middle { align-items: flex-end; - padding: 0 0 0 66px; + padding: 0 0 0 24px; } .middle p { @@ -145,7 +152,8 @@ } .section_text :nth-child(2) { - height: 112px; + width: auto; + height: auto; color: var(--section-text-color); font-size: 40px; font-family: Pretendard, sans-serif; @@ -168,14 +176,15 @@ align-items: center; justify-content: center; padding-top: 143px; - margin: 0px auto 0 0; + /* margin: 0px auto 0 0; */ gap: 69px; max-width: 1920px; } .panda_bottom_left p { - padding-bottom: 60px; - gap: 10px; + width: auto; + height: auto; + color: var(--section-text-color); } .panda_bottom img { @@ -211,3 +220,150 @@ width: 116px; gap: 12px; } + +/* Tablet (768~1199px) */ +@media (max-width: 1199px) and (min-width: 768px) { + .top { + padding: 10px 0px; + } + .topheader { + margin: 0px 24px; + width: 100%; + } + .loginbutton { + height: 44px; + width: 104px; + font-size: 15px; + } + .panda { + padding-top: auto; + flex-direction: column; + align-items: center; + justify-content: flex-end; + } + .panda img { + width: 100%; + height: auto; + } + .panda_left { + align-items: center; + padding-bottom: 40px; + } + .panda_left p { + width: auto; + height: auto; + } + .section_card { + width: 100%; + flex-direction: column; + align-items: center; + padding: 20px; + } + .section_card img { + width: 100%; + height: auto; + } + section:nth-of-type(2) .section_card { + flex-direction: column-reverse; + } + .section_card p { + width: 100%; + height: auto; + } + .section_text { + text-align: left; /* 좌측정렬 기본 */ + } + .section_text.middle { + text-align: right; /* 두번째 카드만 우측정렬 */ + } + .panda_bottom { + flex-direction: column; + width: auto; + } + .panda_bottom p { + width: auto; + height: auto; + text-align: center; + } + .panda_bottom img { + margin-top: 40px; + width: 100%; + height: auto; + } + .footer { + padding: 32px 104px 64px; + } +} + +/* Mobile (375~767px) */ +@media (max-width: 767px) and (min-width: 375px) { + .top { + padding: 10px 0px; + } + .topheader { + margin: 0px 16px; + width: 100%; + } + .loginbutton { + height: 44px; + width: 104px; + font-size: 15px; + } + .panda { + padding-top: auto; + flex-direction: column; + align-items: center; + justify-content: flex-end; + } + .panda img { + width: 100%; + height: auto; + } + .panda_left { + align-items: center; + padding-bottom: 40px; + } + .panda_left p { + width: auto; + height: auto; + } + .section_card { + width: 100%; + flex-direction: column; + align-items: center; + padding: 20px; + } + .section_card img { + width: 100%; + height: auto; + } + section:nth-of-type(2) .section_card { + flex-direction: column-reverse; + } + .section_card p { + width: 100%; + height: auto; + } + .section_text { + text-align: left; /* 좌측정렬 기본 */ + } + .section_text.middle { + text-align: right; /* 두번째 카드만 우측정렬 */ + } + .panda_bottom { + flex-direction: column; + width: auto; + } + .panda_bottom p { + width: auto; + height: auto; + text-align: center; + } + .panda_bottom img { + width: 100%; + height: auto; + } + .footer { + padding: 32px 32px 64px; + } +}