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 #8

Merged
merged 2 commits into from
Jan 9, 2025
Merged

[최권진] Sprint1 #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
531ce9c
complete
kwonjin2 Jan 8, 2025
c575a17
1
kwonjin2 Jan 8, 2025
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
26 changes: 12 additions & 14 deletions .github/pull_request_template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,25 @@
## 요구사항

### 기본

- [x]
- []
- []
[O] 랜딩 페이지의 url path는 루트('/')로 설정합니다.
[O] title은 "판다마켓"로 설정합니다.
[O] 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다. [O]
[O] 화면의 너비가 1920px 보다 작아질 때, "판다마켓" 로고의 왼쪽 여백 200px"로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 [O]설정합니다.
[O] 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다.
[O] "판다마켓" 클릭 시 루트 페이지('/')로 이동합니다.
[O] '로그인'버튼 클릭 시 로그인 페이지('/login')로 이동합니다 (빈 페이지)
[O] "구경하러가기"버튼 클릭 시('/items')로 이동합니다.(빈 페이지)
[O] "Privacy Policy", "FAQ"는 클릭 시 각각 Privacy 페이지('/privacy'), FAQ 페이지('/faq')로 이동합니다.(모두 빈 페이지)
[O] 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.

### 심화

- [x]
- []
[x]

## 주요 변경사항

-
-

## 스크린샷

![image](이미지url)

## 멘토에게

-
-
- 셀프 코드 리뷰를 통해 질문 이어가겠습니다.
-제가 잘 구현한건지 모르겠어요..
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# panda-market-mission_1
Binary file added assets/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added assets/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 assets/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 assets/hot-item.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 assets/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 assets/login-button.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 assets/main.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 assets/panda-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 assets/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 assets/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 assets/twiter.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 assets/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.
11 changes: 11 additions & 0 deletions faq.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=], initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>faq 페이지 입니당 :)</h1>
</body>
</html>
132 changes: 132 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<!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.

<html lang="ko"> lang에 신경써주세요.
SEO, 접근성에 도움이 됩니다!

<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
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
rel="stylesheet"
/>
</head>
<body>
<header>
<nav class="nav-flex">
<a href="/" class="logo"
><img
src="./assets/panda-logo.png"
alt="panda-logo-image"
class="panda-logo-image"
/></a>
<a href="./login.html" class="login">로그인</a>
</nav>
</header>

<main>
<section>
<div class="landing-page">
<div class="landing-page-text">
<h2 class="large-text">일상의 모든 물건을 <br />거래해보세요</h2>
Copy link
Collaborator

Choose a reason for hiding this comment

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

h tag 는 계층 구조로 사용하시는 것이 접근성에 좋습니다! 지금은 h1 없이 h2가 바로 나왔네요 🤔

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements#사용_일람

<div class="Seeflex">
Copy link
Collaborator

Choose a reason for hiding this comment

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

케이스는 한 가지로 통일 하시는 것이 좋습니다 :)
see-flex이런 식으로요! 그리고 좀 더 유의미한 클래스명을 지어주세요~!

<a href="/items.html" class="See">구경하러 가기</a>
</div>
</div>
<img src="./assets/main.png" alt="" class="main-img" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

img를 쓰실 때 alt를 넣어주시는 것이 접근성에 좋습니다!

</div>
</section>

<section>
<div class="second-page">
<img src="./assets/hot-item.png" alt="" />
<div class="text-box">
<p><span class="event-text">Hot item</span></p>
Copy link
Collaborator

Choose a reason for hiding this comment

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

P는 문단을 나타내기 위해 사용됩니다! 여기서는 부적절한 거 같네요!

Copy link
Collaborator

Choose a reason for hiding this comment

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

그리고 불필요한 중첩 같습니다!

<h2>
<span class="event-large-text"
>인기 상품을 <br />확인해보세요</span
>
</h2>
<p>가장 HOT한 중고거래 물품을<br />판다 마켓에서 확인해 보세요</p>
</div>
</div>
</section>

<section>
<div class="second-page">
<div class="text-box-search">
<p><span class="event-text">Search</span></p>
<h2>
<span class="event-large-text"
>구매를 원하는<br />상품을 검색하세요</span
>
</h2>
<p>구매하고 싶은 물품은 검색해서 <br />쉽게 찾아보세요</p>
</div>
<img src="./assets/search.png" alt="" />
</div>
</section>

<section>
<div class="second-page">
<img src="./assets/register.png" alt="" class="register-img" />
<div class="text-box-register">
<p><span class="event-text">Register</span></p>
<h2>
<span class="event-large-text"
>판매를 원하는 <br />상품을 등록하세요</span
>
</h2>
<p>어떤 물건이든 판매하고 싶은 상품을 <br />쉽게 등록하세요</p>
</div>
</div>
</section>

<section>
Copy link
Collaborator

Choose a reason for hiding this comment

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

section은 테마성을 가진 컨텐츠를 그룹핑할 때 사용됩니다! 단순레이아웃 요소라면 div를 써주세요!

<div class="empty-area"></div>
</section>

<section>
<div class="landing-page-last">
<div class="landing-page-text">
<h2 class="large-text-last">
믿을 수 있는<br />판다마켓 중고 거래
</h2>
</div>
<img src="./assets/footer.png" alt="" class="main-img" />
</div>
</section>
</main>

<footer>
<div class="footer">
<p><span class="design">©codeit - 2024</span></p>
Copy link
Collaborator

Choose a reason for hiding this comment

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

여기도 p가 불필요하게 중첩되어있네요!

<div class="fqa">
<p>
<span
><a href="./privacy.html" class="real-last"
>Privacy Policy</a
></span
>
</p>
<p>
<span><a href="./faq.html" class="real-last">FAQ</a></span>
</p>
</div>
<div class="last-img">
<a href="https://www.facebook.com" target="_blank"
><img src="./assets/facebook.png" alt=""
/></a>
<a href="https://x.com/?mx=2" target="_blank" id="JACJAC"
><img src="./assets/twiter.png" alt=""
/></a>
<a href="https://www.youtube.com" target="_blank"
><img src="./assets/youtube.png" alt=""
/></a>
<a href="https://www.instagram.com" target="_blank"
><img src="./assets/instagram.png" alt=""
/></a>
</div>
</div>
</footer>
</body>
</html>
11 changes: 11 additions & 0 deletions items.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=], initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>구경하기 페이지 입니당 :)</h1>
</body>
</html>
11 changes: 11 additions & 0 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=], initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>login 페이지 입니당 :)</h1>
</body>
</html>
11 changes: 11 additions & 0 deletions privacy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=], initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>privacy 페이지 입니당 :)</h1>
</body>
</html>
Loading
Loading