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

[황병선] Sprint1 #30

Merged
merged 1 commit into from
Apr 29, 2024
+327 −0
Merged

[황병선] Sprint1 #30

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 .DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added Img/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 Img/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 Img/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 Img/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 Img/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 Img/Property 1=Variant3.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 Img/ic_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 Img/ic_instagram.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 Img/ic_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 Img/ic_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.
111 changes: 111 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
Copy link
Collaborator

Choose a reason for hiding this comment

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

다른 팀원 분들에게도 비슷한 피드백을 드렸는데요!
사이트의 내용이 한국어로 이루어져 있으므로 언어 설정을 ko로 하는 것을 추천드립니다.
접근성, SEO, 번역 동작 등에 영향을 미칠 수 있어서요.
더 자세한 내용은 아래 링크를 참고해주세요. 🤗
참고링크1
참고링크2

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<title>판다마켓</title>
</head>
<body>
<div class="container">
Copy link
Collaborator

Choose a reason for hiding this comment

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

이 div 요소는 없어도 괜찮을 것 같습니다. 폰트 정도만 body에 적용하는 것으로 수정하면 조금 더 간결하게 작성할 수 있을 것 같아요 🤗

<header class="header-wrapper">
<nav class="gnb">
Copy link
Collaborator

Choose a reason for hiding this comment

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

gnb 라는 클래스명의 네이밍이 좋네요. 👍👍

<a href="/" class="gnb-logo"><img src="/Img/Property 1=Variant3.png" alt="로고이미지" /></a>
Copy link
Collaborator

Choose a reason for hiding this comment

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

폴더명에 축약어를 쓰는 것은 다소 어색해 보입니다. 대신에 images라는 풀명칭을 사용하고 여러장의 이미지가 있으므로 -s를 붙여 복수형으로 사용해주시면 좋을 것 같네요 😃

Copy link
Collaborator

Choose a reason for hiding this comment

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

Property 1=Variant3.png 파일명에 _, -이 아닌 특수문자가 들어가는 것은 위험합니다. OS에서는 인정하는 파일명이라도 프론트엔드에서 사용하는 다른 서비스나 라이브러리에서 지원하지 않으면 오류가 발생할 수 있기 때문입니다. 특히 띄어쓰기는 정말 위험할 수 있는 것이, 띄어쓰기를 기준으로 문자열을 분할하는 경우가 있기 때문입니다.

<a href="/login.html" class="gnb-login">로그인</a>
</nav>
</header>
<main class="content-wrapper">
<div class="content-Banner-wrapper">
<div class="content-Banner">
<div class="content-Banner-desc">
<div class="content-Banner-text">
일상의 모든물건을<br />
거래해보세요
</div>
<a class="content-Banner-Btn" href="/items.html">구경하러 가기</a>
</div>
<div class="content-Banner-img">
<img src="/Img/Img_home_top.png" alt="상단배너이미지" />
</div>
</div>
</div>
<div class="contents">
<section class="content">
<img class="content-img" src="/Img/Img_home_01.png" alt="콘텐츠이미지1" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

alt 속성을 활용해 대체 텍스를 작성해 주신 부분은 좋습니다. 👍
다만, 그 내용이 개발적인 측면에서만 작성된 것이 아쉽습니다. 대체 텍스트의 경우 스크린리더 같은 보조도구를 활용해야 하는 사람들이나 웹 크롤러가 그 이미지의 의미를 파악하기위해 접근하기도 합니다. 이미지1 처럼 단순히 일반적인 네이밍과 넘버링을 쓰게 되면 사람이나 크롤러가 이해할 수 없으니 좀 더 구체적으로 작성하면 좋을 것 같네요 🤗

<div class="content-text">
<div class="content-text-label">
Hot item
</div>
<h2 class="content-text-title">
인기상품을<br />
확인해 보세요
</h2>
<p class="content-text-desc">
가장 Hot한 중고거래 물품을 <br />
판다 마켓에서 확인해 보세요
</p>
</div>
</section>
<section class="content content-rowReverse">
Copy link
Collaborator

Choose a reason for hiding this comment

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

CSS 속성이 단 하나로만 이루어져 있는 경우 속성명이나 값을 사용해 클래스명을 작성해 준 것은 아주 좋습니다. 👍👍
보는 사람이 클래스명만 보아도 내용을 쉽게 파악할 수 있기 때문입니다.
다만, 이 클래스의 경우 필요할 때 content가 아닌 곳에서도 사용할 수 있으므로
속성명-값의 구조로 flex-rowReverse 이름으로 해주시면 더욱 유연한 코드가 될 것 같습니다.

Copy link
Collaborator

Choose a reason for hiding this comment

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

다른 대부분의 클래스명이 케밥케이스를 사용하고 있으므로 동일하게 content-row-reverse로 해주시는 것이 좋을 것 같습니다.
(아마 - 가 하나 더 추가되어 구조가 깨지는 것을 걱정해 이렇게 작성한 것으로 보이는데 표기법이 이곳만 달라 어색한 것이 더 두드러지는 것 같아 케밥케이스를 추천드려요 😃)

