[홍보희] sprint1 #63
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,133 @@ | ||||||||||||||||||||||||||||||||||||||
| <!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" /> | ||||||||||||||||||||||||||||||||||||||
| <title>판다마켓</title> | ||||||||||||||||||||||||||||||||||||||
| </head> | ||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||
| <body> | ||||||||||||||||||||||||||||||||||||||
| <header> | ||||||||||||||||||||||||||||||||||||||
| <div class="header-Positioning"> | ||||||||||||||||||||||||||||||||||||||
| <a href="/"> <img class="logo" src="img/Group 19.png" alt="logo" /> </a> | ||||||||||||||||||||||||||||||||||||||
| <a href="/login"> <button class="login-button">로그인</button></a> | ||||||||||||||||||||||||||||||||||||||
| </div> | ||||||||||||||||||||||||||||||||||||||
| </header> | ||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||
| <main> | ||||||||||||||||||||||||||||||||||||||
| <section class="topbanner"> | ||||||||||||||||||||||||||||||||||||||
| <div class="topbanner-item"> | ||||||||||||||||||||||||||||||||||||||
| <div class="topbanner-text"> | ||||||||||||||||||||||||||||||||||||||
| <h1> | ||||||||||||||||||||||||||||||||||||||
| 일상의 모든 물건을<br /> | ||||||||||||||||||||||||||||||||||||||
| 거래해 보세요 | ||||||||||||||||||||||||||||||||||||||
| </h1> | ||||||||||||||||||||||||||||||||||||||
| <a href="/items"> | ||||||||||||||||||||||||||||||||||||||
| <button class="Visit-button">구경하러 가기</button> | ||||||||||||||||||||||||||||||||||||||
| </a> | ||||||||||||||||||||||||||||||||||||||
| </div> | ||||||||||||||||||||||||||||||||||||||
| <img class="topimg" src="img/Img_home_top.png" alt="top-banner" /> | ||||||||||||||||||||||||||||||||||||||
| </div> | ||||||||||||||||||||||||||||||||||||||
| </section> | ||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||
| <section class="features-container"> | ||||||||||||||||||||||||||||||||||||||
| <div class="features"> | ||||||||||||||||||||||||||||||||||||||
| <div class="features-items"> | ||||||||||||||||||||||||||||||||||||||
| <img class="card-img" src="img/Frame 2608833.png" alt="hotitem" /> | ||||||||||||||||||||||||||||||||||||||
| <div class="card-content"> | ||||||||||||||||||||||||||||||||||||||
| <h2>Hot item</h2> | ||||||||||||||||||||||||||||||||||||||
| <h1> | ||||||||||||||||||||||||||||||||||||||
| 인기 상품을<br /> | ||||||||||||||||||||||||||||||||||||||
| 확인해 보세요 | ||||||||||||||||||||||||||||||||||||||
| </h1> | ||||||||||||||||||||||||||||||||||||||
| <p> | ||||||||||||||||||||||||||||||||||||||
| 가장 HOT한 중고거래 물품을<br /> | ||||||||||||||||||||||||||||||||||||||
| 판다 마켓에서 확인해 보세요 | ||||||||||||||||||||||||||||||||||||||
| </p> | ||||||||||||||||||||||||||||||||||||||
|
Comment on lines
+42
to
+50
Collaborator
There was a problem hiding this comment.
|
||||||||||||||||||||||||||||||||||||||
| <h2>Hot item</h2> | |
| <h1> | |
| 인기 상품을<br /> | |
| 확인해 보세요 | |
| </h1> | |
| <p> | |
| 가장 HOT한 중고거래 물품을<br /> | |
| 판다 마켓에서 확인해 보세요 | |
| </p> | |
| <h2>Hot item</h2> | |
| <h3> | |
| 인기 상품을<br /> | |
| 확인해 보세요 | |
| </h3> | |
| <p> | |
| 가장 HOT한 중고거래 물품을<br /> | |
| 판다 마켓에서 확인해 보세요 | |
| </p> |
이하 MDN 발췌
페이지 당 하나의 <h1>만 사용하세요. 여러 개를 써도 오류는 나지 않겠지만, 단일 <h1>이 모범 사례로 꼽힙니다. 논리적으로 생각했을 때도, <h1>은 가장 중요한 제목이므로 전체 페이지의 목적을 설명해야 할 것입니다. 두 개의 제목을 가진 책이나, 여러 개의 이름을 가진 영화는 볼 수 없죠! 또한 스크린 리더 사용자와 SEO에도 더 적합합니다.
Collaborator
There was a problem hiding this comment.
(제안/선택) 다만 현재 이미지에 필요한 정보가 HTML 상에 충분히 있다고 사료됩니다 !
"구매를 원하는 상품을 검색하세요", "구매하고 싶은 물품은 검색해서 쉽게 찾아보세요" 라는 정보가 이미 해당 섹션에 포함되있으므로 "장식용 이미지"로 취급하면 어떨까 싶습니다 !:
단순 장식용으로 있을 경우 ""로 나타낼 수 있습니다 !
Suggested change
| <img class="card-img2" src="img/Img_home_02.png" alt="find" /> | |
| <Image src="/Img/badge.svg" width={102} height={30} alt="" /> |
장식 이미지는 페이지 콘텐츠에 정보를 추가하지 않습니다. 예를 들어, 이미지에서 제공하는 정보는 인접한 텍스트를 사용하여 이미 제공될 수도 있고, 웹 사이트를 시각적으로 더욱 매력적으로 만들기 위해 이미지가 포함될 수도 있습니다.
이러한 경우 스크린 리더와 같은 보조 기술에서 무시할 수 있도록 null(빈) alt텍스트를 제공해야 합니다( ). alt=""이러한 유형의 이미지에 대한 텍스트 값은 화면 판독기 출력에 청각적 혼란을 추가하거나 주제가 인접한 텍스트의 주제와 다른 경우 사용자의 주의를 산만하게 할 수 있습니다. 속성 을 생략하는 alt것도 옵션이 아닙니다. 속성이 제공되지 않으면 일부 화면 판독기가 이미지의 파일 이름을 대신 알려주기 때문입니다.
Comment on lines
+116
to
+129
Collaborator
There was a problem hiding this comment.
(제안/선택)요소들이 순서 없는 목록을 의미한다면 <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; }
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
파일명을 의미있게 짓는게 어떨까요?
단순 파일명만 보아도 어떤 이미지인지 유추할 수 있도록 파일명을 짓는게 어떨까요? 😊
또한, 띄어쓰기는 휴먼에러를 발생시킬 수 있으며
js에서는 별도의 이스케이프 문자가 필요할 수 있기에 지양할 것을 제안드립니다 ! 😊