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
GANGYIKIM merged 1 commit into from
Feb 25, 2025
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
Empty file added faq.html
View file
Open in desktop
Empty file.
Binary file added image/facebook.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 image/footer.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 image/header.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 image/hotitem.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 image/insta.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 image/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.
Binary file added image/register.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 image/search.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 image/twitter.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 image/youtube.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.
133 changes: 133 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
<!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="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" />
<link rel="stylesheet" href="style.css">
</head>

<body>

<header>
Comment on lines +10 to +13
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 25, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
불필요한 공백은 없는것이 좋습니다~

Suggested change
<body>
<header>
<body>
<header>

<div class = "banner">
<div class = "banner_button">
<a class = "logo" href="/"><img src = "image/logo.png"></a>
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 25, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
불필요한 공백은 없는것이 좋습니다~

Suggested change
<a class = "logo" href="/"><img src = "image/logo.png"></a>
<a class="logo" href="/"><img src="image/logo.png"></a>

<a id = "login" href = "login.html">로그인</a>
</div>
</div>
</header>

<main>

<!-- Main Header -->
<section>
<div class = "header-container">
<div class = "header-content">
<div class = "header-text">
<h1 class = "header-title">
일상의 모든 물건을 <br>
거래해 보세요
</h1>
<a id = "explore-button" href = "itmes.html">구경하러 가기</a>
</div>
<img class = "header-image" src = "image/header.png">
</div>
</div>
</section>

<!-- Main Body -->
<section class = "body-container">
<section class = "content-section">
<div class = "content-card">

<img src = "image/hotitem.png">

<div class = "content-text">
<span class = "content-label">Hot item</span>

<h2 class = "content-title">
인기 상품을 <br>
확인해보세요
</h2>

<p class = "content-description">
가장 HOT한 중고거래 물품을 <br>
판다 마켓에서 확인해 보세요
</p>

</div>
</div>
</section>

<section class = "content-section">
<div class = "content-card">

<div class = "content-text">
<span class = "content-label">Search</span>
<h2 class = "content-title">
구매를 원하는<br>
상품을 검색하세요
</h2>

<p class = "content-description">
구매하고 싶은 물품은 검색해서 <br>
쉽게 찾아보세요
</p>
</div>

<img src = "image/search.png">

</div>
</section>

<section class = "content-section">
<div class = "content-card">

<img src = "image/register.png">

<div class = "content-text">
<span class = "content-label">Register</span>
<h2 class = "content-title">
판매를 원하는 <br>
상품을 등록하세요
</h2>

<p class = "content-description">
어떤 물건이든 판매하고 싶은 상품을 <br>
쉽게 등록하세요
</p>
</div>
</div>
</section>

<!-- Main Footer -->
<section class = "content-footer">
<div class = "cf-content">
<h3 class = "cf-text">
Comment on lines +107 to +108
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 25, 2025

Choose a reason for hiding this comment

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

💊 제안
한 레포안에서는 동일한 룰을 따르는 것이 좋습니다. 다른 classname들은 약어 사용이 없으시기도 하고 줄이지 않는것이
가독성면에서도 좋을 것 같아요. 따라서 content-footer로 사용하시는 것을 추천드려요~

Suggested change
<div class = "cf-content">
<h3 class = "cf-text">
<div class = "content-footer-content">
<h3 class = "content-footer-text">

믿을 수 있는 <br>
판다마켓 중고 거래
</h3>
<img class = "cf-img" src = "image/footer.png">
</div>
</section>
</section>
</main>

<!-- Footer -->
<footer>
<div>©codeit - 2024</div>
<div id="footer-content">
<a class = "footer-menu" href="privacy.html">Privacy Policy</a>
<a class = "footer-menu" href="faq.html">FAQ</a>
</div>
<div id="sns-link">
<a href="https://www.facebook.com/" target="_blank"><img src="image/facebook.png" alt="페이스북" width="20"/></a>
<a href="https://twitter.com/" target="_blank"><img src="image/twitter.png" alt="트위터" width="20"/></a>
<a href="https://www.youtube.com/" target="_blank"><img src="image/youtube.png" alt="유튜브" width="20"/></a>
<a href="https://www.instagram.com/" target="_blank"><img src="image/insta.png" alt="인스타그램" width="20"/></a>
</div>
Comment on lines +125 to +130
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 25, 2025

Choose a reason for hiding this comment

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

💊 제안
이 영역은 로고들의 모음이라고 할 수 있습니다. 관련된 요소들끼리 묶인 목록이니 의미록적인 마크업을 작성한다면 list 관련 태그로 작성하시는 것을 추천드립니다.

Suggested change
<div id="sns-link">
<a href="https://www.facebook.com/" target="_blank"><img src="image/facebook.png" alt="페이스북" width="20"/></a>
<a href="https://twitter.com/" target="_blank"><img src="image/twitter.png" alt="트위터" width="20"/></a>
<a href="https://www.youtube.com/" target="_blank"><img src="image/youtube.png" alt="유튜브" width="20"/></a>
<a href="https://www.instagram.com/" target="_blank"><img src="image/insta.png" alt="인스타그램" width="20"/></a>
</div>
<ul id="sns-link">
<li>
<a href="https://www.facebook.com/" target="_blank">
<img src="image/facebook.png" alt="페이스북" width="20"/>
</a>
</li>
</ul>