<div class="content-text">
<div class="content-text-label">
Search
</div>
<h2 class="content-text-title">
구매를 원하는<br />
상품을 검색하세요
</h2>
<p class="content-text-desc">
구매하고 싶은 물품은 검색해서<br />
쉽게 찾아보세요
</p>
</div>
<img class="content-img" src="/Img/Img_home_02.png" alt="콘텐츠이미지2" />
</section>
<section class="content">
<img class="content-img" src="/Img/Img_home_03.png" alt="콘텐츠이미지3" />
<div class="content-text">
<div class="content-text-label">
Register
</div>
<h2 class="content-text-title">
판매를 원하는<br />
상품을 등록하세요
</h2>
<p class="content-text-desc">
어떤 물건이든 판매하고 싶은 상품을<br />
쉽게 등록하세요
</p>
</div>
</section>
</div>
<div class="content-Banner-wrapper">
Copy link
Collaborator

Choose a reason for hiding this comment

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

클래스명 작성 시 Banner 부분만 대문자로 시작하는 것이 조금 어색합니다.
다른 대부분의 클래스명이 케밥케이스를 사용하고 있으므로 통일성 있게 소문자로 작성되면 좋을 것 같습니다. 🤗

<div class="content-Banner">
<div class="content-Banner-desc">
<div class="content-Banner-text">
믿을 수 있는<br />
판다마켓 중고거래
</div>
</div>
<div class="content-Banner-img">
<img src="/Img/Img_home_bottom.png" alt="하단배너이미지" />
</div>
</div>
</div>
</main>
<footer class="footer-wrapper">
<div class="footer-copyright">@codeit - 2024</div>
<div class="footer-link">
<a href="/privacy.html">Privacy Policy</a>
<a href="/faq.html">FAQ</a>
</div>
<div class="footer-sns">
<a href="https://www.facebook.com/" target="_blank"><img src="/Img/ic_facebook.png" alt="페이스북 아이콘" /></a>
<a href="https://twitter.com/" target="_blank"><img src="/Img/ic_twitter.png" alt="트위터 아이콘" /></a>
<a href="https://www.youtube.com/" target="_blank"><img src="/Img/ic_youtube.png" alt="유튜브 아이콘" /></a>
<a href="https://www.instagram.com/" target="_blank"><img src="/Img/ic_instagram.png" alt="인스타그램 아이콘" /></a>
</div>
</footer>
Comment on lines +96 to +108
Copy link
Collaborator

Choose a reason for hiding this comment

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

footer에 들어가는 요소들에 대해 태그와 클래스명을 적절하게 작성해주셨네요 👍👍
HTML파일만 보아도 페이지에 대해 한눈에 파악할 수 있어 좋았습니다.

</div>
</body>
</html>
43 changes: 43 additions & 0 deletions reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
173 changes: 173 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
/* Reset CSS */
@import "reset.css";
Copy link
Collaborator

Choose a reason for hiding this comment

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

import 방식으로 css 파일을 로드할 시 waterfall 현상, 특정 브라우저에서의 버그 발생 등의 이슈가 있을 수 있으니 참고하시면 좋을 것 같습니다. 🤗
CSS 파일 로드 시 import와 link 방식의 차이


* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
cursor: pointer;
}

/* Pretendard Font*/
@font-face {
font-family: 'Pretendard-Regular';
src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}

/* Container */

.container {
display: flex;
flex-direction: column;
align-items: center;
font-family: 'Pretendard-Regular';
}

/* Header */
.header-wrapper {
width: 100vw;
}
.gnb {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 200px;
max-width: 1920px;
}
.gnb-logo {
display: block;
width: 153px;
height: 51px;
}
.gnb-login {
display: flex;
justify-content: center;
align-items: center;
width: 128px;
height: 48px;
padding: 12px 20px;
background-color: #3692FF;
color: #fff;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
}

/* Main */
.content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
/* banner */
.content-Banner-wrapper{
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
background-color: #CFE5FF;
}
.content-Banner{
display: flex;
align-items: center;
width: 1200px;
height: 540px;
}
.content-Banner-desc{
display: flex;
flex-direction: column;
gap: 32px;
}
.content-Banner-text {
width: 357px;
color: #374151;
font-size: 40px;
font-weight: 700;
line-height: 56px;
}
.content-Banner-Btn{
display: flex;
justify-content: center;
align-items: center;
width: 357px;
height: 56px;
background-color: #3692FF;
color: #fff;
border-radius: 40px;
font-size: 20px;
font-weight: 600;
}

/* content */
.contents {
display: flex;
flex-direction: column;
width: 1200px;
}
.content {
display: flex;
align-items: center;
height: 720px;
gap: 64px;
}
.content-rowReverse {
flex-direction: row-reverse;
}
.content-img{
width: 588px;
height: 444px;
}
.content-text {
display: flex;
flex-direction: column;
gap: 12px;
}
.content-text-label {
font-size: 18px;
font-weight: 700;
color: #3692FF;
}
.content-text-title {
font-size: 40px;
font-weight: 700;
color: #374151;
line-height: 56px;
}
.content-text-desc {
font-size: 24px;
font-weight: 500;
color: #374151;
line-height: 28.8px;
}

/* Footer */
.footer-wrapper {
display: flex;
justify-content: space-between;
width: 100vw;
padding: 32px 200px;
height: 160px;
background-color: #111827;
color: #fff;
max-width: 1920px;
}
.footer-copyright {
font-size: 16px;
color: #9CA3AF;
}
.footer-link {
display: flex;
gap: 30px;
}
.footer-link a {
font-size: 16px;
color: #E5E7EB;
}
.footer-sns {
display: flex;
gap: 12px;
}
Loading