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

[박지민] sprint2 #43

Merged
merged 1 commit into from
Aug 19, 2024
Merged

[박지민] sprint2 #43

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 assets/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 assets/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 assets/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 assets/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 assets/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 assets/btn_visibility_off_24px.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/btn_visibility_on_24px.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/ic_color_google.png
View file
Open in desktop
Copy link
Collaborator

@hoody-jellybean hoody-jellybean Aug 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

벡터 이미지로 나타낼 수 있는 이미지는 SVG 확장자로 export 하시는걸 추천드립니다. :)
(아이콘, 서비스 로고 등)

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/ic_color_kakaotalk.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/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 assets/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 assets/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 assets/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.
Binary file added assets/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/logo_lg.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.
14 changes: 14 additions & 0 deletions faq.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>판다마켓-faq</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header></header>
<section></section>
<!-- faq -->
<footer></footer>
</body>
</html>
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="ko">
<head>
<meta charset="utf-8">
<title>판다마켓</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 네비게이션 바 -->
<header class="header">
<a class="header-typo" href="index.html">
<img src="assets/logo.png">
</a>
<a class="login-button" href="login.html">로그인</a>
</header>
<!-- 상단 배너 -->
Copy link
Collaborator

@hoody-jellybean hoody-jellybean Aug 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

페이지 내 주요 콘텐츠 요소들을 <main/> 태그로 묶어주시면 더 좋을 것 같습니다!

<section class="top-banner">
<div class="top-banner-contents">
<div class="top-banner-text">
<p>일상의 모든 물건을<br>거래해 보세요</p>
<a href="items.html">구경하러 가기</a>
</div>
<img class="top-banner-img" src="assets/Img_home_top.png">
</div>
</section>
<!-- 본문 -->
<section class="main-content">
<section class="odd">
<div class="card odd">
<img class="card-image" src="assets/Img_home_01.png">
<div class="card-text">
<p class="card-header">Hot item</p>
<p class="card-title">인기 상품을<br>확인해 보세요</p>
<p class="card-explain">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
</div>
</div>
</section>
<section class="even">
<div class="card even">
<img class="card-image" src="assets/Img_home_02.png">
<div class="card-text">
<p class="card-header">Search</p>
<p class="card-title">구매를 원하는<br>상품을 검색하세요</p>
<p class="card-explain">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
</div>
</div>
</section>
<section class="odd">
<div class="card odd">
<img class="card-image" src="assets/Img_home_03.png">
<div class="card-text">
<p class="card-header">Register</p>
<p class="card-title">판매를 원하는<br>상품을 등록하세요</p>
<p class="card-explain">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
Comment on lines +52 to +54
Copy link
Collaborator

Choose a reason for hiding this comment

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

각 섹션의 헤딩 요소는 <h1/> - <h6/> 요소를 나타내시면 더 좋을 것 같습니다!

</div>
</div>
</section>
</section>
<!-- 하단 배너 -->
<section class="bottom-banner">
<div class="bottom-banner-contents">
<div class="bottom-banner-text">
<p>믿을 수 있는<br>판다마켓 중고거래</p>
</div>
<img class="bottom-banner-img" src="assets/Img_home_bottom.png">
</div>
</section>
<!-- 푸터 -->
<footer class="footer">
<div class="footer-content">
<p>@codeit - 2024</p>
<div class="text">
<a href="privacy">Privacy Policy</a>
<a href="faq">FAQ</a>
</div>
<div class="icons">
<img src="assets/ic_facebook.png" alt="페이스북 바로가기">
<img src="assets/ic_twitter.png" alt="트위터 바로가기">
<img src="assets/ic_youtube.png" alt="유튜브 바로가기">
<img src="assets/ic_instagram.png" alt="인스타그램 바로가기">
Comment on lines +77 to +80
Copy link
Collaborator

Choose a reason for hiding this comment

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

유의미한 대체 텍스트 잘 적용하셨습니다. 👍
푸터 내 SNS 아이콘은 클릭 시 해당 서비스로 이동하도록 되어 있는 것으로 알고 있는데, <a/> 태그 적용해야 하는지 한 번 확인해 주세요~

