Skip to content

[조인성] Sprint1 #11

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 9 commits into from
Feb 25, 2025
Merged

[조인성] Sprint1 #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d6189aa
index.html 파일 추가
Insung-Jo Feb 22, 2025
38f32ea
images 파일 추가
Insung-Jo Feb 22, 2025
f0fc8a7
html harder 부분 작업, style.css 파일 추가 및 레이아웃 작업, images 파일추가 및 수정
Insung-Jo Feb 22, 2025
1a85cec
메인 배너 추가 및 스타일 적용, 이미지 크기 변경
Insung-Jo Feb 23, 2025
d2621cd
로고 파일 교체, 커스텀 폰트 추가, HTML/CSS 수정
Insung-Jo Feb 23, 2025
00de7a4
카드 섹션 및 레이아웃 추가, footer 레이아웃 및 내용 추가, 링크 HTML 추가 및 반영
Insung-Jo Feb 23, 2025
8665b60
빠진 링크 페이지 추가 및 반영
Insung-Jo Feb 23, 2025
fb6c006
클래스 명 수정, 스타일 변경, 반응형 웹 디자인 추가
Insung-Jo Feb 23, 2025
c8c47c4
CSS 파일 최종 수정
Insung-Jo Feb 23, 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
11 changes: 11 additions & 0 deletions faq.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>
Binary file added fonts/ROKAF_Slab_Serif_Bold.woff
View file
Open in desktop
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 25, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
text logo를 위해 해당 폰트를 사용하신 것 같아요! 다만 이미지보다 폰트 파일의 크기가 훨씬 큽니다.
이렇게 사용처가 적고, 이미지로 대체가 가능한 경우 폰트 파일은 지우시고 이미지로 사용하시는 것을 추천드려요!

Binary file not shown.
Binary file added images/Icon/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 images/Icon/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 images/Icon/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 images/Icon/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 images/logo/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/main/Img_home_01.png
View file
Open in desktop
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 25, 2025

Choose a reason for hiding this comment

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

💊 제안
한 레포안에서는 동일한 룰을 따르는 것이 좋습니다.
따라서 images/icon으로 변경하시는 것과 img_home_01.png와 같은 식으로 통일성있는 구조를 잡으시는 것을 추천드려요~

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/main/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 images/main/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 images/main/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 images/main/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.
92 changes: 92 additions & 0 deletions index.html
View file
Open in desktop
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 25, 2025

Choose a reason for hiding this comment

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

👍 칭찬
BEM 방식처럼 네이밍 방법론을 적용해서 클래스명을 작성하신점이 좋아요~
CSS 작성법과 네이밍 방법론은 다양하게 있으니 이것저것 시도해보시고 마음에 드는 방식을 찾으시면 좋겠네요~

Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 25, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
html lang 속성은 스크린리더, 검색 엔진등에게 해당 사이트가 어떤 언어 기반으로 작성되었는지 설명하는 속성입니다.
en은 english라는 의미이니 ko로 변경해주세요!

Suggested change
<html lang="en">
<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.min.css" />
<link rel="stylesheet" href="style.css">
<title>판다마켓</title>
</head>
<body>
<header>
<nav class="herader-nav">
<a class="header__logo-box": href ="/">
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 25, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청

Suggested change
<a class="header__logo-box": href ="/">
<a class="header__logo-box" href ="/">

<img class="header__logo" src="images/logo/logo.png">
<span class="header__title">판다마켓</span>
</a>

<a class="header__button button" href="login.html">로그인</a>
</nav>
</header>
<main>
<section class="banner-section">
<div class="banner">
<div class="banner__title">
<h1 class="banner__text">일상의 모든 물건을 <sapn class="text-wrap"> 거래해 보세요</sapn></h1>
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 25, 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

