8. Receipt

이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다.

출처: edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

 

 

 

 

 

 

📸 Screenshot 

---

 

 

 

 

 

 

📝 메모

---

 

 

0.

Bill sharing request from kimbug 모두 이 전체 영수증의 heading에 해당하니까 <h1> 태그에 넣어준다.

다만, from kimbug 부분의 스타일이 약간 다르기 때문에 스타일을 주기 위해서 kimbug를 <span>으로 감싼다.

 

 

1.

날짜에 해당하는 부분.

당연히 스크린 리더가 그냥 숫자만 줄줄 읽으면 듣는 사람 입장에서는 바로 의미를 캐치하지 못할 수 있으니

UX 향상을 위해

aria-label="Issued on October 14th, 2020" 라고 넣어주면

훨씬 의미 파악이 쉬울 것.

 

 

 

2.

 나는 아직 <strong> 태그 쓰는 게 바로바로 안된다..

바코드 이미지를 그냥 <div>로 감싸줬는데

어떻게 보면 이 영수증에서 가장 중요한 부분은 이 '바코드'부분이니까

<strong> 태그로 감싸고 

<img> 태그의 alt 속성에도 분명하게 "Barcode"라고 넣어줄 것.

 

 

 

3.

또 내가 진짜 생각 못한 게,

'0.3L' 같은 걸 스크린 리더는 "영 쩜 삼 엘" 뭐 이렇게;;; 읽을텐데 그러면 당연히 이해가 안되겠지

그래서 <span>을 따로 만들고 aria-label="litter"라고 넣어주면 더 좋다.

(아직 이런 웹접근성 부분을 캐치하는 능력이 좀 부족한 것 같다.)

 

 

 

4.

물건 - 가격도 key-value에 해당하니 dl,dt,dd를 쓰기 !

그리고 가격은 중요하니까 <strong> 태그도 넣어주기.

 

 

 

5.

디자인으로 봐도 약간 티가 나는데

In Total 부분은 각 품목 리스트랑 좀 떨어져있고 성격도 다르니까

따로 dl,dt,dd를 만들어 준다.

 

그리고 의미상으로 봤을 때는 가장 마지막에 나오는 것이 맞기 때문에

마크업에서는 마지막에 하되,

CSS를 이용해서 위로 올려줄 것.

 

 

 

 

 

 

 

 

마크업을 제대로 한다는 건 정말 글 쓰는 일이랑도 비슷한 것 같다...

의미 구조에 맞는 적확한 태그를 찾아서 쓸 것.

그리고 스크린 리더를 통해 들었을 때도 웹 페이지가 제대로 이해가 될 지 상상해볼 것!