← 메인으로PUBLISHER ONBOARDING
퍼블리셔 온보딩을 위한 HTML/CSS 퀘스트
기획서와 디자인 시안을 바탕으로 모바일 반응형에 최적화된 웹 화면을 작성하고, 표준 웹 접근성(a11y) 기준을 충족하는 미션을 수행합니다.
주요 훈련 과제
- Flexbox 및 CSS Grid 정렬 규칙을 활용한 그리드 레이아웃 구축
- 모바일 뷰포트 및 디바이스 안전 영역(Safe Area) 반응형 대응
- 스크린 리더 포커스 순서 및 이미지 alt 속성 웹 접근성 감사
■ 게임 퀘스트 예시
이미지 요소의 웹 접근성 확보
HTML 코딩 시 시각 장애 사용자를 고려하여 반드시 채워 넣어야 할 속성이 누락되었습니다.
[1]대체 텍스트를 제공하는 alt 속성을 기술한다.
[2]src 경로만 있으면 스크린 리더가 자동으로 이미지를 해석한다.
[3]class 속성을 추가해 투명 처리한다.
해설: alt 속성은 이미지를 볼 수 없는 스크린 리더 사용자에게 대체 정보를 제공하는 웹 접근성 기본 지침입니다.
획득 가능한 스킬 역량
Flexbox / Grid LayoutResponsive Web DesignWeb Accessibility (a11y)HTML5 Semantics