Skip to content

[임영주] sprint1 #9

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
merged 1 commit into from
Aug 12, 2024
Merged

[임영주] sprint1 #9

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
19 changes: 19 additions & 0 deletions faq.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>판다마켓 - FAQ</title>
<link rel="icon" href="images/logo/favicon.ico"/>
<link
rel="stylesheet"
as="style"
crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"/>
<link rel="stylesheet" href="styles/global.css"/>
</head>
<body>
<h1>임시 FAQ 페이지</h1>

</body>
</html>
Binary file added images/home/bottom-banner-image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/home/feature1-image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/home/feature2-image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/home/feature3-image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/home/hero-image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/logo/favicon.ico
View file
Open in desktop
Binary file not shown.
Binary file added images/logo/panda-market-logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions images/social/facebook-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions images/social/instagram-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions images/social/twitter-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions images/social/youtube-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
123 changes: 123 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>판다마켓</title>
<link rel="icon" href="images/logo/favicon.ico" />
<link
rel="stylesheet"
as="style"
crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
/>
<link rel="stylesheet" href="styles/global.css" />
<link rel="stylesheet" href="styles/home.css" />
</head>
<body>
<header>
<a href="/">
<img src="images/logo/panda-market-logo.png"
alt="판타마켓 홈"
width="153">
</a>
<a href="login.html" id="loginLinkButton"class="button">로그인</a>
</header>
<main>
<section id="hero" class="banner">
<div class="wrapper">
<h1>
일상의 모든 물건을<br />
거래해 보세요
</h1>
<a href="items.html" class="button pill-button">구경하러 가기</a>
</div>
</section>

<section id="features" class="wrapper">
<div class="feature">
<img
src="images/home/feature1-image.png"
alt="인기 상품"
width="50%"
/>
<div class="feature-content">
<h2 class="feature-tag">Hot item</h2>
<h1>인기 상품을<br />확인해 보세요</h1>
Copy link
Collaborator

Choose a reason for hiding this comment

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

P2:
한 페이지안에서 h1, h2 태그는 여러개 쓰지 않는 것을 추천드립니다.
h1, h2 태그는 각각 하나씩만을 사용하시고 h3부터 사용하시면 좋을 것 같습니다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#avoid_using_multiple_h1_elements_on_one_page

<p class="feature-description">
가장 Hot한 중고거래 물품을<br /> 판다마켓에서 확인해 보세요
</p>
</div>
</div>
<div class="feature">
<div class="feature-content">
<h2 class="feature-tag">Search</h2>
<h1>구매를 원하는<br />상품을 검색하세요</h1>
<p class="feature-description">
구매하고 싶은 물품은 검색해서
<br />쉽게 찾아보세요
</p>
</div>
<img
src="images/home/feature2-image.png"
alt="검색 기능"
width="50%"
/>
</div>
<div class="feature">
<img
src="igmes/home/feature3-imge.png"
Copy link
Collaborator

Choose a reason for hiding this comment

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

P2:

Suggested change
src="igmes/home/feature3-imge.png"
src="images/home/feature3-image.png"

alt="판매 상품 목록"
width="50%"
/>
<div>
<h2 class="feature-tag">Register</h2>
<h1>판매를 원하는<br />상품을 등록하세요</h1>
<p class="feature-description">
어떤 물건이든 판매하고 싶은 상품을
<br />쉽게 등록하세요
</p>
</div>
</div>
</section>

<section id="bottomBanner" class="banner">
<div class="wrapper">
<h1>
믿을 수 있는
<br />
판다마켓 중고거래
</h1>
</div>
</section>
</main>

