Skip to content

[이진태]스프린트과제 #18

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
Irelander merged 1 commit into from
Apr 5, 2026
Merged

[이진태]스프린트과제 #18

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
Binary file added .DS_Store
View file
Open in desktop
Copy link
Copy Markdown
Collaborator

@Irelander Irelander Apr 5, 2026

Choose a reason for hiding this comment

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

macOS 시스템 파일입니다. .gitignore 파일을 프로젝트 루트에 만들어서 추가하면 좋아요 :)

Copy link
Copy Markdown
Collaborator Author

@jeantae jeantae Apr 6, 2026

Choose a reason for hiding this comment

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

이거는 제가 따로 검색해서 찾아보겠습니다 이해가 잘 안된부분이라서 검색해볼게요!

Binary file not shown.
182 changes: 182 additions & 0 deletions home.css
View file
Open in desktop
Copy link
Copy Markdown
Collaborator

@Irelander Irelander Apr 5, 2026

Choose a reason for hiding this comment

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

해당 파일에서 bodder: 1px; 이라는 잘못된 문법이 반복되고 있습니다.

CSS border 속성은 두께 + 스타일 + 색상을 모두 지정해야 합니다. 현재 형태는 유요하지 않아서 화면에 표시되지 않았을꺼 같아요 :)

border: 1px solid #ccc;

위와 같이 수정이 필요합니다 !

Copy link
Copy Markdown
Collaborator Author

