Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
34 changes: 32 additions & 2 deletions .github/basictag.css
Copy link
Collaborator

Choose a reason for hiding this comment

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

제가 지난 PR 에서 놓친 것 같은데요, 현재 프로젝트 구조가 다소 부적절한 것 같습니다.
.github 디렉토리는 GitHub 전용 설정용 폴더입니다 (e.g., workflows/, ISSUE_TEMPLATE/ 등).
html, css 같은 소스 파일은 일반 웹 프로젝트 폴더로 변경해주셔야 합니다. 아래 구조를 참고해주세요!

├── index.html
├── login.html
├── signup.html
├── css/
│   ├── reset.css
│   ├── base.css
│   ├── home.css
│   ├── form.css
├── images/
│   ├── logo.png
│   ├── icon_visibility_on.svg
│   ├── icon_visibility_off.svg
├── js/
│   └── (login.js 등 추가되면 여기에)

Copy link
Collaborator

Choose a reason for hiding this comment

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

또한, 현재 CSS 파일이 많지만 이름이 구체적이지 않고 역할이 겹쳐 보입니다.
basictag.css 는 어떤 역할인지 불명확하므로, reset.css, base.css 등 명확한 이름으로 수정해주세요!
style.css 도 메인인지 전체인지 애매하므로 home.css 또는 main.css로 바뀌면 좋겠습니다.
login_signup.css와 같이 파일에 여러 페이지명을 나열하는 방식은 보편적인 방식은 아닌 것 같습니다. form.css 로 수정되면 좋을 것 같습니다.

Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -30,6 +58,8 @@ figure p {
}

footer {
display: flex;
justify-content: space-between;
background-color: #111827;
height: 160px;
}
Expand Down
Binary file removed .github/img/Property 1=lg.png
Binary file not shown.
File renamed without changes
19 changes: 10 additions & 9 deletions .github/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@
<body>
<header class="top">
<div class="topheader">
<a href=""><img src="img/Property 1=lg.png" alt="판다마켓 로고" /></a>
<a href=""><img src="img/logo.png" alt="판다마켓 로고" /></a>
<a href="./login.html" class="loginbutton">로그인</a>
</div>
</header>
<figure>
<div class="panda">
<div class="panda_left">
<p>일상의 모든 물건을<br />거래해 보세요</p>
<p>일상의 모든 물건을 거래해 보세요</p>
<a href="./items.html" class="gotosee">구경하러 가기</a>
</div>
<img src="img/Img_home_top.png" alt="pandamarket" />
Expand All @@ -34,17 +34,17 @@
<img src="img/Img_home_01.png" alt="Hot item" />
<div class="section_text first">
<p>Hot item</p>
<p>인기 상품을<br />확인해 보세요</p>
<p>가장 HOT한 중고거래 물품을<br />판다 마켓에서 확인해 보세요</p>
<p>인기 상품을 확인해 보세요</p>
<p>가장 HOT한 중고거래 물품을 <br />판다 마켓에서 확인해 보세요</p>
</div>
</div>
</section>
<section>
<div class="section_card">
<div class="section_text middle">
<p>Search</p>
<p>구매를 원하는<br />상품을 검색하세요</p>
<p>구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요</p>
<p>구매를 원하는 상품을 검색하세요</p>
<p>구매하고 싶은 물품은 검색해서 <br />쉽게 찾아보세요</p>
</div>
<img src="img/Img_home_02.png" alt="Search" />
</div>
Expand All @@ -54,15 +54,16 @@
<img src="img/Img_home_03.png" alt="Register" />
<div class="section_text last">
<p>Register</p>
<p>판매를 원하는<br />상품을 등록하세요</p>
<p>어떤 물건이든 판매하고 싶은 상품을<br />쉽게 등록하세요</p>
<p>판매를 원하는 상품을 등록하세요</p>
<p>어떤 물건이든 판매하고 싶은 상품을 <br />쉽게 등록하세요</p>
</div>
</div>
</section>
<figure>
<div class="panda_bottom">
<div class="panda_bottom_left">
<p>믿을 수 있는<br />판다마켓 중고 거래</p>
<p>믿을 수 있는</p>
<p>판다마켓 중고 거래</p>
</div>
<img src="img/Img_home_bottom.png" alt="pandamarket bottom" />
</div>
Expand Down
9 changes: 4 additions & 5 deletions .github/login.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@
<body>
<main class="login-container">
<header class="logo">
<a href="./index.html"><img src="./img/logo.png" alt="" /></a>
<a href="./index.html"
><img src="./img/logo.png" alt="판다마켓로고"
/></a>
</header>
<form class="login-form" action="#" method="post">
<div class="form-group">
Expand All @@ -35,10 +37,7 @@
required
/>
<button type="button" class="toggle-password">
<img
src="./img/btn_visibility_off_24px.svg"
alt="비밀번호 보기"
/>
<img src="./img/visibility_off.svg" alt="비밀번호 보기" />
</button>
</div>
</div>
Expand Down
38 changes: 30 additions & 8 deletions .github/login_signup.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ body {
padding: 20px;
}

:root {
--primary-color: #3692ff;
--background-color: #f3f4f6;
}

.logo img {
width: 396px;
height: 132px;
Expand Down Expand Up @@ -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;
Expand All @@ -70,7 +75,7 @@ input {

input:focus {
outline: none;
background-color: #f3f4f6d0;
background-color: var(--background-color);
}

input[type="password"]::-ms-reveal {
Expand All @@ -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;
}

Expand Down Expand Up @@ -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;
Expand All @@ -131,7 +136,7 @@ input[type="password"]::-ms-reveal {
}

.login-button:hover {
background: #3692ff;
background: var(--primary-color);
}

.ez-login-container {
Expand All @@ -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;
Expand Down Expand Up @@ -183,7 +188,24 @@ input[type="password"]::-ms-reveal {
}

.help-text a {
color: #3692ff;
color: var(--primary-color);
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;
Copy link
Collaborator

Choose a reason for hiding this comment

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

padding 속성에 auto는 유효하지 않은 값입니다.
브라우저가 무시하는 값이니 padding: 0 16px; 로 수정 부탁드립니다.

}
.logo a {
display: flex;
align-items: center;
justify-content: center;
}
.logo img {
width: 50%;
height: 50%;
}
}
13 changes: 6 additions & 7 deletions .github/signup.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@
<body>
<main class="register-container">
<header class="logo">
<a href="./index.html"><img src="./img/logo.png" alt="" /></a>
<a href="./index.html"
><img src="./img/logo.png" alt="판다마켓로고"
/></a>
</header>
<form class="register-form" action="#" method="post">
<div class="form-group">
Expand Down Expand Up @@ -47,10 +49,7 @@
required
/>
<button type="button" class="toggle-password">
<img
src="./img/btn_visibility_off_24px.svg"
alt="비밀번호 보기"
/>
<img src="./img/visibility_off.svg" alt="비밀번호 보기" />
</button>
</div>
</div>
Expand All @@ -59,13 +58,13 @@
<label for="confirm-password">비밀번호 확인</label>
<div class="confirm-input">
<input
type="confirm-password"
type="password"
id="confirm-password"
name="confirm-password"
required
/>
<button type="button" class="toggle-password">
<img src="./img/btn_visibility_on_24px.svg" alt="비밀번호 보기" />
<img src="./img/visibility_on.svg" alt="비밀번호 보기" />
</button>
</div>
</div>
Expand Down
Loading
Loading