<a class="banner__button button" href="items.html">구경하러 가기</a>
</div>
<img class="banner__img" src="images/main/Img_home_top.png">
</div>
</section>
<section class="card-section">
<div class="card">
<img class="card__img" src="images/main/Img_home_01.png">
<div class="card__text">
<p class="card__category">Hot item</p>
<h1 class="card__title">인기 상품을 <span class="text-wrap"> 확인해 보세요</span></h1>
<p class="card__description">가장 HOT한 중고거래 물품을<br> 판다 마켓에서 확인해 보세요</p>
</div>
</div>
</section>
<section class="card-section">
<div class="card card--reverse">
<img class="card__img" src="images/main/Img_home_02.png">
<div class="card__text card__text--reverse">
<p class="card__category">Search</p>
<h1 class="card__title">구매를 원하는 <span class="text-wrap">상품을 검색하세요</span></h1>
<p class="card__description">구매하고 싶은 물품은 검색해서<br> 쉽게 찾아보세요</p>
</div>
</div>
</section>
<section class="card-section">
<div class="card">
<img class="card__img" src="images/main/Img_home_03.png">
<div class="card__text">
<p class="card__category">Register</p>
<h1 class="card__title">판매를 원하는 <span class="text-wrap">상품을 등록하세요</span></h1>
<p class="card__description">어떤 물건이든 판매하고 싶은 상품을<br> 쉽게 등록하세요</p>
</div>
</div>
</section>
<section class="banner-section bottom-banner">
<div class="banner">
<div class="banner__title banner__title--center">
<h1 class="banner__text">믿을 수 있는 <span class="text-wrap">판다마켓 중고 거래</span></h1>
</div>
<img class="banner__img" src="images/main/Img_home_bottom.png">
</div>
</section>
</main>
<footer class="footer">
<span class="footer__name">©codeit - 2024</span>
<div class="footer-links">
<a class="footer__link" href="privacy.html">Privacy Policy</a>
<a class="footer__link" href="faq.html">FAQ</a>
</div>
<div class="footer-icons">
<a class="footer__icon" href="https://www.facebook.com" target="_blank">
<img src="images/icon/ic_facebook.png" alt="facebook">
</a>
<a class="footer__icon" href="https://x.com" target="_blank">
<img src="images/icon/ic_twitter.png" alt="twitter">
</a>
<a class="footer__icon" href="https://youtube.com" target="_blank">
<img src="images/icon/ic_youtube.png" alt="youtube">
</a>
<a class="footer__icon" href="https://instagram.com" target="_blank">
<img src="images/icon/ic_instagram.png" alt="instagram">
</a>
</div>
Comment on lines +76 to +89
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Feb 25, 2025

Choose a reason for hiding this comment

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

💊 제안
이 영역은 로고들의 모음이라고 할 수 있습니다. 관련된 요소들끼리 묶인 목록이니 의미록적인 마크업을 작성한다면 list 관련 태그로 작성하시는 것을 추천드립니다.

Suggested change
<div class="footer-icons">
<a class="footer__icon" href="https://www.facebook.com" target="_blank">
<img src="images/icon/ic_facebook.png" alt="facebook">
</a>
<a class="footer__icon" href="https://x.com" target="_blank">
<img src="images/icon/ic_twitter.png" alt="twitter">
</a>
<a class="footer__icon" href="https://youtube.com" target="_blank">
<img src="images/icon/ic_youtube.png" alt="youtube">
</a>
<a class="footer__icon" href="https://instagram.com" target="_blank">
<img src="images/icon/ic_instagram.png" alt="instagram">
</a>
</div>
<ul class="footer-icons">
<li>
<a class="footer__icon" href="https://www.facebook.com" target="_blank">
<img src="images/icon/ic_facebook.png" alt="facebook">
</a>
</li>
</ul>

</footer>
</body>
</html>
11 changes: 11 additions & 0 deletions items.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>
11 changes: 11 additions & 0 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>
11 changes: 11 additions & 0 deletions privacy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>
Loading
Loading