Skip to content

[김태일] Sprint2 #108

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 2 commits into from
Mar 20, 2025
Merged

[김태일] Sprint2 #108

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
3fb89e2
스프린트 미션2 제출
Taeil08 Mar 18, 2025
b7f5991
미션2 제출
Taeil08 Mar 18, 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
Binary file removed image/Group.png
View file
Open in desktop
Binary file not shown.
Binary file added image/eye_icon.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/favicon.ico
View file
Open in desktop
Binary file not shown.
Binary file added image/google.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.
0 image/Vector (1).png → image/instagram.png
View file
Open in desktop
File renamed without changes
Binary file added image/invisible_icon.png
View file
Open in desktop
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 20, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
eye_icon.png 와 invisible_icon.png 의 이미지 크기가 달라서 비밀번호 토글을 누를때마다 덜컹거리는 느낌이 들거에요.
이를 css로 해결하실 수도 있지만 추천드리는 방법은, 두 이미지를 같은 사이즈로 추출하시는 겁니다.
디자인 상 invisible_icon가 더 클 수 밖에 없으니 eye_icon 이미지를 여백을 주어 동일한 크기로 추출하시는 것을 추천드려요!

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/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 image/panda.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.
0 image/Vector.png → image/twitter.png
View file
Open in desktop
File renamed without changes
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.
26 changes: 15 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<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="./style/style.css">
</head>
<body>
<div class="title">
Expand All @@ -16,7 +16,9 @@
<!-- 텍스트와 사진 -->
<div class="inner_box0">
<div class text-box0>
<h1>일상의 모든 물건을 거래해 보세요</h1>
<h1>일상의 모든 물건을<br>
거래해 보세요
</h1>
<a href="./item.html"><p class="see">구경하러가기</p></a>
</div>
<div class="contents0">
Expand All @@ -31,15 +33,17 @@ <h1>일상의 모든 물건을 거래해 보세요</h1>
</div>
<div class="text-box">
<p class="hot-item">Hot_item</p>
<h1>인기 상품을</h1>
<h1>확인해 보세요</h1>
<h1>
인기 상품을<br>
확인해 보세요
</h1>
<p class="description">가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요</p>
</div>
</div>
<!-- main 컨테이너 -->
<div class="container1">
<div class="text-box2">
<h1>구매를 원하는 상품을 검색하세요</h1>
<h1>구매를 원하는<br> 상품을 검색하세요</h1>
<p class="description">구매하고 싶은 물품은 검색해서 쉽게 찾아보세요</p>
</div>
<div class="contents">
Expand All @@ -52,8 +56,8 @@ <h1>구매를 원하는 상품을 검색하세요</h1>
<img src="./image/Img_home_03.png">
</div>
<div class="text-box3">
<p class="register">register</p>
<h1>판매를 원하는<br> 상품을 등록하세요</h1>
<p class="register">Register</p>
<h1>판매를 원하는<br>상품을 등록하세요</h1>
<p class="description">어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요</p>
</div>
</div>
Expand All @@ -74,17 +78,17 @@ <h2>믿을 수 있는<br> 판다마켓 중고 거래</h2>
<!-- 텍스트와 아이콘 -->
<div class="inner_box2">
<div class="copyright">
<p>©codeit - 2024</p>
<p>©codeit-2024</p>
</div>
<div class="links">
<a href="./privacy_policy.html">privacy policy</a>
<a href="./FAQ.html">FAQ</a>
</div>
<div class="social_img">
<a href="https://www.facebook.com/" target="_blank" ><img src="./image/ic_facebook.png"></a>
<a href="https://x.com/?lang=ko" target="_blank"><img src="./image/Vector.png"></a>
<a href="https://www.youtube.com/" target="_blank"><img src="./image/Group.png"></a>
<a href="https://www.instagram.com/" target="_blank"><img src="./image/Vector (1).png"></a>
<a href="https://x.com/?lang=ko" target="_blank"><img src="./image/twitter.png"></a>
<a href="https://www.youtube.com/" target="_blank"><img src="./image/youtube.png"></a>
<a href="https://www.instagram.com/" target="_blank"><img src="./image/instagram.png"></a>
</div>
</div>
</footer>
Expand Down
62 changes: 62 additions & 0 deletions sign-in.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓 - 로그인</title>
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 20, 2025

Choose a reason for hiding this comment

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

💊 제안
타이틀은 브라우저 탭에 표시되는 정보로 주로 어떤 사이트의 어떤 페이지에 머무르고 있는지를 표시합니다~
자세히 적어주신 것 좋아요 👍

<link rel="icon" href="./image/favicon.ico" />
<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/sign-in.css" />
</head>
<body>
<div class="login-container">
<div class="title">
<a href="./index.html"><img src="./image/panda.png" alt="판다로고"></a>
<h1>판다마켓</h1>
Comment on lines +20 to +21
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 20, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
"판다마켓"이라는 로고를 피그마에서 확인해보면 지금 사용하고 있는 pretenard가 아닌 ROKAF라는 폰트로 사용되고 있는 것을 확인할 수 있습니다~
이를 디자인과 동일하게 구현하는 것이 좋고, 폰트 파일은 일반적으로 이미지보다 파일 크기가 크니, 이미지를 추출하셔서 사용하시는 것을 추천드려요!

