웹 접근성(a11y), 키보드와 스크린 리더로도 쓸 수 있는 화면
Lighthouse 접근성 항목이 지적하는 버튼 이름, 색 대비, 제목 순서는 모두 마우스나 화면 없이 웹을 쓰는 사람과 이어져 있다. 키보드 포커스와 스크린 리더, 색과 대비 기준을 기초부터 설명한다.
프론트엔드
프론트엔드에 관한 4개의 기록을 모았습니다.
누적 레이아웃 이동(CLS), 읽던 줄이 밀려나는 이유
글을 읽는 도중 문단이 툭 내려가는 정도를 재는 지표가 CLS다. 이미지와 광고, 웹 글꼴이 왜 본문을 밀어내는지, 들어올 자리를 어떻게 미리 잡아 두는지 기초부터 정리한다.
정적 검색 색인, 검색 서버 없이 글을 찾는 법
정적 사이트에는 검색어를 받아 줄 서버가 없다. 빌드 때 만든 역색인으로 브라우저가 직접 글을 찾는 원리와, 사이트 밖에서 글을 찾아오게 하는 사이트맵과 RSS를 함께 설명한다.
브라우저에서 사진 줄이기, 파일 크기보다 픽셀 수를 봐야 하는 이유
사진을 브라우저에서 줄여 올리면 전송량은 줄지만, 처리하는 동안에는 해상도만큼의 픽셀 배열이 메모리에 펼쳐진다. 디코딩이 무엇인지, 여러 장을 한꺼번에 줄이면 왜 화면이 멈추는지 설명한다.