메뉴는 네비게이션에 사용되며 웹 페이지 작동의 중요한 부분인 기능을 제공합니다. 구조 : 메뉴의 구조를 반영하고 적절한 레이블을 지정하는 방식으로 메뉴를 마크업합니다. 스타일링 : 일반적으로 인식되는 디자인 패턴을 사용하여 메뉴와 메뉴 항목의 상태를 구분합니다. 플라이아웃 메뉴 : 플라이아웃(드롭다운) 하위 메뉴를 마우스와 키보드로 적절하게 사용할 수 있는지 확인합니다. 애플리케이션 메뉴 : 데스크톱 애플리케이션 메뉴와 유사하도록 특정 마크업 및 키보드 동작을 추가합니다. 이것이 왜 중요한가요? 네비게이션 메뉴는 웹사이트의 기본 구조를 반영합니다. 애플리케이션 메뉴는 애플리케이션의 필수 기능에 대한 액세스를 제공합니다. 따라서 메뉴는 웹 페이지와 애플리케이션의 중요한 부분이며 디자인 및 개발 과정에서 특..
잘 구조화된 콘텐츠는 보다 효율적인 탐색과 처리를 가능하게 합니다. 웹 페이지와 애플리케이션에서 탐색 및 방향성을 개선하려면 HTML과 WAI-ARIA를 사용하세요. 페이지 영역 (Page Regions) : HTML5 및 WAI-ARIA 역할을 사용하여 웹 페이지에서 영역을 식별하고 마크업합니다. 영역 라벨링 (Labeling Regions) : 사용자가 영역을 구분하고 액세스할 수 있도록 영역에 레이블을 지정합니다. 제목 (Headings) : 제목을 추가하고 논리적으로 중첩하여 웹 페이지의 섹션에 관계와 중요도에 따라 레이블을 지정합니다. 콘텐츠 구조 (Content Structure) : 적절하고 의미 있는 요소를 사용하여 페이지의 콘텐츠를 마크업합니다. 왜 중요한가? 예를 들어, 잘 구성된 콘텐..
이 튜토리얼 모음에서는 장애인이 액세스할 수 있고 모든 사람에게 더 나은 사용자 경험을 제공하는 웹 콘텐츠를 개발하는 방법을 보여 줍니다. 이 튜토리얼은 다음과 같은 다양한 사람들이 사용할 수 있도록 설계되었습니다. 웹 개발자는 여러 가지 일반적인 코딩 문제에 대한 지침과 상용구 솔루션을 찾을 수 있습니다. 웹 디자이너는 포괄적인 디자인이 내장된 웹 페이지 구성 요소를 만드는 방법을 배울 수 있습니다. 웹 강사는 사람들에게 접근 가능한 웹 디자인 및 개발에 대해 가르칠 수 있는 예제를 찾을 수 있습니다. 콘텐츠 작성자는 접근 가능한 방식으로 콘텐츠를 준비하기 위한 개념과 기술을 배웁니다. 프로젝트 관리자는 프로젝트에 접근성을 통합하는 방법을 이해할 수 있습니다. 이 튜토리얼은 웹 프로젝트의 일반적인 작업..
WWDC23에서 발표된 사파리 브라우저에서 사용할 수 있는 CSS 최신 사항 소개에 대한 영상 내용을 간단히 요약해 보겠습니다. 원본 영상 링크 : https://developer.apple.com/videos/play/wwdc2023/10121 크게 4개의 범위로 분류하여 소개했네요. 레이아웃 개선 사항 다양한 색상 사용 유용한 선택자 추가 타이포그라피 개선 사항들 이번에 소개한 CSS 최신 사항들이 아직 모든 브라우저에서 지원하지 않아요. 직접 확인 해보고 싶다면, Safari Technology Preview를 설치하시면 됩니다. 1. 레이아웃 개선 사항 Masonry 레이아웃 가장 먼저 소개된 내용은 grid 레이아웃을 적용할 때, 흔히 핀터레스트 UI라고 부르는 메이슨리(Masonry) UI를 ..
