Skip to content

[임지혜] sprint1 #87

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
kiJu2 merged 2 commits into from
Apr 11, 2025
Merged

[임지혜] sprint1 #87

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
58910f1
feat: 스프린트미션1
jihye5081 Apr 9, 2025
adca3c9
chore: 사용하지 않는 class 삭제
jihye5081 Apr 9, 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>FAQ</title>
</head>
<body>

</body>
</html>
Binary file added images/bottom_image.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.
3 changes: 3 additions & 0 deletions images/logo/facebook_logo.svg
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/favicon.ico
View file
Open in desktop
Binary file not shown.
3 changes: 3 additions & 0 deletions images/logo/instagram_logo.svg
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/panda_market_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.
3 changes: 3 additions & 0 deletions images/logo/twitter_logo.svg
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.
10 changes: 10 additions & 0 deletions images/logo/youtube_logo.svg
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_image1.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_image2.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_image3.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_top_image.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.
140 changes: 140 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
<!DOCTYPE html>
<html lang="en">
Copy link
Collaborator

@kiJu2 kiJu2 Apr 11, 2025

Choose a reason for hiding this comment

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

lang="ko" 속성을 사용해보는건 어떨까요?

Suggested change
<html lang="en">
<html lang="ko">

lang 속성은 Search bot이 탐색할 때 해당 문서가 어떠한 언어로 작성되어있는지 파악할 때 사용될 수 있습니다.
따라서 적절한 lang을 설정하시는걸 권장드립니다. 😊

lang의 기본 값은 '알 수 없음'입니다. 따라서 적절한 값의 lang 속성을 꼭 꼭 ! 설정해주시는걸 권장합니다 !
lang에 대해서 자세히 보기

SEO 마케팅 관련 기사

lang 속성은 다음을 포함하여 다양한 목적으로 사용됩니다.

  • 검색 엔진은 lang 속성을 사용하여 올바른 언어로 웹 페이지를 색인화합니다. 이를 통해 특정 언어로 검색하는 사용자에게 더 관련성이 높은 결과를 반환할 수 있습니다.
  • 화면 판독기는 lang 속성을 사용하여 언어 프로필을 전환하여 올바른 악센트와 발음을 제공합니다. 이는 시각 장애가 있는 사용자가 선호하는 언어로 웹 콘텐츠에 액세스하는 데 도움이 됩니다.
  • lang 속성을 사용하여 번역해야 하는 텍스트를 식별할 수 있습니다. 이는 다국어 웹사이트를 만들거나 사용자 생성 콘텐츠를 번역하는 데 유용할 수 있습니다.

<html> 요소 자체를 포함하여 텍스트 콘텐츠를 포함하는 모든 HTML 요소에 lang 속성을 지정해야 한다는 점에 유의하는 것이 중요합니다. 이렇게 하면 전체 웹페이지의 언어가 올바르게 식별됩니다.
원문 보기

<head>
<title>판다마켓</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="images/logo/favicon.ico" />
</head>
<body>
<header>
<a href="/">
<img
src="images/logo/panda_market_logo.png"
alt="panda_market_logo"
class="header_logo"
/>
</a>
<a href="login.html" class="login_btn">로그인</a>
Copy link
Collaborator

@kiJu2 kiJu2 Apr 11, 2025

Choose a reason for hiding this comment

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

(심화/생각해보기/제안) login은 '기능'을 의미해요. 스타일 이름은 "어떤 스타일인지"를 목표로 네이밍을 작성해보면 어떨까요?

Suggested change
<a href="login.html" class="login_btn">로그인</a>
<a href="/login.html" class="button button-primary">로그인 </a>

만약, 현재 button-login과 같은 스타일의 "장바구니에 담기" 라는 버튼이 존재한다면 클래스 이름이 어떻게 될까요?

button-login 클래스로 작성한다면 login이라는 "기능"을 목적으로 하는 클래스 이름을 넣게 될거예요. 혹은 중복된 스타일과 다른 클래스 이름인 button-add-wish와 같은 클래스 이름을 가지게 돼요. 이는 재사용성을 저하시킬거예요.
차라리 해당 클래스가 "어떤 스타일을 포함하는가?"에 목적을 두어 네이밍을 한다면 더욱 재사용하기 용이할거라고 생각해서 제안드립니다 😊

priamry: 주로 브랜드의 주요 컬러를 의미합니다 ! 😊 판다마켓의 경우 파란색이죠 !

</header>

