Skip to content

[정새론] sprint4 #130

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Merged
merged 2 commits into from
May 14, 2025
Merged

[정새론] sprint4 #130

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
300334c
🎉 initial commit
Squarecat-meow Apr 24, 2025
57ea63c
🎉 initial commit
Squarecat-meow Apr 29, 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 image/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.
222 changes: 114 additions & 108 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,119 +1,125 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style/style.css" />
<link rel="stylesheet" href="./style/global.css" />
<title>판다마켓</title>
</head>

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

<body>
<header>
<nav class="nav-content">
<a href="/">
<img src="image/logo.png" alt="판다마켓 로고" />
</a>
<a href="login.html">
<button class="login-button">로그인</button>
</a>
</nav>
</header>
<main>
<section class="hero">
<div class="hero-content">
<div>
<h1 class="hero-text">
일상의 모든 물건을<br />
거래해 보세요
</h1>
<a href="/items">
<button class="hero-button">구경하러 가기</button>
</a>
<body>
<header>
<nav class="nav-content">
<a href="/">
<img src="image/logo.png" alt="판다마켓 로고" />
</a>
<a href="login.html">
<button class="login-button">로그인</button>
</a>
</nav>
</header>
<main>
<section class="hero">
<div class="hero-content">
<div class="hero-info">
<h1 class="hero-text">일상의 모든 물건을 거래해 보세요</h1>
<a href="/items">
<button class="hero-button">구경하러 가기</button>
</a>
</div>
<img src="image/Img_home_top.png" alt="판다마켓 히어로 이미지" />
</div>
<img src="image/Img_home_top.png" alt="판다마켓 히어로 이미지" />
</div>
</section>
<article class="feature-section">
<div class="feature">
<img src="image/Img_home_01.png" alt="카드 이미지 1번" />
<div class="feature-content">
<span>Hot Item</span>
<h2>
인기 상품을<br />
확인해 보세요
</h2>
<p>
가장 HOT한 중고거래 물품을<br />
판다마켓에서 확인해 보세요
</p>
</section>
<article class="feature-section">
<div class="feature">
<img src="image/Img_home_01.png" alt="카드 이미지 1번" />
<div class="feature-content">
<span>Hot Item</span>
<h2>인기 상품을 확인해 보세요</h2>
<p>
가장 HOT한 중고거래 물품을<br />
판다마켓에서 확인해 보세요
</p>
</div>
</div>
</div>
</article>
<article class="feature-section">
<div class="feature">
<div class="feature-content-rev">
<span>Search</span>
<h2>
구매를 원하는<br />
상품을 검색하세요
</h2>
<p>
구매하고 싶은 물품은 검색해서<br />
쉽게 찾아보세요
</p>
</article>
<article class="feature-section">
<div class="feature feature-rev">
<img src="image/Img_home_02.png" alt="카드 이미지 2번" />
<div class="feature-content feature-content-rev">
<span>Search</span>
<h2>구매를 원하는 상품을 검색하세요</h2>
<p>
구매하고 싶은 물품은 검색해서<br />
쉽게 찾아보세요
</p>
</div>
</div>
<img src="image/Img_home_02.png" alt="카드 이미지 2번" />
</div>
</article>
<article class="feature-section">
<div class="feature">
<img src="image/Img_home_03.png" alt="카드 이미지 3번" />
<div class="feature-content">
<span>Register</span>
<h2>
판매를 원하는<br />
상품을 등록하세요
</h2>
<p>
어떤 물건이든 판매하고 싶은 상품을<br />
쉽게 등록하세요
</p>
</article>
<article class="feature-section">
<div class="feature">
<img src="image/Img_home_03.png" alt="카드 이미지 3번" />
<div class="feature-content">
<span>Register</span>
<h2>판매를 원하는 상품을 등록하세요</h2>
<p>
어떤 물건이든 판매하고 싶은 상품을<br />
쉽게 등록하세요
</p>
</div>
</div>
</article>
</main>
<footer>
<div class="footer-content">
<h1>
믿을 수 있는<br />
판다마켓 중고거래
</h1>
<img src="image/Img_home_bottom.png" alt="판다마켓 푸터 이미지" />
</div>
</article>
</main>
<footer>
<div class="footer-content">
<h1>
믿을 수 있는<br />
판다마켓 중고거래
</h1>
<img src="image/Img_home_bottom.png" alt="판다마켓 푸터 이미지" />
</div>
<div class="footer-info">
<div class="footer-info-content">
<div class="footer-copyright">
<span>©codeit - 2024</span>
</div>
<div class="footer-menu">
<a href="/privacy.html"><span>Privacy Policy</span></a>
<a href="/faq.html"><span>FAQ</span></a>
</div>
<div class="footer-social">
<a href="https://facebook.com" target="_blank"><img src="image/ic_facebook.png" width="20px" height="20px"
alt="판다마켓 페이스북" /></a>
<a href="https://x.com" target="_blank"><img src="image/ic_twitter.png" width="20px" height="20px"
alt="판다마켓 트위터" /></a>
<a href="https://youtube.com" target="_blank"><img src="image/ic_youtube.png" width="20px" height="20px"
alt="판다마켓 유튜브" /></a>
<a href="https://instagram.com" target="_blank"><img src="image/ic_instagram.png" width="20px" height="20px"
alt="판다마켓 인스타그램" /></a>
<div class="footer-info">
<div class="footer-info-content">
<div class="footer-copyright">
<span>©codeit - 2024</span>
</div>
<div class="footer-menu">
<a href="/privacy.html"><span>Privacy Policy</span></a>
<a href="/faq.html"><span>FAQ</span></a>
</div>
<div class="footer-social">
<a href="https://facebook.com" target="_blank"
><img
src="image/ic_facebook.png"
width="20px"
height="20px"
alt="판다마켓 페이스북"
/></a>
<a href="https://x.com" target="_blank"
><img
src="image/ic_twitter.png"
width="20px"
height="20px"
alt="판다마켓 트위터"
/></a>
<a href="https://youtube.com" target="_blank"
><img
src="image/ic_youtube.png"
width="20px"
height="20px"
alt="판다마켓 유튜브"
/></a>
<a href="https://instagram.com" target="_blank"
><img
src="image/ic_instagram.png"
width="20px"
height="20px"
alt="판다마켓 인스타그램"
/></a>
</div>
</div>
</div>
</div>
</footer>
</body>

