feat: 반응형 웹 지원

[wherehows]

참고

• https://nykim.work/84
• https://webroadcast.tistory.com/5
• https://designbase.co.kr/sketch-4/
• https://webclub.tistory.com/629
• https://www.inflearn.com/course/%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9-%EC%9E%85%EB%AC%B8/dashboard
• https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
• https://www.youtube.com/watch?v=4aF_IQJeFpg
• 미디어 쿼리 남발하지 않는 법

Grid와 Media Query 차이

• grid 와 media query의 차이
• grid로 4개의 레이아웃 만들기

반응형 웹이 SEO에 영향을 끼침

• https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing

토글 버튼을 Button 태그로 만드는 것과 Input 태그로 만드는 것의 차이

• chcekbox의 이점은 checkbox 자체가 상태를 가지고 있으며 On/Off의 상태 변화를 스크린 리더가 읽어줄 수 있다는점임.
• checkbox의 경우, form 요소와 함께 사용자의 정보를 제공하는데 사용되어옴. (실제로 checkbox는 input 태그임). Toggle Button을 checkbox로 만들어도 좋지만, 이것이 정보 제공이 아니라는 것이 확실히 보장될 때만 써야함
• button을 toggle 태그로 사용하는 경우, wai area를 사용하여 On과 Off 상태를 스크린 리더에 전달할 수 있으나, wai area를 컨트롤해줄 별도의 자바스크립트가 필요하다는 점에서 번거로워보임.
• https://inclusive-components.design/toggle-button/