<footer>
<div>©codeit - 2024</div>
<div id="footerMenu">
<a href="privacy.html">Privacy Policy</a>
<a href="faq.html">FAQ</a>
</div>
<div id="socialMedia">
<a
href="https://www.facebook.com/"
target="_blank"
rel="noopener noreferrer"
><img src="images/social/facebook-logo.svg" alt="페이스북" width="20"/></a>
<a
href="https://www.twitter.com/" target="_blank" rel="noopener noreferrer"
><img src="images/social/twitter-logo.svg" alt="트위터" width="20"/></a>
<a
href="https://www.instagram.com/"
target="_blank"
rel="noopener noreferrer"
><img src="images/social/instagram-logo.svg" alt="인스타그램" width="20"/></a>
<a
href="https://www.youtube.com/"
target="_blank"
rel="noopener noreferrer"
><img src="images/social/youtube-logo.svg" alt="유튜브" width="20"/></a>
</div>
</footer>
</body>
</html>
20 changes: 20 additions & 0 deletions items.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓 - 상품 리스트</title>
<link rel="icon" href="images/logo/favicon.ico" />
<link
rel="stylesheet"
as="style"
crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
/>
<link rel="stylesheet" href="styles/global.css" />
</head>

<body>
<h1>임시 상품 리스트 페이지</h1>
</body>
</html>
20 changes: 20 additions & 0 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓 - 로그인</title>
<link rel="icon" href="images/logo/favicon.ico" />
<link
rel="stylesheet"
as="style"
crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
/>
<link rel="stylesheet" href="styles/global.css" />
</head>

<body>
<h1>임시 로그인 페이지</h1>
</body>
</html>
20 changes: 20 additions & 0 deletions privacy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓 - 이용약관</title>
<link rel="icon" href="images/logo/favicon.ico" />
<link
rel="stylesheet"
as="style"
crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
/>
<link rel="stylesheet" href="styles/global.css" />
</head>

<body>
<h1>임시 이용약관 페이지</h1>
</body>
</html>
103 changes: 103 additions & 0 deletions styles/global.css
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

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

P2:
스타일링을 global -> 홈페이지 전반에 걸쳐 적용되는 것들과 layout_이름.css 여기서는 home.css 로 화면별 스타일링으로 구분해주신 것 같습니다.
다만 global css 에서 브라우저 별 tag 스타일링을 초기화하기 위한 코드와 반복되는 스타일을 위해 영주님께서 추가하신 코드가 혼재되어 있는 것 같습니다.
이를 해당 파일내에서 분리하시거나 파일을 분리하시는 것을 추천드립니다.

Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

a{
text-decoration: none;
color: inherit;
}

button {
background: none;
border: none;
outline: none;
box-sizing: none;
cursor: pointer;
}

img {
vertical-align: bottom;
}
Comment on lines +1 to +22
Copy link
Collaborator

Choose a reason for hiding this comment

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

P2:
이러한 것들이 위에서 언급드린 브라우저에서 자체 적용되는 스타일 초기화를 위한 코드입니다.
reset.css 라는 파일로 분리해서 많이 작성합니다.

https://meyerweb.com/eric/tools/css/reset/



body {
color: #374151;
word-break: keep-all;
font-family: "Pretenderd", sans-serif;
}

header {
width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 200px;
background-color: #ffffff;
border-bottom: 1px solid;
Copy link
Collaborator

Choose a reason for hiding this comment

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

P2:
디자인상에서는 회색 보더라인이니 아래와 같이 색상코드를 기제해주세요.

Suggested change
border-bottom: 1px solid;
border-bottom: 1px solid #DFDFDF;

}

footer {
background-color: #111827;
color: #9ca3af;
display: flex;
justify-content: space-between;
align-items: center;
padding: 32px 200px 108px 200px;
font-size: 16px;
}

#footerMenu {
display: flex;
gap: 30px;
color: #e5e7eb;
}

#socialMedia {
display: flex;
gap: 12px;
}

.wrapper {
max-width: 1200px;
margin: 0 auto;
width: 100%;
}

h1 {
font-size: 40px;
font-weight: 700;
line-height: 56px;
letter-spacing: 0.02em;
}

.button {
background-color: #3692ff;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
}

.button:hover {
background-color: #1967d6;
}

.button:focus {
background-color: #1251aa;
}

.button:disabled {
background-color: #9ca3af;
cursor: default;
pointer-events: none;
}

.pill-button {
font-size: 20px;
font-weight: 700;
border-radius: 999px;
padding: 16px 124px;
}
Loading
Loading