Skip to content

[전수영]Sprint2 #158

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
dongqui merged 2 commits into from
May 21, 2025
Merged

[전수영]Sprint2 #158

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
ff1ddb4
스프린트 미션 2 진행
daonJeon May 19, 2025
795db65
style.css 커밋
daonJeon May 20, 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 added images/ico_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.
Binary file added images/ico_kakao.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 images/ico_visibility_off.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 images/ico_visibility_on.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 modified images/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 images/logo_s.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.
167 changes: 95 additions & 72 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,87 +1,110 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css" />
<title>판다마켓</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header" class="header">
<div class="main_inner">
<h1 class="logo"><a href="/"><img src="images/logo.png" alt="판다마켓"/></a></h1>
<a href="/login" class="btn-blue small48">로그인<span></span></a>
</div>
</header>

<main id="contents">
<section id="section_top" class="section section_top">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
as="style"
crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css"
/>
<title>판다마켓</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header id="header" class="header">
<div class="main_inner">
<div class="text_box">
<h2 class="main_text">일상의 모든 물건을<br>거래해 보세요</h2>
<a href="/items" class="btn-blue large">구경하러 가기<span></span></a>
</div>
<h1 class="logo">
<a href="/"><img src="images/logo.png" alt="판다마켓" /></a>
</h1>
<a href="login.html" class="btn-blue small48">로그인</a>
</div>
</section>
<section id="section2" class="section section2">
<div class="main_inner">
<div class="center_box">
<img src="images/img_home_01.png" alt=""/>
</header>

<main id="contents" class="contents">
<section id="section_top" class="section section_top">
<div class="main_inner">
<div class="text_box">
<span class="tag_text">Hot item</span>
<h2 class="main_text">인기 상품을<br>확인해 보세요</h2>
<p class="desc_text">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
<h2 class="main_text">일상의 모든 물건을<br />거래해 보세요</h2>
<a href="/items" class="btn-blue large">구경하러 가기</a>
</div>
</div>
</div>
</section>
<section id="section3" class="section section3">
<div class="main_inner">
<div class="center_box">
<div class="text_box">
<span class="tag_text">Search</span>
<h2 class="main_text">구매를 원하는<br>상품을 검색하세요</h2>
<p class="desc_text">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
</section>
<section id="section2" class="section section2">
<div class="main_inner">
<div class="center_box">
<img src="images/img_home_01.png" alt="" />
<div class="text_box">
<span class="tag_text">Hot item</span>
<h2 class="main_text">인기 상품을<br />확인해 보세요</h2>
<p class="desc_text">
가장 HOT한 중고거래 물품을<br />판다 마켓에서 확인해 보세요
</p>
</div>
</div>
<img src="images/img_home_02.png" alt=""/>
</div>
</div>
</section>
<section id="section4" class="section section4">
<div class="main_inner">
<div class="center_box">
<img src="images/img_home_03.png" alt=""/>
</section>
<section id="section3" class="section section3">
<div class="main_inner">
<div class="center_box">
<div class="text_box">
<span class="tag_text">Search</span>
<h2 class="main_text">구매를 원하는<br />상품을 검색하세요</h2>
<p class="desc_text">
구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요
</p>
</div>
<img src="images/img_home_02.png" alt="" />
</div>
</div>
</section>
<section id="section4" class="section section4">
<div class="main_inner">
<div class="center_box">
<img src="images/img_home_03.png" alt="" />
<div class="text_box">
<span class="tag_text">Register</span>
<h2 class="main_text">판매를 원하는 <br />상품을 등록하세요</h2>
<p class="desc_text">
어떤 물건이든 판매하고 싶은 상품을<br />쉽게 등록하세요
</p>
</div>
</div>
</div>
</section>
<section id="section_bottom" class="section section_bottom">
<div class="main_inner">
<div class="text_box">
<span class="tag_text">Register</span>
<h2 class="main_text">판매를 원하는 <br>상품을 등록하세요</h2>
<p class="desc_text">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
<h2 class="main_text">믿을 수 있는<br />판다마켓 중고 거래</h2>
</div>
</div>
</div>
</section>
<section id="section_bottom" class="section section_bottom">
</section>
</main>
<footer id="footer" class="footer">
<div class="main_inner">
<div class="text_box">
<h2 class="main_text">믿을 수 있는<br>판다마켓 중고 거래</h2>
<span class="copyright">©codeit - 2024</span>
<div class="menus">
<a href="/privacy">Privacy Policy</a>
<a href="/faq">FAQ</a>
</div>
<div class="sns">
<a href="https://www.facebook.com/?locale=ko_KR" target="_blank"
><img src="images/ico_facebook.png" alt="페이스북"
/></a>
<a href="https://x.com/?lang=ko" target="_blank"
><img src="images/ico_twitter.png" alt="트위터"
/></a>
<a
href="https://www.youtube.com/?hl=ko&gl=KR&app=desktop"
target="_blank"
><img src="images/ico_youtube.png" alt="유튜브"
/></a>
<a href="https://www.instagram.com/" target="_blank"
><img src="images/ico_insta.png" alt="인스타그램"
/></a>
</div>
</div>
</section>
</main>
<footer id="footer" class="footer">
<div class="main_inner">
<p class="copyright">©codeit - 2024</p>
<div class="menus">
<a href="/privacy">Privacy Policy</a>
<a href="/faq">FAQ</a>
</div>
<div class="sns">
<a href="https://www.facebook.com/?locale=ko_KR" target="_blank"><img src="images/ico_facebook.png" alt="페이스북"></a>
<a href="https://x.com/?lang=ko" target="_blank"><img src="images/ico_twitter.png" alt="트위터"></a>
<a href="https://www.youtube.com/?hl=ko&gl=KR&app=desktop" target="_blank"><img src="images/ico_youtube.png" alt="유튜브"></a>
<a href="https://www.instagram.com/" target="_blank"><img src="images/ico_insta.png" alt="인스타그램"></a>
</div>
</div>
</footer>
</body>
</html>
</footer>
</body>
</html>
77 changes: 77 additions & 0 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
as="style"
Copy link
Collaborator