@jeantae jeantae Apr 6, 2026

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
@@ -0,0 +1,182 @@
* {
box-sizing: border-box;
}
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0px 200px;
}
.nav-left {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.logo {
color: #3692ff;
font-size: 40px;
font-weight: 700;
text-decoration: none;
}
body {
margin-top: 70px;
background: color(white);
Copy link
Copy Markdown
Collaborator

@Irelander Irelander Apr 5, 2026

Choose a reason for hiding this comment

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

문법이 잘못되었어요 ㅎㅎ

background: color(white)에서 color라는 함수는 존재하지 않습니다. ㅠ

혹 CSS Variable을 사용하려고 하신걸까요 ?

Copy link
Copy Markdown
Collaborator Author

@jeantae jeantae Apr 6, 2026

Choose a reason for hiding this comment

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

배경이 원래 흰색인걸 까먹궄ㅋㅋㅋㅋㅋㅋ 그냥 바꾼거 같아요...수정하도록 하겠습니다!

}
.sky-bg {
border: 1px;
width: 100%;
height: 540px;
background: #cfe5ff;
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
width: 100%;
display: flex;
align-items: center;
height: 540px;
}
.box1 img {
align-self: flex-end;
}
.text {
display: flex;
flex-direction: column;
gap: 20px;
}
.text1 {
border: 1px;
color: var(--Secondary-700, #374151);
font-size: 40px;
font-weight: 700;
line-height: 140%;
text-decoration: none;
}
.text2 {
border: 1px;
display: flex;
height: 56px;
padding: 16px 124px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 40px;
background: var(--brand-blue, #3692ff);
color: white;
font-size: 20px;
text-decoration: none;
}
.box2 {
border: 1px;
width: 100%;
height: 540px;
display: flex;
justify-content: center;
align-items: center;
}
.box3 {
border: 1px;
width: 100%;
height: 540px;
display: flex;
justify-content: center;
align-items: center;
}
.box4 {
border: 1px;
width: 100%;
height: 540px;
display: flex;
justify-content: center;
align-items: center;
}
.box5 {
border: 1px;
width: 100%;
height: 540px;
background: #cfe5ff;
display: flex;
justify-content: center;
align-items: center;
}
.box5 img {
align-self: flex-end;
}
.text3 {
color: var(--Secondary-700, #374151);
font-size: 40px;
font-weight: 700;
line-height: 140%;
}
.container {
max-width: 1920px;
margin: 0 auto;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.login-button {
display: flex;
width: 128px;
height: 48px;
justify-content: center;
align-items: center;
border-radius: 8px;
background: var(--Primary-100, #3692ff);
color: white;
text-decoration: none;
}
.login-button:hover {
background: #d4f1fa;
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 160px;
padding: 32px 200px;
background: var(--Secondary-900, #111827);
}
.copyright {
color: var(--Secondary-400, #9ca3af);
font-size: 16px;
}
.footer-menu {
display: flex;
gap: 24px;
}

.footer-link {
color: var(--Secondary-200, #e5e7eb);
text-decoration: none;
}

.footer-link:hover {
color: #222;
text-decoration: underline;
}
.sns-links {
display: flex;
gap: 12px;
}

.sns-icon {
width: 20px;
height: 20px;
cursor: pointer;
}

.sns-icon:hover {
filter: brightness(0.7);
}
105 changes: 105 additions & 0 deletions home.html
View file
Open in desktop
Copy link
Copy Markdown
Collaborator

@Irelander Irelander Apr 5, 2026

Choose a reason for hiding this comment

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

한글 폴더명은 안쓰는 습관을 들여두시면 좋아요 :)

src="./사진파일/돋보기.png"

사진파일 → images 또는 assets로 변경해서 쓰시는걸 권장드려요
한글 폴더명은 협업 시 인코딩 문제를 일으킬 수 있습니다.

Copy link
Copy Markdown
Collaborator Author

@jeantae jeantae Apr 6, 2026

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
@@ -0,0 +1,105 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓</title>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="./home.css" />
</head>
<body>
<nav class="navbar">
<div class="nav-left">
<a href="/" class="logo-wrap">
<img
src="./사진파일/판다 얼굴.svg"
alt="판다마켓 로고"
/>
<a class="logo">판다마켓</a>
</a>
</div>

<div class="nav-right">
<a href="./login.html" class="login-button">로그인</a>
</div>
</nav>

<div class="sky-bg">
<div class="container">
<section class="box1">
<div class="text">
<h1 class="text1">
일상의 모든 물건을 <br />
거래해 보세요
</h1>
<a href="/items" class="text2">구경하러 가기</a>
</div>
<img src="./사진파일/판다이미지.png" alt="머쓱판다" />
</section>
</div>
</div>
<div class="box2">
<img src="./사진파일/인기상품.png.png" alt="인기상품" />
</div>
<div class="box3">
<img src="./사진파일/돋보기.png.png" alt="돋보기" />
</div>
<div class="box4">
<img src="./사진파일/상품등록.png.png" alt="상품등록" />
</div>
<div class="box5">
<h1 class="text3">
믿을 수 있는 <br />
판다마켓 중고 거래
</h1>
<img src="./사진파일/하단판다.png.png" alt="하단판다" />
Comment on lines +42 to +55
Copy link
Copy Markdown
Collaborator

@Irelander Irelander Apr 5, 2026

Choose a reason for hiding this comment

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

이미지 파일들에 확장자가 중복이 되어 있는거 같아요! 중복제거해주는게 좋습니다.

Copy link
Copy Markdown
Collaborator Author

@jeantae jeantae Apr 6, 2026

Choose a reason for hiding this comment

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

넵 찾아서 수정하도록 하겠습니다! 감사합니다~

</div>
<footer class="footer">
<span class="copyright">codeit-2026</span>

<nav class="footer-menu">
<a href="/privacy" class="footer-link">Privacy Policy</a>
<a href="/faq" class="footer-link">FAQ</a>
</nav>

<div class="sns-links">
<a
href="https://facebook.com"
target="_blank"
rel="noopener noreferrer"
>
<img
src="./사진파일/facebook-icon.png.png"
alt="페이스북"
class="sns-icon"
/>
</a>
<a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
<img
src="./사진파일/twitter-icon.png.png"
alt="트위터"
class="sns-icon"
/>
</a>
<a href="https://youtube.com" target="_blank" rel="noopener noreferrer">
<img
src="./사진파일/youtube-icon.png.png"
alt="유튜브"
class="sns-icon"
/>
</a>
<a
href="https://instagram.com"
target="_blank"
rel="noopener noreferrer"
>
<img
src="./사진파일/instagram-icon.png.png"
alt="인스타그램"
class="sns-icon"
/>
</a>
</div>
</footer>
</body>
</html>
Loading