「접근성 있는 사진 갤러리 만들기」는 HTML, CSS, JavaScript의 기초를 알고 있으며 이를 완전한 탐색 경험으로 연결하고 싶은 학습자를 위한 실습 프로젝트입니다. 탐색하는 동안 썸네일, 큰 이미지, 제목, 설명이 올바르게 연결되는 로컬 사진 전시를 만듭니다.
가이드 실습에서는 갤러리 레이아웃과 상세 뷰어를 단계별로 구현합니다. 독립 챌린지에서는 제목이 같은 사진, 긴 제목, 서로 다른 가로세로 비율이 포함된 다른 전시에 같은 기법을 적용합니다. 각 실습은 별도로 준비된 초기 파일에서 시작합니다.
학습 내용
과정을 마치면 다음을 수행할 수 있습니다.
- 고정된 사진 ID를 올바른 썸네일, 큰 이미지, 대체 텍스트, 캡션과 연결합니다.
- 의미 있는 HTML과 눈에 보이는 키보드 포커스를 갖춘 반응형 갤러리를 만듭니다.
- 기본 제공
dialog요소로 사진을 표시하고 탐색할 때 이미지, 제목, 설명을 함께 갱신합니다. - 첫 사진과 마지막 사진에서 탐색 경계를 명확하게 표시하고,
Esc로 뷰어를 닫은 뒤 이를 열었던 카드로 포커스를 되돌립니다. - 이미지 로드 실패를 이해하기 쉬운 메시지로 알리고, 다른 사진으로 몰래 대체하지 않으며, 잘못된 파일 경로를 수정합니다.
추천 대상
이 과정은 개별 웹 연습을 결합해 실제로 사용할 수 있는 사진 전시를 만들 준비가 된 학습자에게 적합합니다.
선수 지식: HTML 요소, 기본 CSS 레이아웃, JavaScript 객체와 함수, DOM 조작, 이벤트를 알고 있어야 합니다. 프로젝트 파일을 열고 저장할 수 있어야 합니다. 갤러리에 필요한 의미 구조, 기본 대화상자 동작, 포커스 처리는 가이드 실습에서 설명합니다. React 지식은 필요하지 않습니다.
학습 환경: LabEx는 준비된 WebIDE, Terminal, Gallery 입구와 로컬 이미지를 제공합니다. WebIDE에서 기존 HTML, CSS, JavaScript를 읽고 동작을 예측한 다음 필요한 부분을 수정하여 저장합니다. Gallery에서는 실제 사이트의 동작을 관찰하고 키보드 조작을 테스트합니다. 갤러리 인터페이스의 레이블은 영어로 유지됩니다.
자주 묻는 질문
갤러리 코드를 직접 작성하나요?
네. 준비된 프로젝트에서 레이아웃과 브라우저 동작을 완성한 뒤, 만든 갤러리를 마우스와 키보드로 사용합니다.
사진을 업로드하거나 프레임워크를 설치해야 하나요?
아니요. 로컬 이미지 자료와 학습 환경이 준비되어 있습니다. React나 이미지 업로드 서비스 없이 HTML, CSS, 브라우저 JavaScript를 사용합니다.
과정을 마치면 접근성 인증을 받나요?
아니요. 이미지, 키보드, 포커스의 구체적인 동작을 연습합니다. 전체 접근성 평가에서는 이 실습보다 더 많은 항목을 다룹니다.
