Skip to content

[권새롬] Sprint22 스프린트 미션 3 #24

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

Open
rhdtls3562 wants to merge 1 commit into
base: Basic-권새롬
Choose a base branch
from
+119 −131
Open

[권새롬] Sprint22 스프린트 미션 3 #24

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
49 changes: 49 additions & 0 deletions css/join.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,3 +173,52 @@ aside.easy_log img {
text-decoration: underline;
color: var(--blue);
}

/* ========================================
반응형 스타일 (Responsive Styles)
======================================== */

/* Tablet: 768px 이상 ~ 1199px 이하 - PC와 동일한 디자인 유지 */
@media (min-width: 768px) and (max-width: 1199px) {
Copy link
Collaborator

@ByungyeonKim ByungyeonKim Dec 23, 2025

Choose a reason for hiding this comment

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

여기서 width 속성 값의 단위를 px 말고 rem으로도 설정해 볼 수 있겠네요. rem으로 만들면 어떤 장점이 있을지 고민해 보세요. 🤔

/* Tablet 사이즈에서도 PC와 동일한 디자인 유지 */
input {
width: 640px;
}

aside.easy_log {
width: 640px;
}
}

/* Mobile: 375px 이상 ~ 767px 이하 */
@media (min-width: 375px) and (max-width: 767px) {
.login-container {
padding: 60px 16px;
align-items: stretch;
Copy link
Collaborator

@ByungyeonKim ByungyeonKim Dec 23, 2025

Choose a reason for hiding this comment

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

align-items: stretch; 선언의 영향으로, 특정 화면에서 로고가 크게 표시 되고 있어요. png 이미지이기 때문에, 이렇게 확대가 될 경우 고해상도 모니터에서 이미지가 흐릿하게 보일 뿐만 아니라 서비스의 전문성, 신뢰성에도 영향이 갈 수 있어요.

로고는 고정 크기를 갖게 하거나, 더 다양한 화면 크기에 맞게 유연하게 반응하도록 수정하면 좋을 것 같아요. 🤓

스크린샷 2025-12-23 오후 6 42 32

}

form {
width: 100%;
max-width: 400px;
margin: 0 auto;
}

input {
width: 100%;
max-width: 400px;
}

aside.easy_log {
width: 100%;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}

.signup_link {
width: 100%;
max-width: 400px;
margin: 0 auto;
text-align: center;
}
}
49 changes: 49 additions & 0 deletions css/login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,3 +173,52 @@ aside.easy_log img {
text-decoration: underline;
color: var(--blue);
}

/* ========================================
반응형 스타일 (Responsive Styles)
======================================== */

/* Tablet: 768px 이상 ~ 1199px 이하 - PC와 동일한 디자인 유지 */
@media (min-width: 768px) and (max-width: 1199px) {
/* Tablet 사이즈에서도 PC와 동일한 디자인 유지 */
input {
width: 640px;
}

aside.easy_log {
width: 640px;
}
}

/* Mobile: 375px 이상 ~ 767px 이하 */
@media (min-width: 375px) and (max-width: 767px) {
.login-container {
padding: 60px 16px;
align-items: stretch;
}

form {
width: 100%;
max-width: 400px;
margin: 0 auto;
}

input {
width: 100%;
max-width: 400px;
}

aside.easy_log {
width: 100%;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}

.signup_link {
width: 100%;
max-width: 400px;
margin: 0 auto;
text-align: center;
}
}
137 changes: 6 additions & 131 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,72 +198,10 @@ footer > ul:nth-child(1) li:nth-child(1) {
반응형 스타일 (Responsive Styles)
======================================== */

/* 1920px 미만 - Large Desktop */
@media (max-width: 1919px) {
/* Tablet: 768px 이상 ~ 1199px 이하 */
@media (min-width: 768px) and (max-width: 1199px) {
header nav {
padding: 0 200px;
}
}

/* 1440px 미만 - Desktop */
@media (max-width: 1439px) {
header nav {
padding: 0 100px;
}

header img {
width: 140px;
}

.hero-content h1 {
font-size: 36px;
margin-bottom: 28px;
}

.hero-btn {
padding: 14px 100px;
font-size: 18px;
}

.hero-image img {
width: 450px;
}

.hero-inner {
gap: 30px;
}

main ul {
margin: 100px 0;
gap: 30px;
}

article ul li h2 {
font-size: 36px;
margin-bottom: 20px;
}

article ul li p {
font-size: 20px;
}

.con1 ul li:nth-child(2),
.con2 ul li:nth-child(1),
.con3 ul li:nth-child(2) {
padding: 50px;
height: 380px;
}

footer > ul:nth-child(1) {
padding-top: 30px;
padding-bottom: 80px;
}
}

/* 1024px 미만 - Tablet Landscape */
@media (max-width: 1023px) {
header nav {
padding: 0 50px;
padding: 0 24px;
}

header img {
Expand Down Expand Up @@ -344,14 +282,14 @@ footer > ul:nth-child(1) li:nth-child(1) {
}
}

/* 768px 미만 - Tablet Portrait */
@media (max-width: 767px) {
/* Mobile: 375px 이상 ~ 767px 이하 */
@media (min-width: 375px) and (max-width: 767px) {
header {
padding: 8px 0;
}

header nav {
padding: 0 24px;
padding: 0 16px;
}

header img {
Expand Down Expand Up @@ -453,66 +391,3 @@ footer > ul:nth-child(1) li:nth-child(1) {
}
}

/* 480px 미만 - Mobile */
@media (max-width: 479px) {
header nav {
padding: 0 16px;
}

header img {
width: 80px;
}

header nav .login-btn {
padding: 6px 16px;
font-size: 12px;
}

.hero {
padding: 20px 12px 0 12px;
padding-top: 70px;
}

.hero-content h1 {
font-size: 20px;
margin-bottom: 16px;
}

.hero-btn {
padding: 10px 40px;
font-size: 14px;
}

.hero-image img {
width: 220px;
}

main ul {
margin: 40px 0;
padding: 0 16px;
}

article ul li > .blue_txt {
font-size: 12px;
}

article ul li h2 {
font-size: 20px;
margin-bottom: 10px;
}

article ul li p {
font-size: 13px;
}

.con1 ul li:nth-child(2),
.con2 ul li:nth-child(1),
.con3 ul li:nth-child(2) {
padding: 24px 16px;
}

footer > ul:nth-child(1) {
padding: 24px 16px 40px;
gap: 16px;
}
}
15 changes: 15 additions & 0 deletions index.html
View file
Open in desktop
Copy link
Collaborator

@ByungyeonKim ByungyeonKim Dec 24, 2025

Choose a reason for hiding this comment

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

상단/하단 배너에서, 태블릿 화면은 텍스트와 이미지의 배치가 바뀌는 레이아웃이에요. 또한, 푸터 영역 폰트 크기를 하나로 통일시키는 건 어떨까요?

피그마 구현
피그마 구현

Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,21 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓</title>

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://pandamarket.com/" />
<meta property="og:title" content="판다 마켓" />
<meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
<meta property="og:image" content="https://pandamarket.com/img/hero-panda.png" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://pandamarket.com/" />
<meta property="twitter:title" content="판다 마켓" />
<meta property="twitter:description" content="일상의 모든 물건을 거래해보세요" />
<meta property="twitter:image" content="https://pandamarket.com/img/hero-panda.png" />

<link rel="stylesheet" href="/css/reset.css" />
<link rel="stylesheet" href="/css/main.css" />
<link
Expand Down