@dongqui dongqui May 20, 2025

Choose a reason for hiding this comment

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

as는 preload를 지정했을 때만 사용됩니다 :) 다시 한 번 확인해주세요!

https://developer.mozilla.org/ko/docs/Web/HTML/Element/link#%ED%8A%B9%EC%84%B1

crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css"
/>
<title>판다마켓</title>
<link rel="stylesheet" href="style.css" />
</head>
<body class="login_page">
<main id="contents" class="contents">
<div class="flex_center_box">
<h1 class="logo large">
<a href="/"><img src="images/logo.png" alt="판다마켓" /></a>
</h1>

<form action="">
<div class="login_area_box">
<div class="input_box">
<label for="input_email" class="label">이메일</label>
Copy link
Collaborator

@dongqui dongqui May 20, 2025

Choose a reason for hiding this comment

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

label을 잘 적용해 주셨군요! 👍

<input
type="text"
id="input_email"
placeholder="이메일을 입력해주세요"
/>
</div>
<div class="input_box">
<label for="input_pw" class="label">비밀번호</label>
<div class="input btn_group">
<input
type="password"
id="input_pw"
placeholder="비밀번호를 입력해주세요"
/>
<button type="button" class="btn btn_pw">
<span>비밀번호 보이기</span>
Copy link
Collaborator

@dongqui dongqui May 21, 2025

Choose a reason for hiding this comment

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

접근성을 위해 넣어주신 건가요~!? 👍

aria-label 같은 속성을 사용하는 방법도 있습니다 :)

</button>
<!--<button type="button" class="btn btn_pw show"><span>비밀번호 보이기</span></button> -->
</div>
</div>
<button type="submit" class="btn-blue large wide" disabled>
<span>로그인</span>
</button>
<div class="blue_box">
<p>간편 로그인하기</p>
Copy link
Collaborator

@dongqui dongqui May 20, 2025

Choose a reason for hiding this comment

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

P는 문단을 나타내므로 부적절 합니다 :)

<div class="social_group">
<a
href="https://www.google.com/"
target="_blank"
Copy link
Collaborator

@dongqui dongqui May 20, 2025