또한 유저는 로고를 클릭하면 루트 페이지로 간다고 예상하니 a 태그 안에 판다마켓도 넣어주세요~

Suggested change
<a href="./index.html"><img src="./image/panda.png" alt="판다로고"></a>
<h1>판다마켓</h1>
<a href="./index.html">
<img src="./image/panda.png" alt="판다로고">
<img src="./image/panda-typo.png" alt="판다마켓">
</a>

</div>
<div input-form>
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 20, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
오타이신 것 같아요~

Suggested change
<div input-form>
<div class="input-form">

<form>
<div class="group">
<label for="email">이메일</label>
<input type="email" id="email" name="email">
Comment on lines +26 to +27
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 20, 2025

Choose a reason for hiding this comment

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

👍 칭찬
label과 Input을 연결해주신 점 좋습니다~

</div>
<div class="group">
<label for="password">비밀번호</label>
<div class="password-input">
<input type="password" id="password" name="password">
<img src="./image/invisible_icon.png" class="password-icon" alt="비밀번호 보기">
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 20, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
해당 요소는 클릭 시 비밀번호가 보이고 안 보이게 만드는 요소가 될 것이므로 button요소로 작성하시는 것을 추천드려요.

</div>
</div>
<button type="submit">로그인</button>
</form>
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 20, 2025

Choose a reason for hiding this comment

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

👍 칭찬
form 태그로 관련된 요소만 묶어 주신 것 좋습니다~

</div>
<div class="bottom">
<div class="input-bottom">
<h1>간편 로그인하기</h1>
</div>
<div class="social">
<a href="https://www.google.co.kr/?hl=ko" target="blank">
<img src="./image/google.png">
</a>
<a href="https://www.kakaocorp.com/page/service/service/KakaoTalk?lang=ko" target="blank">
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 20, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
a 태그의 target 속성에는 예약어가 들어가야합니다~
mdn에서 입력 가능한 예약어와 동작을 확인할 수 있습니다.
새창으로 열리게 하고 싶으시면 _blank로 해주셔야 합니다~

a tag

<img src="./image/kakaotalk.png">
</a>
</div>

</div>
<div class="footer">
<h1>판다마켓이 처음이신가요?</h1>
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 20, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
h1 태그는 heading 1이라는 의미의 태그입니다. 이러한 h1~h6까지의 태그들은 시멘틱한 작성에 중요한 역할을 합니다.
그중 h1 태그는 제목에 해당하는 친구입니다.
목차나 영화를 생각해보시면 제목은 늘 1개입니다. 그래서 h1태그는 한 페이지에 한번만 사용하는 것이 좋습니다.
다만 이는 접근성을 위한 권고 사항일 뿐 필수사항은 아니지만 지키시는 것이 좋습니다.

mdn heading

<a href="./signup.html">회원가입</a>
</div>


</div>

</body>
</html>
72 changes: 72 additions & 0 deletions signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!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="icon" href="./image/favicon.ico" />
<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/signup.css" />
</head>
<body>
<div class="login-container">
<div class="title">
<a href="./index.html"><img src="./image/panda.png" alt="판다로고"></a>
<h1>판다마켓</h1>
</div>
<div input-form>
<form>
<div class="group">
<label for="email">이메일</label>
<input type="email" id="email" name="email">
</div>
<div class="group">
<label for="username">닉네임</label>
<input type="username" id="username" name="username">
</div>
<div class="group">
<label for="password">비밀번호</label>
<div class="password-input">
<input type="password" id="password" name="password">
<img src="./image/invisible_icon.png" class="password-icon" alt="비밀번호 보기">
</div>
</div>
<div class="group">
<label for="password-repeat">비밀번호 확인</label>
<div class="password-input">
<input id="password-repeat" name="password-repeat">
<img src="./image/eye_icon.png" class="password-icon" alt="비밀번호 보기">
</div>
</div>
<button type="submit">로그인</button>
</form>
</div>
<div class="bottom">
<div class="input-bottom">
<h1>간편 로그인하기</h1>
<div class="social">
<a href="https://www.google.co.kr/?hl=ko" target="blank">
<img src="./image/google.png">
</a>
<a href="https://www.kakaocorp.com/page/service/service/KakaoTalk?lang=ko" target="blank">
<img src="./image/kakaotalk.png">
</a>
</div>
</div>
</div>
<div class="footer">
<h1>판다마켓이 처음이신가요?</h1>
<a href="./sign-in.html">로그인</a>
</div>


</div>

</body>
</html>
Empty file added sprint mission/style
View file
Open in desktop
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 20, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
사용하지 않는 파일이라면 삭제하시는 것이 관리측면에서 더 좋습니다~

Empty file.
Loading
Loading