Skip to content

[안연정] sprint2 #78

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
baeggmin merged 8 commits into from
Jun 18, 2025
Merged

[안연정] sprint2 #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8a91ca8
:lipstick:add: 메뉴 바 상단 고정
annmmww Jun 13, 2025
4ff9d01
:lipstick:add: login 페이지 추가
annmmww Jun 14, 2025
08a5057
:lipstick:update: 클래스 이름 변경
annmmww Jun 14, 2025
f8029c5
:lipstick:add: signup 페이지 추가
annmmww Jun 14, 2025
c80aae7
:lipstick:add img태그에 alt 추가
annmmww Jun 16, 2025
ffa7c4f
:art:시맨틱 태그 수정
annmmww Jun 16, 2025
ce63ef4
:lipsitck:add img태그에 alt추가
annmmww Jun 16, 2025
07c7564
:lipstick: 로고 위 상단 여백 수정
annmmww Jun 17, 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 img/btn_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 added img/login_page_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 img/social-login-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 img/social-login-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.
20 changes: 10 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<body>
<nav>
<div class="menu">
<div class="logo_image"><a href="./index.html"><img src="img/main_logo.png"></a></div>
<div class="logo_image"><a href="./index.html"><img src="img/main_logo.png" alt="메인 로고"></a></div>
<div class="login_area"><a href="./login.html"><button class="login_button">로그인</button></a></div>
</div>
</nav>
Expand All @@ -21,14 +21,14 @@
<a href="items.html"><button class="go_shopping_button">구경하러 가기</button></a>
</div>
<div class="go_shopping_img">
<img src="img/go_shopping_panda.png">
<img src="img/go_shopping_panda.png" alt="쇼핑하러 가기">
</div>
</div>
</section>
<section class="main_menu">
<div class="sub_menu">
<div class="hot_item">
<img src="img/hot_item.png">
<img src="img/hot_item.png" alt="인기 상품">
<div class="sub_menu_area">
<p class="sub_menu_title">Hot item</p>
<p class="sub_menu_info">인기 상품을<br>확인해 보세요</p>
Expand All @@ -38,7 +38,7 @@
</div>
<div class="sub_menu">
<div class="search">
<img src="img/search.png">
<img src="img/search.png" alt="구매를 원하는 상품">
<div class="sub_menu_area">
<p class="sub_menu_title">Search</p>
<p class="sub_menu_info">구매를 원하는<br>상품을 검색하세요</p>
Expand All @@ -48,7 +48,7 @@
</div>
<div class="sub_menu">
<div class="register">
<img src="img/register.png">
<img src="img/register.png" alt="상품 등록">
<div class="sub_menu_area">
<p class="sub_menu_title">Register</p>
<p class="sub_menu_info">판매를 원하는<br>상품을 등록하세요</p>
Expand All @@ -60,7 +60,7 @@
<section class="summary_menu">
<div class="summary_menu_info">
<p class="summary_menu_text">믿을 수 있는<br>판다마켓 중고 거래</p>
<img src="img/summary_menu_panda.png">
<img src="img/summary_menu_panda.png" alt="서머리 메뉴">
</div>
</section>
</main>
Expand All @@ -72,10 +72,10 @@
<a href="faq.html"><span>FAQ</span></a>
</div>
<div class="sns">
<a href="https://www.facebook.com" target="_blank"><img src="img/ic_facebook.png"></a>
<a href="https://www.twitter.com" target="_blank"><img src="img/ic_twitter.png"></a>
<a href="https://www.youtube.com" target="_blank"><img src="img/ic_youtube.png"></a>
<a href="https://www.instagram.com" target="_blank"><img src="img/ic_instagram.png"></a>
<a href="https://www.facebook.com" target="_blank"><img src="img/ic_facebook.png" alt="페이스북"></a>
<a href="https://www.twitter.com" target="_blank"><img src="img/ic_twitter.png" alt="트위터"></a>
<a href="https://www.youtube.com" target="_blank"><img src="img/ic_youtube.png" alt="유튜브"></a>
<a href="https://www.instagram.com" target="_blank"><img src="img/ic_instagram.png" alt="인스타그램"></a>
</div>
</div>
</footer>
Expand Down
Empty file removed login
View file
Open in desktop
Empty file.
57 changes: 57 additions & 0 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>판다마켓</title>
<link rel="stylesheet" href="style.css">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<main class="login-page">
<div class="login-container">
<div class="login-signup-main-logo">
<img src="./img/login_page_logo.png" alt="판다마켓 로고">
</div>
<div class="login-content">
Copy link
Collaborator

