24일차

주말동안 푹 쉬고 재충전을 한 만큼 이번 한주는 하루하루가 더 나은 하루가 될 수 있도록 공부를 해보도록 노력해볼 예정이다.

오늘 공부할 목표

• PART1 피드백 및 정리하기
• 클론코딩 할 페이지 선정 및 레이아웃 구조 파악하기
• 패캠 Part 9. Vue.js 중 CH1, CH2

새로 배운 내용

• Wai-Aria의 속성들과 웹접근성을 고려한 마크업

  • [HTML/CSS] 웹접근성을 위한 마크업
  • [HTML/CSS] Carousel 과 wai-aria

  ※요약 정리※

  • <div>19,700<strong>원<strong><div>과 같이 특정 부분을 강조하기 위해 <strong>태그로 감싼 경우 보조기기가 텍스트를 띄어서 읽지 않도록 <div role="text">과 같이 role="text"속성을 부여할 수 있다.
  • 별점, 리뷰, 가격 등의 경우 웹페이지상에 노출되지 않도록 sr-only과 같이 클래스를 일괄적으로 부여한 태그를 사용해 스크린리더 사용자들이 정보를 받아들이기 쉽게 마크업 할 수 있다.

<span class="sr-only">구매자 평점</span>
<span class="ratingStar score4-5" aria-label="5점 만점에 4.5점"></span>

• 시맨틱 요소를 활용한 마크업
  • [HTML/CSS] head 영역 마크업
  • [HTML/CSS]네이밍 컨벤션 BEM
  • [HTML/CSS] 시맨틱 요소를 사용한 body 영역 마크업

    ※요약 정리※

  • section태그 안에는 반드시 제목요소h1~h6이 포함되어야 한다.
  • BEM 네이밍 컨벤션 B--E__M

하루를 마무리하며

오늘은 웹접근성측면에서의 마크업을 어떻게 해야하는지, 스크린리더 사용자들을 위한 마크업이 어떤 것인지를 자세하게 배우는 하루가 되었던 것 같다.😶

그동안은 이런 부분에서의 마크업에 신경을 쓰지 못했었는데, 조금 더 시야를 넓히고 웹접근성측면을 고려한 마크업을 하는 습관과 이를 위한 바탕지식을 꾸준히 탐색하고 찾아보는 습관을 들여야겠다는 것을 깨닫는 의미있는 하루가 된 것 같다.

또한 오늘 스터디 질문란에 올라온 글에 답변을 하며, 내가 공부하고 정리했던 내용들을 다시 한번 확인하고 정리하는 공부가 정말 필요하구나 라는 것을 깨닫게 되었다.

많은 강사님들이 강조를 하셨듯이 단순히 블로그에 정리를 하는 것이 아니라, 내가 누군가에게 설명을 해줄 수 있을 정도로 이해를 할 수 있도록 조금 더 신경쓰며 공부를 해봐야겠다.👍