</footer>
</body>
</html>
Empty file added itmes.html
View file
Open in desktop
Empty file.
Empty file added login.html
View file
Open in desktop
Empty file.
Empty file added privacy.html
View file
Open in desktop
Empty file.
220 changes: 220 additions & 0 deletions style.css
View file
Open in desktop
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 25, 2025

Choose a reason for hiding this comment

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

💊 제안
브라우저 마다 자체적으로 스타일을 가지고 있고 이를 초기화해 모든 브라우저에서 동일한 스타일을 보여주기 위한
밑바탕을 만드는 것이 좋습니다. 이러한 역할을 하는 css 파일을 reset.css 혹은 normalize.css 라고 합니다.
서연님께서 a 태그들을 스타일링 할때 text-decoration: none을 추가해주신 것은 브라우저가 자체적으로 a 태그에
text-decoration: underline 속성을 가지고 있기 때문입니다.
이런식으로 반복되는 css 문 작성을 줄이고, 예상치 않은 동작을 줄이기 위해 reset.css 를 추가하시는 것을 추천드려요~

어떠한 역할을 하는지, 어떻게 작성해야 하는지에 대해 궁금하시다면 reset.css, normalize.css 를 구글에 검색해보시면 다양한 파일이 나오니 확인해보시고 마음에 드는 것을 참고해보세요~

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

body {
font-family: 'Pretendard', sans-serif;
}
Comment on lines +5 to +7
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 25, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
브라우저 자체적으로 body 에 margin 8px이 적용되어 있어서, 사방에 여백이 생기네요~
확인 후 수정하시면 좋겠습니당.


/* Banner */
.banner_button {
margin: 9.5px auto;
width:100%;
padding: 0 200px;
display: flex;
justify-content: space-between;
align-items: center;
}

.logo img {
width: 153px;
}

.logo,#login {
cursor: pointer;
}

#login {
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 25, 2025

Choose a reason for hiding this comment

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

💊 제안
css에서 id 선택자는 우선순위가 높기때문에 가능하면 사용을 지양하는 것이 좋습니다~
만약 특정 목적으로 태그에 id를 주셨더라도 classname을 이용해 스타일링하시는 것을 추천드립니다~

width: 128px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;

background: #3692FF;
border-radius: 8px;
color: #ffffff;
text-decoration: none;
}

#login:hover {
background-color: #1967D6;
}

/* Main - Header */
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 25, 2025

Choose a reason for hiding this comment

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

👍 칭찬
파악하기 쉽게 관련된 css 들을 모아두시고 주석으로 구분해주신점 좋습니다!

.header-container {
display:flex;
flex-direction: column;
justify-content: end;
align-items: center;
width: 100%;
height: 540px;
background-color: #CFE5FF;
}

.header-content {
display: flex;
align-items: center;
gap: 7px;
}

.header-image {
width: 746px;
height:340px;
}

.header-text {
display: flex;
flex-direction: column;
justify-content: center;
width: 357px;
height: 260px;
}

.header-title {
font-size: 40px;
font-weight: 700;
line-height: 56px;
color: #374151;
}

#explore-button {
display: flex;
justify-content: center;
align-items: center;

width: 357px;
height: 56px;

background-color: #3692FF;
color: #ffffff;
border-radius: 40px;

font-size: 20px;
font-weight: 600;
text-decoration: none;
}

#explore-button:hover {
background-color: #1967D6;
}

/* Main-Body */

.body-container {
width: 100%;
}

.content-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

width: 100%;
height: 720px;
}

.content-card {
display: flex;
align-items: center;
justify-content: space-around;

width: 988px;
height: 444px;
}

.content-text {
width: 298px;
height: 238px;

}

.content-card img {
width: 579px;
height: 444px;
}

.content-label {
font-size: 18px;
font-weight: 700;
color: #3692FF;
}

.content-title {
font-size: 40px;
font-weight: 700;
color: #374151;
}

.content-description {
font-size: 24px;
font-weight: 500;
color: #374151;
}

/* Main-Footer */
.content-footer {
position:relative;

display: flex;
flex-direction: column;
justify-content: end;
align-items: center;

width: 100%;
height: 540px;

background-color: #CFE5FF;
}

.cf-content {
display: flex;
align-items: center;
}

.cf-img {
width: 746px;
height: 397px;
}

.cf-text {
width: 295px;
height: 172px;

font-size: 40px;
font-weight: 700;
color: #374151;
}

/* Footer */

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

.footer-menu {
text-decoration: none;
color: #E5E7EB;
}

#footer-content {
display: flex;
gap: 30px;
color: #e5e7eb;
}

#sns-link {
display: flex;
gap: 12px;
}

.footer-menu, #sns-link a,.logo,#login, #explore-button {
cursor: pointer;
}
Loading