Choose a reason for hiding this comment

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

외부 링크를 target="_blank" 속성을 사용하여 새 탭에서 열리도록 설정되어 있습니다. 이 경우 보안상 rel="noopener noreferrer" 속성을 추가하는 것이 좋습니다.

https://velog.io/@parkseonup/noopener%EC%99%80-noreferrer

요즘 현대 브라우저는 기본으로 처리 되긴 하지만.. 참고해 주세요 🤣

class="social"
>
<img src="images/ico_google.png" alt="구글 로그인" />
</a>
<a
href="https://www.kakaocorp.com/page/"
target="_blank"
class="social"
>
<img src="images/ico_kakao.png" alt="카카오 로그인" />
</a>
</div>
</div>
<p class="guide_signup_text">
판다마켓이 처음이신가요?
<a href="./signup.html">회원가입</a>
</p>
</div>
</form>
</div>
</main>
</body>
</html>
12 changes: 12 additions & 0 deletions palette.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
:root {
--gray900: #111827;
--gray800: #1f2937;
--gray700: #374151;
--gray600: #4b5563;
--gray500: #6b7280;
--gray400: #9ca3af;
--gray200: #e5e7eb;
--gray100: #f3f4f6;
--gray50: #f9fafb;
--blue: #3692ff;
}
100 changes: 100 additions & 0 deletions signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
as="style"
crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css"
/>
<title>판다마켓</title>
<link rel="stylesheet" href="style.css" />
<style></style>
</head>
<body class="login_page">
<main id="contents" class="contents">
<div class="flex_center_box">
<h1 class="logo large">
<a href="/"><img src="images/logo.png" alt="판다마켓" /></a>
</h1>

<form action="">
<div class="login_area_box">
<div class="input_box">
<label for="input_email" class="label">이메일</label>
<input
type="text"
id="input_email"
placeholder="이메일을 입력해주세요"
/>
</div>
<div class="input_box">
<label for="input_nickname" class="label">닉네임</label>
<input
type="text"
id="input_nickname"
placeholder="닉네임을 입력해주세요"
/>
</div>
<div class="input_box">
<label for="input_pw" class="label">비밀번호</label>
<div class="input btn_group">
<input
type="password"
id="input_pw"
placeholder="비밀번호를 입력해주세요"
/>
<button type="button" class="btn btn_pw">
<span>비밀번호 보이기</span>
</button>
<!--<button type="button" class="btn btn_pw show"><span>비밀번호 보이기</span></button> -->
</div>
</div>
<div class="input_box">
<label for="input_pw" class="label">비밀번호 확인</label>
<div class="input btn_group">
<input
type="password"
id="input_pw"
placeholder="비밀번호를 다시 한 번 입력해주세요"
/>
<button type="button" class="btn btn_pw">
<span>비밀번호 보이기</span>
</button>
<!--<button type="button" class="btn btn_pw show"><span>비밀번호 보이기</span></button> -->
</div>
</div>
<button type="submit" class="btn-blue large wide" disabled>
<span>회원가입</span>
</button>
<div class="blue_box">
<p>간편 로그인하기</p>
<div class="social_group">
<a
href="https://www.google.com/"
Copy link
Collaborator

@dongqui dongqui May 21, 2025

Choose a reason for hiding this comment

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

외부 링크를 target="_blank" 속성을 사용하여 새 탭에서 열리도록 설정되어 있습니다. 이 경우 보안상 rel="noopener noreferrer" 속성을 추가하는 것이 좋습니다.

https://velog.io/@parkseonup/noopener%EC%99%80-noreferrer

요즘 현대 브라우저는 기본으로 처리 되긴 하지만.. 참고해 주세요 🤣

target="_blank"
class="social"
>
<img src="images/ico_google.png" alt="구글 로그인" />
</a>
<a
href="https://www.kakaocorp.com/page/"
target="_blank"
class="social"
>
<img src="images/ico_kakao.png" alt="카카오 로그인" />
</a>
</div>
</div>
<p class="guide_signup_text">
이미 회원이신가요?
<a href="./login.html">로그인</a>
</p>
</div>
</form>
</div>
</main>
</body>
</html>
Loading
Loading