</div>
</div>
</footer>
</body>
</html>
14 changes: 14 additions & 0 deletions items.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>판다마켓-items</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header></header>
<section></section>
<!-- 아이템.. 판매물품 리스트(grid) 화면 -->
<footer></footer>
</body>
</html>
38 changes: 38 additions & 0 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>판다마켓-login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login form">
<a class="login title" href="index.html"><img src="assets/logo_lg.png"></a>
<div class="login main-content">
<!-- field: 각 응답 하나하나, fields: 채워야하는 응답 전체 -->
<form class="fields">
<div class="field">
<label for="email">이메일</label>
<input id="email" name="email" type="email" placeholder="이메일을 입력해주세요">
Comment on lines +13 to +16
Copy link
Collaborator

Choose a reason for hiding this comment

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

폼 요소에 <form/> 태그 사용하시고, 각 필드에 id와 for 속성을 올바르게 지정하셨네요. 잘 하셨습니다! 👍

</div>
<div class="field">
<label for="password">비밀번호</label>
<input id="password" name="password"type="password" placeholder="비밀번호를 입력해주세요">
<img class="visibility-icon" src="assets/btn_visibility_off_24px.png">
</div>
<button>로그인</button>
Copy link
Collaborator

Choose a reason for hiding this comment

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

<form/> 태그 내에 여러 버튼을 사용할 수 있는데요. type='submit' 또는 별도로 지정하지 않은 버튼은 양식 제출 버튼으로 사용됩니다. 나중에 참고하시면 좋을 것 같네요~!!

</form>
<!-- sns 로그인 안내 -->
<div class="sns-login">
<p>간편 로그인하기</p>
<div class="sns-login-imgs">
<a href="https://www.google.com/"><img src="assets/ic_color_google.png" alt="구글 로그인 바로가기"></a>
<a href="https://www.kakaocorp.com/page/"><img src="assets/ic_color_kakaotalk.png" alt="카카오톡 로그인 바로가기"></a>
</div>
</div>
<!-- 로그인할 계정이 없다면 회원가입으로 안내 -->
<div class="ask-signup"><p>판다마켓이 처음이신가요?</p><a href="signup.html">회원가입</a></div>
</div>
</div>
</body>
</html>
14 changes: 14 additions & 0 deletions privacy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>판다마켓-privacy</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header></header>
<section></section>
<!-- privacy -->
<footer></footer>
</body>
</html>
47 changes: 47 additions & 0 deletions signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>판다마켓-signup</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sign-up form">
<a class="sign-up title" href="index.html"><img src="assets/logo_lg.png"></a>
<div class="sign-up main-content">
<!-- field: 각 응답 하나하나, fields: 채워야하는 응답 전체 -->
<form class="fields">
<div class="field">
<label for="email">이메일</label>
<input id="email" name="email" type="email" placeholder="이메일을 입력해주세요">
</div>
<div class="field">
<label for="name">닉네임</label>
<input id="name" name="name" type="text" placeholder="닉네임을 입력해주세요">
</div>
<div class="field">
<label for="password">비밀번호</label>
<input id="password" name="password" type="password" placeholder="비밀번호를 입력해주세요">
<img class="visibility-icon" src="assets/btn_visibility_off_24px.png">
</div>
<div class="field">
<label for="password-check">비밀번호 확인</label>
<input id="password-check" name="password-check" type="password" placeholder="비밀번호를 다시 한 번 입력해주세요">
<img class="visibility-icon" src="assets/btn_visibility_off_24px.png">
</div>
<button>회원가입</button>
</form>
<!-- sns 로그인 안내 -->
<div class="sns-login">
<p>간편 로그인하기</p>
<div class="sns-login-imgs">
<a href="https://www.google.com/"><img src="assets/ic_color_google.png" alt="구글 로그인 바로가기"></a>
<a href="https://www.kakaocorp.com/page/"><img src="assets/ic_color_kakaotalk.png" alt="카카오톡 로그인 바로가기"></a>
</div>
</div>
<!-- 회원가입이 필요없다면 로그인으로 이동 -->
<div class="ask-login"><p>이미 회원이신가요?</p><a href="login.html">로그인</a></div>
</div>
</div>
</body>
</html>
Loading
Loading