Skip to content
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.

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

[남기연] sprint1 #37

Merged
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
Binary file added .DS_Store
Binary file not shown.
Binary file added assets/.DS_Store
Binary file not shown.
Binary file added assets/imgs/.DS_Store
Binary file not shown.
Binary file added assets/imgs/Img_home_01.png
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 assets/imgs/Img_home_02.png
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 assets/imgs/Img_home_03.png
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 assets/imgs/Img_home_bottom.png
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 assets/imgs/Img_home_top.png
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 assets/imgs/ic_facebook.png
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 assets/imgs/ic_instagram.png
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 assets/imgs/ic_twitter.png
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 assets/imgs/ic_youtube.png
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 assets/imgs/logoImg.png
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 assets/imgs/mentoring-week2.pdf
Binary file not shown.
12 changes: 12 additions & 0 deletions faq.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FAQ</title>
</head>
<body style="display: flex; align-items: center; justify-content: center">
<p style="font-size: 50px">Coming Soon</p>
</body>
</html>
148 changes: 148 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" />
<title>판다마켓</title>
</head>
<body>
<header>
Copy link
Contributor

Choose a reason for hiding this comment

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

다른 페이지로 이동하기 쉽도록 상단에 링크를 두는 요소는 nav태그가 더 좋을 것 같아요.
header태그는 콘텐츠의 제목이나 소개 또는 탐색하는 영역에 사용해요.

<div class="header">
<div class="emp"></div>
<div class="headerNav">
<a href="/"
><img
Copy link
Contributor

Choose a reason for hiding this comment

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

a 태그 닫히는 >위치가 어색한데

<a href="/">
  <img
    src="~"
    alt="~"
    ...
  />
<a />

같이 끊어주는게 일반적일 것 같아요.

id="logo_Img"
Copy link
Contributor

Choose a reason for hiding this comment

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

스타일링만을 위한 선택자는 class를 권장해요.

  • id 는 보통 개발작업시 요소 선택을 위한 방편으로 많이 사용해요.
  • id 선택자는 class보다 우선순위가 높아 id에 속한 스타일을 class로 덮어쓸 수 없어 유지보수와 확장성에 불리할 수 있어요.
  • id는 페이지 내에서 고유해서 재사용에 좋지 않지만, class는 재사용 가능해요.

src="/assets/imgs/logoImg.png"
alt="로고 이미지"
Copy link
Contributor

Choose a reason for hiding this comment

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

alt 설정 좋아요~👍

/></a>
<a href="/login" id="login" href="">로그인</a>
</div>
<div class="emp"></div>
</div>
<div class="headerContainer">
<div class="headerContainer_visual">
<div class="headerContainer_visual_left">
<p class="hc2_text">
일상의 모든 물건을<br />
거래해 보세요
</p>
<a href="/items" class="buyBtn">구매하러 가기</a>
</div>
<img
id="home_top_Img"
src="/assets/imgs/Img_home_top.png"
alt="홈 탑 이미지"
/>
</div>
</div>
</header>
<main>
<section>
<img src="/assets/imgs/Img_home_01.png" alt="Img_home_01" />
Copy link
Contributor

Choose a reason for hiding this comment

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

alt 들어갈 단어에 고민이 생길 때 참고하면 좋아요.

<div class="section1_right">
<p class="section_text1">Hot item</p>
<p class="section_text2">
인기 상품을<br />
확인해보세요
</p>
<p class="section_text3">
가장 HOT한 중고거래 물품을<br />
판다 마켓에서 확인해 보세요
</p>
</div>
</section>
<section>
<div class="section2_left">
<p class="section_text1">Search</p>
<p class="section_text2">
구매를 원하는<br />
상품을 검색하세요
</p>
<p class="section_text3">
구매하고 싶은 물품은 검색해서<br />
쉽게 찾아보세요
</p>
</div>
<img src="/assets/imgs/Img_home_02.png" alt="Img_home_02" />
</section>
<section>
<img src="/assets/imgs/Img_home_03.png" alt="Img_home_03" />
<div class="section3_right">
<p class="section_text1">Register</p>
<p class="section_text2">
판매를 원하는<br />
상품을 등록하세요
</p>
<p class="section_text3">
어떤 물거이든 판매하고 싶은 상품을<br />
쉽게 등록하세요
</p>
</div>
</section>
</main>
<footer>
<div class="home_bottom">
<p>믿을 수 있는<br />판다마켓 중고 거래</p>
<img src="/assets/imgs/Img_home_bottom.png" alt="Img_home_bottom" />
</div>
<div class="footer">
<div class="footer_info">
<p>@codeit - 2024</p>
<div class="footer_info_box">
<a href="/privacy">Privacy Policy</a>
<a href="/faq">FAQ</a>
</div>
<div class="icon_box">
<a
href="http://facebook.com"
target="_blank"
rel="noopener noreferrer"
>
<img
class="icon"
src="/assets/imgs/ic_facebook.png"
alt="페이스북아이콘"
/>
</a>
<a
href="http://twitter.com"
target="_blank"
rel="noopener noreferrer"
Copy link
Contributor

Choose a reason for hiding this comment

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

noopener noreferrer 설정 좋아요~👍

