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.

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

Jump to bottom

[오혁재] sprint1 #15

Merged
merged 1 commit into from
Aug 13, 2024
Merged

[오혁재] sprint1 #15

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 images/Img_home_01.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/Img_home_02.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/Img_home_03.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/Img_home_bottom.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/Img_home_top.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/Property 1=sm.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.
85 changes: 85 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!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="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="gnb">
<div class="Frame2609420">
<div class="Group19">
<a href="/"><img src="images/Property 1=sm.png"></a>
</div>
<a href="/login"><button class="btn_small_48">로그인</button></a>
</div>
</div>
<div class="큰틀">
Copy link
Collaborator

Choose a reason for hiding this comment

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

각각 div 로 잘 레이아웃을 분리해주셨군요.
다음번엔 div 뿐만 아니라 section 등의 Semantic Tag 를 사용해 보시면 어떨까요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

한번 section도 사용해보겠습니다

<div class="Frame2610528">
<div class="Frame2609414">
<p id="text1">일상의 모든 물건을<br>거래해보세요</p>
<a href="/items"><button class="btn_large">구경하러 가기</button></a>
</div>
<img class="img_home_top" src="images/Img_home_top.png">
</div>
</div>
<div class="section1">
<div class="인기상품틀">
<img id="Img_home_01" src="images/Img_home_01.png">
<div class="text2">
<p id="Hotitem">Hot item</p>
<p id="인기상품txt">인기 상품을<br>확인해 보세요</p>
<p id="가장Hot한txt">가장 Hot한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
</div>
</div>
</div>
<div class="section2">
<div class="상품검색틀">
<div class="text3">
<p id="search">search</p>
<p id="상품검색txt">구매를 원하는<br>상품을 검색하세요</p>
<p id="물품검색txt">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
</div>
<img id="Img_home_02" src="images/Img_home_02.png">
Copy link
Collaborator

Choose a reason for hiding this comment

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

절대경로로 이미지를 잘 넣어주셨습니다!

./images 처럼 상대경로로 표현하는 방법도 있으니, 절대 경로, 상대경로의 차이에 대해서 한 번 알아보셔도 좋을 것 같아요!

</div>
</div>
<div class="section3">
<div class="판매상품틀">
<img id="img_home_03" src="images/Img_home_03.png">
<div class="text4">
<p id="register">register</p>
<p id="판매상품txt">판매를 원하는<br>상품을 등록하세요</p>
<p id="상품등록txt">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
</div>
</div>

