[🚀 Today I Learn 페이지 만들기] 코브 미션 제출합니다.

[TH-97]

배포 주소: https://th-97.github.io/web-today-i-learn/

HTML

1. <figure> + <img> 조합이 적합하다 — 이미지와 설명을 의미적으로 묶는 시맨틱 요소이기 때문이다.
2. <img src=""> 태그로 직접 삽입하는 방식과, CSS background-image로 배경에 적용하는 방식으로 나뉜다.
3. 콘텐츠의 역할(헤더/본문/보조/푸터)과 독립성(다른 곳에 떼어내도 의미가 통하는가)을 기준으로 나눈다.
4. 이미지가 로드되지 않을 때 대체 텍스트를 제공하고 스크린리더 접근성을 위해 필요하며, 이미지가 전달하는 핵심 정보를
   간결하게 서술하는 것이 좋다.
5. 서버 환경이나 배포 경로가 달라지면 상대 경로가 깨질 수 있고, 절대 경로는 로컬에서 동작하지 않을 수 있어 예측하기
   어려운 버그가 발생한다.
6. viewport는 모바일에서 화면 너비에 맞게 렌더링되도록 하고, OG 태그는 SNS 공유 시 제목/이미지/설명 미리보기를 제어한다.

CSS

7. 9장을 행/열 격자로 균등 배치하는 것이 목적이므로 CSS Grid가 더 적합하다 — Flexbox는 1차원, Grid는 2차원 레이아웃에
   강하기 때문이다.
8. 태그 선택자는 전역 기본 스타일, 클래스 선택자는 재사용 가능한 컴포넌트, ID 선택자는 페이지에서 유일한 요소에 사용한다.
9. HTML 내에 직접 작성하면 관심사가 섞여 유지보수가 어렵고, 파일로 분리하면 캐싱과 재사용이 가능해진다.

JavaScript

10. getElementById는 ID만 검색하고 더 빠르며, querySelector는 CSS 선택자 문법 전체를 지원해 더 유연하다.
11. click(버튼), mouseover(카드 호버 효과), scroll(스크롤 애니메이션), submit(폼 전송) 등을 활용할 수 있다.
12. 외부 입력값을 그대로 innerHTML에 넣으면 XSS(크로스 사이트 스크립팅) 공격에 취약해진다.