>
<img
class="icon"
src="/assets/imgs/ic_twitter.png"
alt="트위터아이콘"
/>
</a>
<a
href="http://youtube.com"
target="_blank"
rel="noopener noreferrer"
>
<img
class="icon"
src="/assets/imgs/ic_youtube.png"
alt="유투브아이콘"
/>
</a>
<a
href="http://instagram.com"
target="_blank"
rel="noopener noreferrer"
>
<img
class="icon"
src="/assets/imgs/ic_instagram.png"
alt="인스타그램아이콘"
/>
</a>
</div>
</div>
</div>
</footer>
</body>
</html>
12 changes: 12 additions & 0 deletions items.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>구경하기</title>
</head>
<body style="display: flex; align-items: center; justify-content: center">
<p style="font-size: 50px">Coming Soon</p>
</body>
</html>
12 changes: 12 additions & 0 deletions login.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>로그인</title>
</head>
<body style="display: flex; align-items: center; justify-content: center">
<p style="font-size: 50px">Coming Soon</p>
</body>
</html>
12 changes: 12 additions & 0 deletions privacy.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Privacy</title>
</head>
<body style="display: flex; align-items: center; justify-content: center">
<p style="font-size: 50px">Coming Soon</p>
</body>
</html>
218 changes: 218 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,218 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
font-family: "Pretendard";
Copy link
Contributor

Choose a reason for hiding this comment

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

image
현재 Pretendard 폰트 적용되지 않는 상태에요.
Pretendard는 브라우저에서 기본 제공하는 폰트가 아니라 font파일을 가져와야 해요.
참고해서 폰트 파일을 가져와 주세요.

}

header {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}

.header {
display: grid;
grid-template-columns: minmax(200px, 1fr) minmax(400px, 1120px) minmax(
200px,
1fr
);
Copy link
Contributor

Choose a reason for hiding this comment

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

minmax 줄바꿈이 어색해요

width: 100%;
height: 70px;
}

.headerNav {
display: flex;
align-items: center;
justify-content: space-between;
}

#logo_Img {
display: inline-block;
height: 100%;
cursor: pointer;
}

#login {
width: 128px;
height: 48px;
padding: 12px 23px;
border: none;
border-radius: 8px;
background-color: #3692ff;
font-size: 16px;
font-weight: 600;
text-align: center;
line-height: 26px;
color: #ffffff;
transition: all 0.2s;
Copy link
Contributor

Choose a reason for hiding this comment

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

transition 설정 좋아요~👍

}

#login:hover {
background-color: #1967d6;
cursor: pointer;
}

.headerContainer {
display: flex;
justify-content: center;
align-items: flex-end;
width: 100%;
height: 540px;
background-color: #cfe5ff;
}

.headerContainer_visual {
display: flex;
width: 1110px;
height: 340px;
}

.hc2_text {
font-size: 40px;
font-weight: 700;
line-height: 56px;
}

.buyBtn {
Copy link
Contributor

Choose a reason for hiding this comment

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

클래스, id 이름으로 camelCase, snake_case 혼용해서 사용하고 있는데 둘 중 하나로 통일해서 작성하면 코드 읽는데 더 좋을 것 같아요.

display: inline-block;
width: 100%;
height: 56px;
margin-top: 32px;
padding: 16px 124px;
border: none;
border-radius: 40px;
background-color: #3692ff;
font-size: 20px;
font-weight: 600;
text-align: center;
line-height: 32px;
color: #ffffff;
transition: all 0.2s;
}

.buyBtn:hover {
background-color: #1967d6;
cursor: pointer;
}

#home_top_Img {
width: 746px;
height: 340px;
}

section {
display: flex;
padding: 138px 0;
}

.section1_right {
display: flex;
flex-direction: column;
margin: 103px auto 103px 64px;
}

.section_text1 {
margin-bottom: 12px;
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: #3692ff;
}

.section_text2 {
margin-bottom: 24px;
font-size: 40px;
font-weight: 700;
line-height: 56px;
color: #374151;
}

.section_text3 {
font-size: 24px;
font-weight: 500;
line-height: 32px;
}

.section2_left {
display: flex;
flex-direction: column;
margin: 103px 64px 103px auto;
text-align: right;
}

.section3_right {
margin: 103px auto 103px 64px;
}

footer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
background-color: #cfe5ff;
}

.home_bottom {
display: flex;
align-items: center;
margin-top: 143px;
}

.home_bottom p {
font-size: 40px;
font-weight: 700;
line-height: 56px;
}

.footer {
width: 100%;
height: 160px;
background-color: #111827;
display: flex;
justify-content: center;
}

.footer_info {
display: flex;
justify-content: space-between;
width: 1120px;
margin-top: 32px;
}

.footer_info p:nth-child(1) {
font-size: 16px;
font-weight: 400;
color: #9ca3af;
}

.footer_info a:nth-child(1) {
font-size: 16px;
font-weight: 400;
color: #e5e7eb;
}

.footer_info a:nth-child(2) {
font-size: 16px;
font-weight: 400;
color: #e5e7eb;
}

a {
text-decoration: none;
Copy link
Contributor

Choose a reason for hiding this comment

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

브라우저에서 기본 제공하는 스타일링 제거 목적인 경우 최상단에 따로 모아두거나 초기화 할 설정이 많아지면 파일을 분리해서 관리해도 좋아요.

}

.footer_info_box {
display: flex;
gap: 30px;
}