Skip to content

[김현화] sprint4 #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kiJu2 merged 1 commit into from
Jul 24, 2025
Merged

[김현화] sprint4 #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 60 additions & 15 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
@import url(fonts.css);

body {
width: calc(100vw - calc(100vw - 100%));
Copy link
Collaborator

@kiJu2 kiJu2 Jul 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

혹시 해당 스타일은 어떤 의미가 있는걸까요?

font-size: var(--common);
font-weight: 500;
font-family: "Pretendard-Regular";
Expand Down Expand Up @@ -34,7 +35,7 @@ body {
background-color: var(--blue300);
}

.button:visited {
.button:visited:not(.full-button) {
background-color: var(--gray400);
}

Expand All @@ -47,6 +48,11 @@ body {
height: 4.8rem;
}

.disabled-button {
background-color: var(--gray400) !important;
cursor: default;
}

/* 767px */
@media all and (max-width: 47.9375rem) {
.large-button {
Expand All @@ -56,14 +62,15 @@ body {

.logo {
img {
content: url("../image/logo.svg");
content: url("../images/logo.svg");
}
}

.inner {
margin: 0 auto;
padding: 0 4.5rem;
width: 100%;
width: calc(100vw - calc(100vw - 100%));
max-width: 120rem;
}

Expand Down Expand Up @@ -247,7 +254,6 @@ body {

/* 768~1199px */
@media all and (max-width: 74.9375rem) {

.inner,
.header .inner {
padding: 0 2.4rem;
Expand Down Expand Up @@ -351,7 +357,7 @@ body {
@media all and (max-width: 47.9375rem) {
.logo {
img {
content: url("../image/m-logo.svg");
content: url("../images/m-logo.svg");
}
}

Expand Down Expand Up @@ -437,12 +443,13 @@ body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: calc(100vw - calc(100vw - 100%));
height: 100vh;
min-height: 58rem;
min-height: fit-content;
}

.form-wrap {
padding: 8rem 0;
width: 64rem;
}

Expand Down Expand Up @@ -472,6 +479,7 @@ body {
.input-box {
display: flex;
align-items: center;
position: relative;
width: 100%;
height: 5.6rem;
background-color: var(--gray100);
Expand All @@ -492,16 +500,38 @@ body {
outline: 0 none;
}

.input-box input:not([type="checkbox"]).err {
border: 1px solid var(--red) !important;
}

.input-box input:not([type="checkbox"]):focus {
border: 1px solid var(--blue200);
}

.check-label {
position: relative;
position: absolute;
right: 1rem;
top: 50%;
width: 4rem;
height: 4rem;
cursor: pointer;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}

.check-label::before {
position: absolute;
top: -1rem;
right: 2.4rem;
content: url("../image/hidden.svg");
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
content: url("../images/hidden.svg");
}

.show-toggle-btn .checkbox {
Expand All @@ -513,20 +543,29 @@ body {
font-size: 1px;
}

.show-toggle-btn .checkbox+.check-label::after {
.show-toggle-btn .checkbox:focus + .check-label {
border: 2px solid var(--gray900);
border-radius: 0.5rem;
-webkit-border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
-ms-border-radius: 0.5rem;
-o-border-radius: 0.5rem;
}

.show-toggle-btn .checkbox + .check-label::after {
overflow: hidden;
position: absolute;
width: 0;
height: 0;
font-size: 1px;
}

.show-toggle-btn .checkbox+.check-label::after {
.show-toggle-btn .checkbox + .check-label::after {
content: "입력 보기";
}

.show-toggle-btn .checkbox:checked+.check-label::before {
content: url("../image/show.svg");
.show-toggle-btn .checkbox:checked + .check-label::before {
content: url("../images/show.svg");
}

.full-button {
Expand Down Expand Up @@ -582,6 +621,12 @@ body {
-moz-text-decoration-color: var(--blue100);
}

.alert-box {
margin-top: 0.8rem;
font-size: var(--small);
color: var(--red);
}

/* 767px */
@media all and (max-width: 47.9375rem) {
.logo-title {
Expand All @@ -602,4 +647,4 @@ body {
margin-bottom: 0.8rem;
font-size: calc(var(--large) - 0.2rem);
}
}
}
2 changes: 2 additions & 0 deletions css/variable.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@
--gray200: #E5E7EB;
--gray100: #F3F4F6;
--gray50: #F9FAFB;

--red:#ff0000;
}


Expand Down
4 changes: 2 additions & 2 deletions faq.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
<meta property="og:type" content="website" />
<meta property="og:title" content="판다마켓" />
<meta property="og:description" content="일상의 모든 거래" />
<meta property="og:image" content="./image/thumb.png" />
<meta property="og:image" content="./images/thumb.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />
Expand All @@ -45,7 +45,7 @@
<meta property="twitter:title" content="판다마켓" />
<meta property="twitter:description" content="일상의 모든 물건을 거래해보세요"
/>
<meta property="twitter:image" content="./image/thumb.png" />
<meta property="twitter:image" content="./images/thumb.png" />
<meta property="twitter:image:type" content="image/png" />
<meta property="twitter:image:width" content="600" />
<meta property="twitter:image:height" content="315" />
Expand Down
0 image/Img_home_01.png → images/Img_home_01.png
View file
Open in desktop
File renamed without changes
0 image/Img_home_02.png → images/Img_home_02.png
View file
Open in desktop
File renamed without changes
0 image/Img_home_03.png → images/Img_home_03.png
View file
Open in desktop
File renamed without changes
0 image/Img_home_bottom.png → images/Img_home_bottom.png
View file
Open in desktop
File renamed without changes
0 image/Img_home_top.png → images/Img_home_top.png
View file
Open in desktop
File renamed without changes
0 image/facebook.svg → images/facebook.svg
View file
Open in desktop
File renamed without changes
0 image/google.svg → images/google.svg
View file
Open in desktop
File renamed without changes
0 image/hidden.svg → images/hidden.svg
View file
Open in desktop
File renamed without changes
0 image/instagram.svg → images/instagram.svg
View file
Open in desktop
File renamed without changes
0 image/kakao.svg → images/kakao.svg
View file
Open in desktop
File renamed without changes
0 image/login_page_logo.png → images/login_page_logo.png
View file
Open in desktop
File renamed without changes
0 image/logo.svg → images/logo.svg
View file
Open in desktop
File renamed without changes
0 image/m-logo.svg → images/m-logo.svg
View file
Open in desktop
File renamed without changes
0 image/show.svg → images/show.svg
View file
Open in desktop
File renamed without changes
0 image/thumb.png → images/thumb.png
View file
Open in desktop
File renamed without changes
0 image/x.svg → images/x.svg
View file
Open in desktop
File renamed without changes
0 image/youtube.svg → images/youtube.svg
View file
Open in desktop
File renamed without changes
24 changes: 12 additions & 12 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
<meta property="og:type" content="website" />
<meta property="og:title" content="판다마켓" />
<meta property="og:description" content="일상의 모든 거래" />
<meta property="og:image" content="./image/thumb.png" />
<meta property="og:image" content="./images/thumb.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />
Expand All @@ -45,7 +45,7 @@
<meta property="twitter:title" content="판다마켓" />
<meta property="twitter:description" content="일상의 모든 물건을 거래해보세요"
/>
<meta property="twitter:image" content="./image/thumb.png" />
<meta property="twitter:image" content="./images/thumb.png" />
<meta property="twitter:image:type" content="image/png" />
<meta property="twitter:image:width" content="600" />
<meta property="twitter:image:height" content="315" />
Expand All @@ -61,7 +61,7 @@
<div class="inner">
<a class="logo" href="/">
<h1>
<img src="./image/logo.svg" alt="판다 마켓" />
<img src="./images/logo.svg" alt="판다 마켓" />
</h1>
</a>
<a class="button medium-button login-button" href="login.html">
Expand All @@ -82,7 +82,7 @@ <h2 class="visual-title">
<a class="button large-button" href="items.html">구경하러 가기</a>
</div>
<div class="img-box">
<img src="./image/Img_home_top.png" alt="" />
<img src="./images/Img_home_top.png" alt="" />
</div>
</div>
</div>
Expand All @@ -92,7 +92,7 @@ <h2 class="visual-title">
<div class="card-wrap">
<article class="card">
<div class="img-box">
<img src="./image/Img_home_01.png" alt="" />
<img src="./images/Img_home_01.png" alt="" />
</div>
<div class="text-box">
<span class="title">Hot item</span>
Expand All @@ -108,7 +108,7 @@ <h3 class="visual-title">
</article>
<article class="card">
<div class="img-box">
<img src="./image/Img_home_02.png" alt="" />
<img src="./images/Img_home_02.png" alt="" />
</div>
<div class="text-box">
<span class="title">Search</span>
Expand All @@ -124,7 +124,7 @@ <h3 class="visual-title">
</article>
<article class="card">
<div class="img-box">
<img src="./image/Img_home_03.png" alt="" />
<img src="./images/Img_home_03.png" alt="" />
</div>
<div class="text-box">
<span class="title">Register</span>
Expand All @@ -150,7 +150,7 @@ <h3 class="visual-title">
>
</div>
<div class="img-box">
<img src="./image/Img_home_bottom.png" alt="" />
<img src="./images/Img_home_bottom.png" alt="" />
</div>
</div>
</div>
Expand All @@ -170,22 +170,22 @@ <h3 class="visual-title">
<ul>
<li>
<a href="https://www.facebook.com/" target="_blank"
><img src="./image/facebook.svg" alt="페이스북"
><img src="./images/facebook.svg" alt="페이스북"
/></a>
</li>
<li>
<a href="https://x.com/" target="_blank"
><img src="./image/x.svg" alt="x"
><img src="./images/x.svg" alt="x"
/></a>
</li>
<li>
<a href="https://www.youtube.com/" target="_blank"
><img src="./image/youtube.svg" alt="유튜브"
><img src="./images/youtube.svg" alt="유튜브"
/></a>
</li>
<li>
<a href="https://www.instagram.com/?hl=ko" target="_blank"
><img src="./image/instagram.svg" alt="인스타그램"
><img src="./images/instagram.svg" alt="인스타그램"
/></a>
</li>
</ul>
Expand Down
4 changes: 2 additions & 2 deletions items.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
<meta property="og:type" content="website" />
<meta property="og:title" content="판다마켓" />
<meta property="og:description" content="일상의 모든 거래" />
<meta property="og:image" content="./image/thumb.png" />
<meta property="og:image" content="./images/thumb.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />
Expand All @@ -45,7 +45,7 @@
<meta property="twitter:title" content="판다마켓" />
<meta property="twitter:description" content="일상의 모든 물건을 거래해보세요"
/>
<meta property="twitter:image" content="./image/thumb.png" />
<meta property="twitter:image" content="./images/thumb.png" />
<meta property="twitter:image:type" content="image/png" />
<meta property="twitter:image:width" content="600" />
<meta property="twitter:image:height" content="315" />
Expand Down
4 changes: 4 additions & 0 deletions js/login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import {passwordShow, formCheck} from "./modules.js";

passwordShow();
formCheck();
Loading
Loading