<main>
<section class="top_banner">
<div class="panda_market_contents">
<h2>
일상의 모든 물건을<br />
거래해 보세요
</h2>
<a href="items.html" class="items_btn">구경하러 가기</a>
</div>
<img
src="images/main_top_image.png"
alt="main_top_image"
class="main_top_image"
/>
</section>

<section>
<article>
<img
src="images/main_image1.png"
alt="hot_item_image"
class="image"
/>
<div class="contents">
<p class="title">Hot item</p>
Copy link
Collaborator

@kiJu2 kiJu2 Apr 11, 2025

Choose a reason for hiding this comment

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

<p> 태그는 단락을 나타냅니다 !

HTML <p> 요소는 하나의 문단을 나타냅니다. 시각적인 매체에서, 문단은 보통 인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있습니다.

예를 들어 다음과 같은 값이 <p>태그에 적절할 수 있어요 😊:

Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Antarctica.

MDN <p>

차라리 h 시리즈나 크게 의미가 없다고 생각한다면 span 혹은 div로 대체할 수 있습니다 =)

<div id="hot_item_content">
<h2>
인기 상품을<br />
확인해 보세요
</h2>
<p>
가장 HOT한 중고거래 물품을<br />
판다 마켓에서 확인해 보세요
</p>
</div>
</div>
</article>
</section>

<section>
<article>
<div class="contents" id="search_contents">
<p class="title">Search</p>
<div id="search_content">
<h2>
구매를 원하는<br />
상품을 검색하세요
</h2>
<p>
구매하고 싶은 물품은 검색해서<br />
쉽게 찾아보세요
</p>
</div>
</div>
<img src="images/main_image2.png" alt="search_image" class="image" />
</article>
</section>

<section>
<article>
<img
src="images/main_image3.png"
alt="register_image"
class="image"
/>
<div class="contents">
<p class="title">Register</p>
<div id="register_content">
<h2>
판매를 원하는<br />
상품을 등록하세요
</h2>
<p>
어떤 물건이든 판매하고 싶은 상품을<br />
쉽게 등록하세요
</p>
</div>
</div>
</article>
</section>

<section class="bottom_banner">
<h2 id="bottom_title">
믿을 수 있는<br />
판다마켓 중고 거래
</h2>
<img
src="images/bottom_image.png"
alt="bottom_image"
class="bottom_image"
/>
</section>
</main>

<footer>
<div class="footer_wrapper">
<div id="footer_text">©codeit - 2024</div>
<div class="footer_content">
<a href="privacy.html">Privacy Policy</a>
<a href="faq.html">FAQ</a>
</div>
<div class="footer_icon">
<a href="https://facebook.com" target="_blank"
><img src="images/logo/facebook_logo.svg" alt="facebook_logo"
/></a>
<a href="https://x.com" target="_blank"
><img src="images/logo/twitter_logo.svg" alt="twitter_logo"
/></a>
<a href="https://youtube.com" target="_blank"
><img src="images/logo/youtube_logo.svg" alt="youtube_logo"
/></a>
<a href="https://instagram.com" target="_blank"
><img src="images/logo/instagram_logo.svg" alt="instagram_logo"
/></a>
</div>
Comment on lines +123 to +136
Copy link
Collaborator

@kiJu2 kiJu2 Apr 11, 2025

Choose a reason for hiding this comment

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

(제안/선택)요소들이 순서 없는 목록을 의미한다면 <ul>과 <li>로도 나타낼 수 있습니다 !

<ul class="footer-social">
  <li>
	<a target="_blank" href="https://www.facebook.com/">
	  <img src="images/ic_facebook.svg" alt="페이스북" />
	</a>
  </li>
  <li>
	<a target="_blank" href="https://www.twitter.com/">
	  <img src="images/ic_twitter.svg" alt="트위터" />
	</a>
  </li>
  <li>
	<a target="_blank" href="https://www.youtube.com/">
	  <img src="images/ic_youtube.svg" alt="유튜브" />
	</a>
  </li>
  <li>
	<a target="_blank" href="https://www.instagram.com/">
	  <img src="images/ic_instagram.svg" alt="인스타그램" />
	</a>
  <li>
</ul>

MDN: HTML <ul> 요소는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다.

li 태그의 기본 스타일을 제거하고 싶다면 다음과 같이 작성할 수 있습니다 ! { list-style: none; }

</div>
</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>Items</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>Login</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>Privacy</title>
</head>
<body>

</body>
</html>
Loading
Loading