-
Notifications
You must be signed in to change notification settings - Fork 43
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
The head ref may contain hidden characters: "Basic-\uB0A8\uAE30\uC5F0-sprint1"
[남기연] sprint1 #37
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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> |
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> | ||
<div class="header"> | ||
<div class="emp"></div> | ||
<div class="headerNav"> | ||
<a href="/" | ||
><img | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. a 태그 닫히는 >위치가 어색한데
같이 끊어주는게 일반적일 것 같아요. |
||
id="logo_Img" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 스타일링만을 위한 선택자는 class를 권장해요.
|
||
src="/assets/imgs/logoImg.png" | ||
alt="로고 이미지" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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" /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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> |
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> |
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> |
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> |
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"; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
} | ||
|
||
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 | ||
); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 브라우저에서 기본 제공하는 스타일링 제거 목적인 경우 최상단에 따로 모아두거나 초기화 할 설정이 많아지면 파일을 분리해서 관리해도 좋아요. |
||
} | ||
|
||
.footer_info_box { | ||
display: flex; | ||
gap: 30px; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
다른 페이지로 이동하기 쉽도록 상단에 링크를 두는 요소는 nav태그가 더 좋을 것 같아요.
header태그는 콘텐츠의 제목이나 소개 또는 탐색하는 영역에 사용해요.