[홍보희] sprint1 #63
[홍보희] sprint1 #63
Conversation
|
스프리트 미션 하시느라 수고 많으셨어요. |
| <h2>Hot item</h2> | ||
| <h1> | ||
| 인기 상품을<br /> | ||
| 확인해 보세요 | ||
| </h1> | ||
| <p> | ||
| 가장 HOT한 중고거래 물품을<br /> | ||
| 판다 마켓에서 확인해 보세요 | ||
| </p> |
There was a problem hiding this comment.
<h1> 태그는 문서에 하나만 넣는게 어떨까요?
| <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에도 더 적합합니다.
There was a problem hiding this comment.
파일명을 의미있게 짓는게 어떨까요?
단순 파일명만 보아도 어떤 이미지인지 유추할 수 있도록 파일명을 짓는게 어떨까요? 😊
또한, 띄어쓰기는 휴먼에러를 발생시킬 수 있으며 js에서는 별도의 이스케이프 문자가 필요할 수 있기에 지양할 것을 제안드립니다 ! 😊
| 쉽게 찾아보세요 | ||
| </p> | ||
| </div> | ||
| <img class="card-img2" src="img/Img_home_02.png" alt="find" /> |
There was a problem hiding this comment.
(제안/선택) 다만 현재 이미지에 필요한 정보가 HTML 상에 충분히 있다고 사료됩니다 !
"구매를 원하는 상품을 검색하세요", "구매하고 싶은 물품은 검색해서 쉽게 찾아보세요" 라는 정보가 이미 해당 섹션에 포함되있으므로 "장식용 이미지"로 취급하면 어떨까 싶습니다 !:
단순 장식용으로 있을 경우 ""로 나타낼 수 있습니다 !
| <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것도 옵션이 아닙니다. 속성이 제공되지 않으면 일부 화면 판독기가 이미지의 파일 이름을 대신 알려주기 때문입니다.
| <div class="social-icons"> | ||
| <a href="https://facebook.com" target="_blank"> | ||
| <img src="img/ic_facebook.svg" alt="Facebook" /> | ||
| </a> | ||
| <a href="https://twitter.com" target="_blank"> | ||
| <img src="img/ic_twitter.svg" alt="Twitter" /> | ||
| </a> | ||
| <a href="https://youtube.com" target="_blank"> | ||
| <img src="img/ic_youtube.svg" alt="YouTube" /> | ||
| </a> | ||
| <a href="https://instagram.com" target="_blank"> | ||
| <img src="img/ic_instagram.svg" alt="Instagram" /> | ||
| </a> | ||
| </div> |
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; }
| button { | ||
| border: none; | ||
| cursor: pointer; | ||
| font-family: "Pretendard", sans-serif; | ||
| } |
There was a problem hiding this comment.
(제안) 만약 스타일 선택자 목적이라면 태그보다는 class를 선택자로 사용하는게 어떨까요?
클래스는 재사용이 가능하며, 자유롭게 태그에 스타일을 붙일 수 있어서 유지보수에 용이하므로 단순히 스타일을 위해서라면 class를 추천드려요 !
좀 더 자세히 🤔
유지보수가 어려워질 수 있어요.
특정 p 태그에만 다른 스타일을 적용하려면 추가적인 선택자를 작성하거나 기존 스타일을 덮어써야 하므로 유지보수가 어려워집니다.
태그 의미를 명확히 부여하기 어려워요.
스타일링을 태그에 직접 적용하면, 태그가 어떤 의미를 가지는지 어렵기에 가독성이 보다 좋지 못할 수 있어요.
만약 다음 코드의 스타일을 태그 선택자로만 지정한다면 ?
<p class="error-message">오류가 발생했습니다.</p>물론 전역적인 것을 의미한다면 일정 허용될 수 있어요.
예를 들어서 p의 기본 마진을 없애고 싶다면 다음과 같이 작성할 수 있을거예요:
p {
margin: 0;
}그렇지만 특정 스타일을 지정하고 싶다면 다음과 같이 작성해볼 수 있어요:
.paragraph {
font-size: 16px;
color: #333;
}
.highlight {
background-color: yellow;
}
|
수고하셨습니다 보희님 ! 이제부터 차근차근 미션 풀어나가봐요 😊😊 미션 수행하시느라 정말 수고 많으셨습니다 ! 👍👍 |
2 participants
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게