Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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 assets/Img_home_01.png
Copy link
Collaborator

Choose a reason for hiding this comment

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

❗️ 수정요청
해당 이미지 파일의 크기를 보면 588× 444로 되어 있습니다.
저희는 반응형 사이트를 만들고 있고, 이런 이미지들은 모바일에서도 사용할 것이기 때문에 추출하실때, 1배수가 아닌 2배수로 추출해주시는 것이 화질면에서 좋습니다.
아래처럼 figma export 탭에서 2x 로 설정하고 추출해주세요~

스크린샷 2025-02-24 오전 9 58 17 스크린샷 2025-02-24 오전 9 59 10

Copy link
Collaborator

Choose a reason for hiding this comment

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

💊 제안
한 레포안에서는 동일한 룰을 따르는 것이 좋습니다.
따라서 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 assets/Img_home_02.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 assets/Img_home_03.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 assets/Img_home_bottom.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 assets/Img_home_top.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 assets/favicon.ico
Copy link
Collaborator

Choose a reason for hiding this comment

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

👍 칭찬
파비콘 추가 좋아요 👍

Binary file not shown.
Binary file added assets/ic_facebook.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 assets/ic_instagram.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 assets/ic_twitter.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 assets/ic_youtube.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 assets/logo.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 assets/logo_mo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
157 changes: 157 additions & 0 deletions index.html
Copy link
Collaborator

Choose a reason for hiding this comment

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

👍 칭찬
시멘틱하게 잘 작성하셨어요 👍

Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.ico">
<link
rel="stylesheet"
as="style"
crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css"
/>
<link rel="stylesheet" href="style.css" />
<title>판다마켓</title>
</head>
<body>
<header>
<nav>
<h1>
<a href="/" class="logo">
<img src="/assets/logo.png" alt="판다마켓 로고" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

💊 제안
img 태그의 alt 속성은 alternative 라는 의미로, 이미지 파일을 다운로드하는 것에 실패해서 이미지 파일을 보여줄 수 없을 때
어떤 이미지인지 파악할 수 있게 대신 제공되거나, 스크린리더로 읽혀지는 문자를 의미합니다.
따라서 가능한 해당 이미지를 잘 표현할 수 있는 문자열을 넣어주는 것이 좋습니다.
지금의 경우는 판다마켓이 대체 택스트로 더 적절할 것 같아요.

Suggested change
<img src="/assets/logo.png" alt="판다마켓 로고" />
<img src="/assets/logo.png" alt="판다마켓"/>

</a>
</h1>
Comment on lines +23 to +27
Copy link
Collaborator

Choose a reason for hiding this comment

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

👍 칭찬
로고에 h1 쓰신점 좋아요~
h1 태그는 해당 페이지의 제목과 같고 주로 로고에 사용한답니다~

<a href="login.html" class="btn btn-login">로그인</a>
</nav>
</header>
<main>
<section class="main-banner">
<div class="banner-wrap">
<div class="banner-content">
<h2>
일상의 모든 물건을<br />
거래해 보세요
</h2>
<a href="items.html" class="btn btn-items">구경하러 가기</a>
</div>
<img src="assets/Img_home_top.png" alt="배너 이미지" />
</div>
</section>
<section class="main-content">
<div class="content-wrap">
<div class="content-item">
<img
src="assets/Img_home_01.png"
alt="인기 상품을 확인하는 이미지"
/>
Comment on lines +47 to +50
Copy link
Collaborator

Choose a reason for hiding this comment

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

💬 여담

혜란님께서 접근성에 관심이 있으신것 같아서 말씀드리자면
img 태그와 background-image로 넣는 것의 차이에 대해 생각해보시면 좋겠습니다.

둘이 디자인상 결과는 같을 수 있는데, 어떤 경우 img태그로 이미지를 추가하고, 어떤 경우 background-image 속성을 통해 이미지를 넣는지를 공부해보시면 더 시멘틱하게 작성하실 수 있으실거에요~

<div class="content-text">
<p class="badge">Hot item</p>
<h2>
인기 상품을<br />
확인해보세요
</h2>
<p class="content-desc">
가장 핫한 중고거래 물품을<br />
판다 마켓에서 확인해 보세요
</p>
</div>
</div>
</div>
<div class="content-wrap">
<div class="content-item reverse">
Copy link
Collaborator

Choose a reason for hiding this comment

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

👍 칭찬
자주 사용되는 css 들은 유틸 클래스를 작성하셔서 같이 사용하셨군요 👍

<img src="assets/Img_home_02.png" alt="상품 검색 이미지" />
<div class="content-text">
<p class="badge">Search</p>
<h2>
구매를 원하는<br />
상품을 검색하세요
</h2>
<p class="content-desc">
구매하고 싶은 물품은 검색해서<br />
쉽게 찾아보세요
</p>
</div>
</div>
</div>
<div class="content-wrap">
<div class="content-item">
<img src="assets/Img_home_03.png" alt="판매 등록 이미지" />
<div class="content-text">
<p class="badge">Register</p>
<h2>
판매를 원하는<br />
상품을 등록하세요
</h2>
<p class="content-desc">
어떤 물건이든 판매하고 싶은 상품을<br />
쉽게 등록하세요
</p>
</div>
</div>
</div>
</section>
<section class="main-bottom">
<div class="bottom-wrap">
<div class="bottom-content">
<h2>
믿을 수 있는<br />
판다마켓 중고 거래
</h2>
</div>
<img src="assets/Img_home_bottom.png" alt="배너 이미지" />
</div>
</section>
</main>
<footer>
<div class="footer-container">
<div class="footer-copyright">
<p>&copy; codeit - 2024</p>
</div>
<nav class="footer-links">
<ul>
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</nav>
<ul class="footer-social">
<li>
<a
href="https://www.facebook.com/?locale=ko_KR"
target="_blank"
aria-label="Facebook"
>
<img src="assets/ic_facebook.png" alt="Facebook" />
</a>
</li>
<li>
<a href="https://x.com" target="_blank" aria-label="Twitter">
<img src="assets/ic_twitter.png" alt="Twitter" />
</a>
</li>
<li>
<a
href="https://www.youtube.com"
target="_blank"
aria-label="Youtube"
>
<img src="assets/ic_youtube.png" alt="Youtube" />
</a>
</li>
<li>
<a
href="https://www.instagram.com"
target="_blank"
aria-label="Instagram"
>
<img src="assets/ic_instagram.png" alt="Instagram" />
</a>
</li>
</ul>
</div>
</footer>
</body>
</html>
Loading
Loading