HTML 훈련

💻참고 사항

• div에 style 주고 싶을 때 주로 사용하는 attribute --> class
• p 태그 안의 '<div>'와 같은 텍스트의 경우 태그로 인식하여 오류 발생할 수 있음
  html escape code 검색하여 대체하기

<: &lt;
>: &gt;

• h 태그 안에 a 태그 오는 게 더 나음
• feature box: 제품 설명하는 박스
• img-alt: 정보가 의미 없을 때에는 빈 상태로 명시해야 함! 반드시!
• 이미지 태그 사용 시 정보로써 가치가 없다고 판단 되면 CSS로 넘겨서 별도 처리하기
• 텍스트와 이미지의 alt를 동시에 적어야 할 때는 alt만 작성해도 👌
• 마크업 하고자 하는 것들이 어떤 정보를 가지고 있고, 어떻게 기능하는지에 focus!
• css/js 파일 import 시 ./파일이름.파일확장명 지키기 './'=현재 폴더

---

💻Breadcrumb

• 빵 부스러기로 표시한 길
• 사이트나 웹 앱에서 유저의 위치를 보여주는 부차적인 네비게이션 시스템

---

💻WAI-ARIA

• 인터넷 사용자들이 조금 더 쉽게 접근할 수 있게 돕는 장치
• a href="#" aria-label="Go to previous page":
  육안으로 볼 땐 변화가 없지만 스크린리더는 previous가 아닌 aria-label에 쓰인 대로 읽음
  정확한 메시지 전달 가능
• aria-hidden="true": 해당 태그를 읽지 않음
• aria-label 작성 습관화하기
• L(리터)도 aria-label 달아주기

---

💻웹 접근성

• 텍스트와 이미지가 같이 작성될 때 어떤 정보가 더 중요한지 생각하고, 중요한 정보를 먼저 작성하는 것이 좋음
• class="sr-only": screenreader only(자주 사용됨)
  화면에서 보이지 않더라도 작성해야하는 요소들을 위해 사용

---

💻짧은 후기

• 생각보다 HTML만 마크업하는 것도 쉽지 않다. 아무래도 CSS를 생각하지 않을 수 없어서 그런듯.
• 예제를 보고 혼자 마크업해본 후 강의를 보면서 부족한 부분을 따라하는 중인데, aria-label 작성하는 게 습관이 안 되어있어서 그런지 자꾸 까먹는다😇. 디테일한 부분까지 신경쓰는 게 생각보다 어렵다.
• 어제 공부한 태그도 까먹는다. 근데 이걸 다 기억하는 게 더 신기할듯. 서치를 생활화합시다.