Skip to content

[오세진] sprint 3 #100

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 8 commits into from
Aug 6, 2025
Merged

[오세진] sprint 3 #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
85f1ba2
Style: 간편로그인 div 에서 ul로 변경
sejin5 Jul 14, 2025
eca1d79
Design: CSS color 변수명 변경
sejin5 Jul 14, 2025
194e14e
Style: input tag 속성 추가
sejin5 Jul 14, 2025
f6718b3
Design: 비밀번호 input img 속성 변경
sejin5 Jul 14, 2025
001e464
Design: main index tablet UI edit
sejin5 Aug 4, 2025
0658554
Design: main index UI mobile UI edit
sejin5 Aug 4, 2025
34f3214
Design: sign.css mobile UI edit
sejin5 Aug 4, 2025
7bbcf83
Feat: og meta add
sejin5 Aug 4, 2025
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
204 changes: 196 additions & 8 deletions css/main-style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
:root {
--primary-100: #3692ff;
--primary-200: #1967d6;
--primary-200: #1251aa;
--primary-300: #1251aa;
--gray-900: #111827;
--gray-800: #1f2937;
--gray-700: #374151;
Expand Down Expand Up @@ -71,21 +71,23 @@ header {
margin: 0 auto;
}

.top-title-txt {
width: 30%;
}

.show-items {
display: inline-block;
height: 56px;
border-radius: 40px;
padding: 16px 124px;
width: 100%;
text-align: center;
font-size: 20px;
font-weight: 600;
line-height: 32px;
line-height: 56px;
color: var(--gray-50, #f9fafb);
background-color: var(--primary-100, #3692ff);
}

.main-top > .container {
align-items: flex-start;
}

.container {
max-width: 1920px;
display: flex;
Expand All @@ -94,7 +96,7 @@ header {
}

.main-middle > .container {
width: 50%;
width: 65%;
background-color: #fcfcfc;
margin: 10% auto;
border-radius: 12px;
Expand Down Expand Up @@ -178,6 +180,20 @@ footer .footer-list {
margin: 0 200px;
}

.main-title {
font-size: 32px;
}

.main-describe {
font-size: 18px;
}
}

@media (min-width: 1200px) {
header .navi {
margin: 0 200px;
}

.main-point {
font-size: 12px;
}
Expand All @@ -190,3 +206,175 @@ footer .footer-list {
font-size: 18px;
}
}

@media (max-width: 1199px) and (min-width: 768px) {
header .navi {
margin: 0 24px;
padding: 12px 0;
}

.main-top {
height: 774px;
}

.container {
flex-direction: column;
justify-content: space-between;
height: 100%;
}

.invisible {
display: none;
}

.top-title-txt {
width: 100%;
margin-top: 10%;
text-align: center;
}

.show-items {
width: 50%;
}

.main-middle > .container {
width: 95%;
margin: 20px auto;
}

.container > .main-txt {
order: 2;
}

.container > .main-content-img {
order: 1;
}

.main-bottom {
margin-top: 10%;
height: 927px;
}

.bottom-txt {
margin-top: 30%;
text-align: center;
}

footer {
height: 160px;
}
Comment on lines +263 to +265
Copy link
Collaborator

@kiJu2 kiJu2 Aug 6, 2025

Choose a reason for hiding this comment

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

footer 또한 방금 코멘트와 동일합니다 😊


.footer-list {
padding: 20px 80px;
}
}

@media (max-width: 767px) and (min-width: 375px) {
Copy link
Collaborator

@kiJu2 kiJu2 Aug 6, 2025

Choose a reason for hiding this comment

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

굿굿 ! 반응형을 잘 적용하셨군요 👍👍

body {
overflow-x: hidden;
}

header .navi {
margin: 0 16px;
padding: 12px 0;
}
Comment on lines +277 to +280
Copy link
Collaborator

@kiJu2 kiJu2 Aug 6, 2025

Choose a reason for hiding this comment

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

(제안) header의 경우 한 문서에 여러개가 있을 수 있으므로 왠만하면 class로 만들어두는걸 추천드려봅니다 😉

클래스는 재사용이 가능하며, 자유롭게 태그에 스타일을 붙일 수 있어서 유지보수에 용이하므로 단순히 스타일을 위해서라면 class를 추천드려요 !

좀 더 자세히 🤔

유지보수가 어려워질 수 있어요.

특정 p 태그에만 다른 스타일을 적용하려면 추가적인 선택자를 작성하거나 기존 스타일을 덮어써야 하므로 유지보수가 어려워집니다.

태그 의미를 명확히 부여하기 어려워요.

스타일링을 태그에 직접 적용하면, 태그가 어떤 의미를 가지는지 어렵기에 가독성이 보다 좋지 못할 수 있어요.

만약 다음 코드의 스타일을 태그 선택자로만 지정한다면 ?

<p class="error-message">오류가 발생했습니다.</p>

물론 전역적인 것을 의미한다면 일정 허용될 수 있어요.

예를 들어서 p의 기본 마진을 없애고 싶다면 다음과 같이 작성할 수 있을거예요:

p {
    margin: 0;
}

그렇지만 특정 스타일을 지정하고 싶다면 다음과 같이 작성해볼 수 있어요:

.paragraph {
    font-size: 16px;
    color: #333;
}

.highlight {
    background-color: yellow;
}


.panda-icon {
display: none;
}

.main-top {
height: 540px;
}

.invisible {
display: none;
}

.container {
flex-direction: column;
justify-content: space-between;
height: 100%;
}

.top-title-txt {
width: 240px;
margin-top: 10%;
text-align: center;
}

.main-top > .container > .main-core-img {
width: 120%;
object-fit: contain;
overflow: hidden;
}
Comment on lines +306 to +310
Copy link
Collaborator Author

@sejin5 sejin5 Aug 4, 2025

Choose a reason for hiding this comment

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

figma를 기준으로 봤을때 일상의 모든 물건을 거래해 보세요 하단의 이미지가 PC, tablet에 비해서 조금 확장된것 처럼 보였씁니다. 그래서 120%로 width 값을 주었는데, 개발자 도구를 통해서 확인할때 저 이미지가 body width보다 더 튀어나올때도 있고, 아닐때도 있더라고요. 120%로 설정하지 않는게 더 나았을까요?

Copy link
Collaborator

@kiJu2 kiJu2 Aug 6, 2025

Choose a reason for hiding this comment

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

음 ~ 해당 사항은 디자이너분과 소통하면서 "확장을 의도한 것인지"를 먼저 확정하고 스타일링 해야될 것으로 보이네요 ! 😉
배경이미지를 의도한 것인지 아니면 이미지를 의도한 것인지도 알아두면 좋을 것 같네요 !

미션 진행 관점에서는 출력되는 UI가 유사하다면 문제 없을 것으로 사료됩니다. 😊


.main-core-img {
width: 100%;
}

.main-middle > .container {
width: 90%;
margin: 20% auto;
}

.main-core-title {
font-size: 32px;
}

.main-point,
.main-describe {
font-size: 16px;
}

.main-title {
font-size: 24px;
}

.container > .main-txt {
order: 2;
}

.container > .main-content-img {
order: 1;
}

.main-bottom {
margin-top: 10%;
}

.bottom-txt {
margin-top: 30%;
text-align: center;
}

.list-policy > a {
color: var(--gray-400, #9ca3af);
margin: 0 8px;
}

footer .footer-list {
display: grid;
grid-template-areas:
"policy sns"
". ."
"copyright .";
grid-template-columns: 1fr 1fr;
gap: 16px;
padding: 20px 16px;
align-items: center;
Comment on lines +356 to +365
Copy link
Collaborator

@kiJu2 kiJu2 Aug 6, 2025

Choose a reason for hiding this comment

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

크으 ~ 그리드를 잘 활용하셨네요 👍

}

.list-policy {
grid-area: policy;
}

.list-sns {
grid-area: sns;
justify-content: center;
}

.copyright {
grid-area: copyright;
}
}
38 changes: 33 additions & 5 deletions css/sign.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
:root {
--primary-100: #3692ff;
--primary-200: #1967d6;
--primary-200: #1251aa;
--primary-300: #1251aa;
--gray-900: #111827;
--gray-800: #1f2937;
--gray-700: #374151;
Expand Down Expand Up @@ -61,13 +61,20 @@ body {
}

.pwd-section {
position: relative;
display: flex;
background-color: var(--gray-100, #f3f4f6);
border-radius: 12px;
height: 54px;
margin: 20px 0;
align-items: center;
}

.pwd-visible {
position: absolute;
right: 5%;
bottom: 35px;
margin: 0 5px;
}

#user-pwd {
padding: 0 0 0 20px;
}

.login-btn {
Expand Down Expand Up @@ -122,3 +129,24 @@ body {
color: var(--primary-100, #3692ff);
text-decoration: underline;
}

@media (max-width: 767px) and (min-width: 375px) {
.container {
margin: 80px auto;
width: 100%;
max-width: 400px;
}

.logo {
width: 198px;
margin: 0 auto;
}

.panda-icon {
width: 100%;
}

.content {
padding: 0 20px;
}
}
Binary file added images/5d7d01ce3d5d3c8c.jpg
View file
Open in desktop
Copy link
Collaborator

@kiJu2 kiJu2 Aug 6, 2025

Choose a reason for hiding this comment

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

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 햄스터가 참 귀엽네요 😂😂

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 9 additions & 14 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@
<title>판다마켓</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/main-style.css" />
<meta property="og:image" content="./images/5d7d01ce3d5d3c8c.jpg" />
Copy link
Collaborator

@kiJu2 kiJu2 Aug 6, 2025

Choose a reason for hiding this comment

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

혹시 해당 이미지 정상적으로 동작이 될까요?

Suggested change
<meta property="og:image" content="./images/5d7d01ce3d5d3c8c.jpg" />
<meta property="og:image" content="/images/5d7d01ce3d5d3c8c.jpg" />

. 때문에 잘못된 경로로 인식하지 않을까 싶어서요. 🤔
js의 경우 ./를 하면 잘 인식하는데 html의 경우 {baseULR}./images처럼 동작되지 않을까 염려되어 확인 요청드립니다 😉

<meta property="og:title" content="판다 마켓" />
<meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
<meta property="og:url" content="https://www.codeit.kr" />
Copy link
Collaborator

@kiJu2 kiJu2 Aug 6, 2025

Choose a reason for hiding this comment

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

og:url은 세진님께서 배포하신 링크로 작성하시는게 올바릅니다 😉

Suggested change
<meta property="og:url" content="https://www.codeit.kr" />
<meta property="og:url" content="https://세진님판다마켓URL" />

</head>
<body>
<header class="centered">
Expand All @@ -23,10 +27,7 @@
<section class="main-top colored">
<div class="container centered">
<div class="top-title-txt">
<h1 class="main-core-title">
일상의 모든 물건을 <br />
거래해 보세요
</h1>
<h1 class="main-core-title">일상의 모든 물건을 거래해 보세요</h1>
<a class="show-items" href="items.html">구경하러 가기</a>
</div>
<img class="main-core-img" src="images/img-main-header.svg" alt="판다마켓 메인페이지 상단 이미지" />
Expand All @@ -37,10 +38,7 @@ <h1 class="main-core-title">
<img class="main-content-img" src="images/img-main-01.svg" />
<div class="main-txt">
<span class="main-point">Hot item</span>
<h2 class="main-title">
인기 상품을 <br />
확인해 보세요
</h2>
<h2 class="main-title">인기 상품을 <br class="invisible" />확인해 보세요</h2>
Copy link
Collaborator

@kiJu2 kiJu2 Aug 6, 2025

Choose a reason for hiding this comment

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

invisible이 반응형에 따라 활성화 되는게 의도된거라면 그 조건도 함께 이름에 포함해볼 수 있습니다 !

Suggested change
<h2 class="main-title">인기 상품을 <br class="invisible" />확인해 보세요</h2>
<h2 class="main-title">인기 상품을 <br class="mobile-invisible" />확인해 보세요</h2>

혹은 sm-invisible, md-invisible과 같이 작성해볼 수도 있겠네요 😊

<p class="main-describe">
가장 HOT한 중고거래 물품을<br />
판다 마켓에서 확인해 보세요
Expand All @@ -50,10 +48,7 @@ <h2 class="main-title">
<section class="container centered">
<div class="main-txt text-right">
<span class="main-point">Search</span>
<h2 class="main-title">
구매를 원하는 <br />
상품을 검색하세요
</h2>
<h2 class="main-title">구매를 원하는 <br class="invisible" />상품을 검색하세요</h2>
<p class="main-describe">
구매하고 싶은 물품은 검색해서<br />
쉽게 찾아보세요
Expand All @@ -66,7 +61,7 @@ <h2 class="main-title">
<div class="main-txt">
<span class="main-point">Register</span>
<h2 class="main-title">
판매를 원하는 <br />
판매를 원하는 <br class="invisible" />
상품을 등록하세요
</h2>
<p class="main-describe">
Expand All @@ -78,7 +73,7 @@ <h2 class="main-title">
</div>
<section class="main-bottom colored">
<div class="container centered">
<h2 class="main-core-title">
<h2 class="main-core-title bottom-txt">
믿을 수 있는 <br />
판다마켓 중고거래
</h2>
Expand Down
Loading
Loading