</div>
<div class="큰틀">
<div class="Frame2610529">
<div class="Frame2609414">
<p id="text5">믿을 수 있는<br>판다마켓 중고 거래</p>
</div>
<img class="img_home_bottom" src="images/Img_home_bottom.png">
</div>
</div>
<div class="footer">
<div class="ffooter">
<div>
<p>@codeit - 2024</p>
</div>
<div class="privacy">
<a href="/privacy"><p id="mr">privacy policy</p></a>
<a href="/FAQ"><p>FAQ</p></a>
</div>
<div class="icon">
<a href="https://facebook.com" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a href="https://twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="https://youtube.com" target="_blank"><i class="fab fa-youtube"></i></a>
<a href="https://instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</body>
</html>
279 changes: 279 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,279 @@
html, body {
color: #374151;
Copy link
Collaborator

Choose a reason for hiding this comment

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

color 를 variable 로 설정하는 방법도 한 번 알아보시면 좋을 것 같습니다!

--color-var: #374151

이런식으로 등록하면

var(--color-var) 요렇게 사용할 수 있습니다!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

참고해보겠습니다

width: 100%;
margin: 0;
padding: 0;
}
.gnb {
width: 100%;
height: 70px;
border-bottom: 1px solid #dfdfdf;
justify-content: center;
text-align: center;
}
.Frame2609420 {
max-width: 1120px;
padding: 9px 200px;
margin: 0 auto;
height: 51px;
justify-content: space-between;
display: flex;
align-items: center;
}
.Group19 {
width: 153px;
height: 51px;
cursor: pointer;
}
.btn_small_48 {
color: #FFFFFF;
background-color: #3692FF;
width: 128px;
height: 48px;
border-radius: 8px;
border: none;
text-align: center;
align-content: center;
cursor: pointer;
}
.큰틀 {
Copy link
Collaborator

Choose a reason for hiding this comment

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

한글보다는 영어를 사용해주세요~!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

네 영어로 바꿔보겠습니다

width: 100%;
background-color: #cfe5ff;
height: 540px;
text-align: center;
}
.Frame2610528 {
Copy link
Collaborator

Choose a reason for hiding this comment

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

css 도 좀 더 의미있는 이름으로 지어주세요~

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

네 이름도 좀 의미있게 지어볼게요

max-width: 1110px;
position: relative;
top: 200px;
margin: 0 auto;
display: flex;
box-sizing: border-box;
}
.Frame2609414 {
font-size: 40px;
font-weight: 700;
line-height: 56px;
overflow: hidden;
margin-bottom: 40px;
margin-top: 40px;
}
#text1 {
width: 100%;
height: auto;
margin-top: 0;
margin-bottom: 32px;
text-align: left;
}
.btn_large {
border-radius: 40px;
color: #FFFFFF;
background-color: #3692FF;
width: 357px;
height: 48px;
font-size: 20px;
font-weight: 600;
line-height: 32px;
border: none;
text-align: center;
align-content: center;
cursor: pointer;
}
.img_home_top {
width: 746px;
height: 340px;
}
.section1 {
width: 100%;
position: relative;
background-color: #ffffff;
height: 720px;
}
.인기상품틀 {
width: 955px;
display: flex;
position: absolute;
top: 50%;
left: 50%;
margin-left: -600px;
margin-top: -222px;
}
#img_home_01 {
width: 588px;
height: 444px;
border-radius: 12px;
}
.text2 {
background-color: #FCFCFC;
margin-top: 103px;
margin-bottom: 103px;
margin-left: 64px;
margin-right: 29px;
}
.text2 p {
margin: 0;
padding: 0;
}
#Hotitem {
color: #3692FF;
font-size: 18px;
font-weight: 700;
line-height: 26px;
margin-bottom: 12px;
}
#인기상품txt {
font-size: 40px;
font-weight: 700;
line-height: 56px;
letter-spacing: 2%;
margin-bottom: 24px;
}
#가장Hot한txt {
white-space: nowrap;
font-size: 24px;
font-weight: 500;
line-height: 32px;
margin-bottom: 0;
}
.section2 {
width: 100%;
position: relative;
background-color: #ffffff;
height: 720px;
}
.상품검색틀 {
width: 969px;
display: flex;
position: absolute;
top: 50%;
left: 50%;
margin-left: -343px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

margin 을 minus 를 주신 이유가 있을까요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

figma에서 이미지 위치가 가운데가 아니라 가운데보다 좀 옆에 있길래 넣어봤습니다..

margin-top: -222px;
}
.text3 {
background-color: #FCFCFC;
margin-top: 103px;
margin-bottom: 103px;
margin-right: 29px;
text-align: right;
}
#search {
color: #3692FF;
font-size: 18px;
font-weight: 700;
line-height: 26px;
margin-bottom: 12px;
}
#상품검색txt {
font-size: 40px;
font-weight: 700;
line-height: 56px;
letter-spacing: 2%;
margin-bottom: 24px;
}
#물품검색txt {
white-space: nowrap;
font-size: 24px;
font-weight: 500;
line-height: 32px;
margin-bottom: 0;
}
#Img_home_2 {
width: 588px;
height: 444px;
}
.section3 {
width: 100%;
position: relative;
background-color: #ffffff;
height: 720px;
}
.판매상품틀 {
display: flex;
position: absolute;
top: 50%;
left: 50%;
margin-left: -600px;
margin-top: -222px;
}
#img_home_03 {
width: 588px;
height: 444px;
}
.text4 {
background-color: #FCFCFC;
margin-top: 103px;
margin-bottom: 103px;
margin-left: 64px;
text-align: left;
}
#register {
color: #3692FF;
font-size: 18px;
font-weight: 700;
line-height: 26px;
margin-bottom: 12px;
}
#판매상품txt {
font-size: 40px;
font-weight: 700;
line-height: 56px;
letter-spacing: 2%;
margin-bottom: 24px;
}
#상품등록txt {
white-space: nowrap;
font-size: 24px;
font-weight: 500;
line-height: 32px;
margin-bottom: 0;
}
.Frame2610529{
max-width: 1110px;
position: relative;
top: 143px;
margin: 0 auto;
display: flex;
box-sizing: border-box;
}
#text5 {
Copy link
Collaborator

Choose a reason for hiding this comment

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

전체적으로 동일한 피드백인데 text5 보다는 ~~_text 처럼 어떤 텍스트인지 좀 더 이름을 잘 지어주시면 좋습니다 :)

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

넵! 의미있는 이름..!

text-align: left;
margin-top: 112.5px;
}
#img_home_bottom {
width: 746px;
height: 397px;
}
.footer {
display: flex;
width: 100%;
height: 160px;
background-color: #111827;
}
.ffooter {
display: flex;
width: 1120px;
height: 20px;
margin: 32px auto;
align-items: center;
justify-content: space-between;
font-size: 16px;
font-weight: 400;
}
.ffooter p {
margin: 0;
}
.privacy {
color: #FFFFFF;
display: flex;
}
.privacy a {
color: #FFFFFF;
text-decoration: none;
}
.privacy #mr {
margin-right: 30px;
}
.icon a i{
color: #FFFFFF;
}
Loading