Receipt

실습 화면

---

피드백

이번 강의는 피드백할 부분이 많아서 요소별로 단락을 분류해서 정리해 볼려고 한다.

---

Bill & McDonald's

	<h1>Bill sharing request
        <span>from Kimbug</span>
    </h1>

• McDonal's 문구가 제일 중요하다 생각해서 Bill sharing request를 strong 태그로 묶었는데 어쩐지 스타일이 안 먹더라!!
  ㄴ 무엇에 관한 영수증인지 소개하는 부분이니깐 중요하다 생각해서 h1 태그로 마크업했다고 하신다. 그리고 McDonald's 부분은 h2 태그로 마크업해서 제목의 우선순위를 결정하시더라!!

---

barcode

	<strong class="barcode">
        <img src="./assets/barcode.svg" alt="Barcode" />
      </strong>

• 바코드는 따로 이미지를 제공해 주셔서 당연히 img 태그를 사용해서 마크업하는줄 알았는데 이것도 스타일이 안 먹는다. 그런데 중요한 이미지니깐 strong 태그 안에 img 태그를 마크업하셨다.

---

24.06.20xx

<span aria-label="Issued on June 24th, 20xx">24.06.20xx</span>

• 영수증 발행 날짜 같은 경우 작은 텍스트에 불과하니까 span 태그로 마크업한 건 옳게 한 거 같다. 근데 스크린 리더기에게 좀 더 정확하게 정보를 전달해주기 위해 aria-label 속성을 사용하는 게 좋다고 하신다.

---

dl / dt / dd

	<div>
		<dl>
          <div>
            <dt>Coke Light - 0.3<span aria-label="litter">L</span></dt>
            <dd>
              <strong>
                &dollar;1.50
              </strong>
            </dd>
          </div>
          ....
        </dl>
       </div>

• 물품과 가격값을 정의 리스트 태그를 사용하는 건 true! 근데 가격은 특히 중요하니까 dd 태그 안에 strong 태그로 한 번 더 감싸는 게 좋다고 하신다.

1. "L" 은 일반인의 육안으로는 Litter임을 단번에 알 수 있지만, 스크린 리더기를 사용하는 사람들은 이를 알지 못하니깐 aria-label 속성을 사용해 풀네임을 정의한다.
2. 그리고 각 품목마다 div 태그로 감싸는 게 좀 더 시맨틱한 마크업이라 하신다!
3. 또한 정의 리스트 전체를 div 태그로 한 번 더 감싸는 것도 좋다고 하신다. (이래야 스타일이 잘 먹히더라!!)

---

마무리

버그님 코드와 내 코드를 비교하면서 글을 작성해보는데 확실히 css 코드를 변경시키면 내가 처음에 작성한 코드가 화면에 출력되게 할 수 있을 거 같다. 그래도 아직은 html 훈련 단계니까 어떻게 하면 좀 더 시맨틱하게 마크업할 수 있을지에 대한 생각만 해야겠다!!