</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="en">
<head>
<meta charset="UTF-8" />
<title>판다마켓</title>
</head>
<body>
<main>
<header>
<h1>아이템 페이지</h1>
</header>
</main>
</body>
</html>
140 changes: 89 additions & 51 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,94 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style/#.css" />
<link rel="stylesheet" href="./style/global.css" />
<title>판다마켓</title>
</head>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="login.css" />
<link rel="stylesheet" href="global.css" />
<title>판다마켓</title>
</head>

<body>
<div id="wrapper">
<header>
<a href="index.html">
<img src="image/logo_big.png" width="396px" alt="판다마켓 로고">
</a>
</header>
<main>
<section>
<form>
<label for="email">
<span>이메일</span>
<input type="email" name="email" placeholder="codeit@email.com" autocomplete="on">
</label>
<label for="password">
<span>비밀번호</span>
<div class="password-container">
<input type="password" name="password" placeholder="비밀번호">
<button type="button" id="pw-visible">
<img src="image/btn_visibility_off_24px.png" alt="비밀번호 가리기">
</button>
</div>
</label>
<button type="submit">로그인</button>
</form>
</section>
<section class="easy-login-container">
<span>간편 로그인하기</span>
<div class="easy-login-icon">
<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer"><img src="image/Component 2.png"
alt="간편로그인 구글"></a>

<a href="https://www.kakaocorp.com/page/" target="_blank" rel="noopener noreferrer"><img
src="image/Component 3.png" alt="간편로그인 카카오"></a>
</div>
</section>
</main>
<footer>
<span>판다마켓이 처음이신가요?</span>
<a href="#.html">회원가입</a>
</footer>
</div>
</body>
<body>
<script src="./script/#.js" type="module"></script>
Copy link
Collaborator

Choose a reason for hiding this comment

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

script 태그 위치도 브라우저 동작 원리를 이해하고계시다면 달라질수있답니다 :)
아래 아티클 참고로 읽어보세요!

참고

<div id="wrapper">
<header>
<a href="index.html">
<img src="image/logo_big.png" width="396px" alt="판다마켓 로고" />
</a>
</header>
<main>
<section>
<form id="login-form" action="items.html">
<label for="email">
<span>이메일</span>
<input
type="email"
name="email"
placeholder="codeit@email.com"
autocomplete="on"
id="email-input"
/>
</label>
<span class="warning-message">이메일을 입력해주세요.</span>
<span class="warning-message">잘못된 이메일 형식입니다.</span>
<label for="password">
<span>비밀번호</span>
<div class="password-container">
<input
type="password"
name="password"
id="password-input"
placeholder="비밀번호"
/>
<button
class="password-show-button"
type="button"
id="pw-visible"
>
<img
src="image/btn_visibility_off_24px.png"
alt="비밀번호 가리기"
/>
</button>
</div>
</label>
<span class="warning-message">비밀번호를 입력해주세요.</span>
<span class="warning-message"
>비밀번호를 8자 이상 입력해주세요.</span
>
<button
class="login-button"
id="login-button"
type="submit"
disabled
>
로그인
</button>
</form>
</section>
<section class="easy-login-container">
<span>간편 로그인하기</span>
<div class="easy-login-icon">
<a
href="https://www.google.com/"
target="_blank"
rel="noopener noreferrer"
><img src="image/Component 2.png" alt="간편로그인 구글"
/></a>

<a
href="https://www.kakaocorp.com/page/"
target="_blank"
rel="noopener noreferrer"
><img src="image/Component 3.png" alt="간편로그인 카카오"
/></a>
</div>
</section>
</main>
<footer>
<span>판다마켓이 처음이신가요?</span>
<a href="#.html">회원가입</a>
</footer>
</div>
</body>
</html>
Loading
Loading