@baeggmin baeggmin Jun 18, 2025

Choose a reason for hiding this comment

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

form 요소 구현 시에는 <form> 태그를 활용해주시면 좋습니다.

<div class="member-info">
<div class="login-email">
<p>이메일</p>
Copy link
Collaborator

@baeggmin baeggmin Jun 18, 2025

Choose a reason for hiding this comment

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

라벨 요소는 <label> 태그를 활용해주세요!

Copy link
Collaborator

@baeggmin baeggmin Jun 18, 2025

Choose a reason for hiding this comment

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

또한 label 태그의 for 속성을 이용하면 input과 연동이되어 접근성이 좋아집니다.

<label for='email'>

<input id="email" type="text" autoComplete="off">
</div>
<div class="login-password">
<p>비밀번호</p>
<input id="password" type="password" autoComplete="off">
<div class="eyes">
<i class="fa fa-eye fa-lg"></i>
</div>
</div>
<div class="go-login">
<button>
Copy link
Collaborator

@baeggmin baeggmin Jun 18, 2025

Choose a reason for hiding this comment

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

form 태그 내부의 제출 버튼에 <button type='submit'> 을 추가해주면 input들과 연동이 되어 접근성을 개선할 수 있습니다.

로그인
</button>
</div>
</div>
<div class="social-login">
<div class="social-login-content">
<div class="social-login-text">
간편 로그인하기
</div>
<div class="social-login-img">
<a href="https://www.google.com/"><img src="./img/social-login-google.png"></a>
<a href="https://www.kakaocorp.com/page/"><img src="./img/social-login-kakao.png"></a>
</div>
</div>
</div>
<div class="go-signup">
판다마켓이 처음이신가요? <a href="./signup.html">회원가입</a>
</div>
</div>
</div>
</main>
</body>
</html>
67 changes: 67 additions & 0 deletions signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>판다마켓</title>
<link rel="stylesheet" href="style.css">
<link
Copy link
Collaborator

@baeggmin baeggmin Jun 18, 2025

Choose a reason for hiding this comment

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

font awsome을 활용해주셔도 상관없긴하지만, 그러면 image asset 으로 등록한 눈 아이콘은 불필요해질 것 같아요. 불필요한 코드 or 이미지는 제거해주시면 좋겠습니다.

rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"/>
</head>
<body>
<main class="signup-page">
Copy link
Collaborator

@baeggmin baeggmin Jun 18, 2025

Choose a reason for hiding this comment

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

signup-page > signup-container > signup-content처럼 레이아웃을 구조적으로 잘 나누어주셨습니다👍

<div class="signup-container">
<div class="login-signup-main-logo">
<img src="./img/login_page_logo.png" alt="판다마켓 로고">
</div>
<div class="signup-content">
<div class="signup-member-info">
<div class="login-email">
<p>이메일</p>
<input id="email" type="text" autoComplete="off">
Copy link
Collaborator

@baeggmin baeggmin Jun 18, 2025

Choose a reason for hiding this comment

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

autocomplete 속성도 활용해보셨군요! 👍HTML 속성은 대소문자를 구분하지 않긴하지만, HTML 표준 or 린터에서 경고가 날 수 있어 일관되게 소문자(autocomplete)로 작성하는 게 좋습니다.

</div>
<div class="login-nickname">
<p>닉네임</p>
<input id="nickname" type="text" autoComplete="off">
</div>
<div class="login-password">
<p>비밀번호</p>
<input id="password" type="password" autoComplete="off">
<div class="eyes">
<i class="fa fa-eye fa-lg"></i>
</div>
</div>
<div class="login-password-valid">
<p>비밀번호 확인</p>
<input id="password-valid" type="password" autoComplete="off">
<div class="eyes">
<i class="fa fa-eye fa-lg"></i>
</div>
</div>
<div class="btn-go-signup">
<button>
회원가입
</button>
</div>
</div>
<div class="social-login">
<div class="social-login-content">
<div class="social-login-text">
간편 로그인하기
</div>
<div class="social-login-img">
<a href="https://www.google.com/"><img src="./img/social-login-google.png"></a>
Copy link
Collaborator

@baeggmin baeggmin Jun 18, 2025

Choose a reason for hiding this comment

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

alt 속성이 누락되었네요!

<a href="https://www.kakaocorp.com/page/"><img src="./img/social-login-kakao.png"></a>
</div>
</div>
</div>
<div class="go-login-page">
이미 회원이신가요? <a href="./login.html">로그인</a>
</div>
</div>
</div>
</main>
</body>
</html>
Loading
Loading