HTML은 웹의 문서 레이어로, 웹페이지에 의미를 부여하는 데 필요한 구조와 콘텐츠를 제공합니다. 여기에서 과정, 도움말, 컬렉션과 같은 HTML 관련 콘텐츠와 웹의 이 중요한 부분에 대한 지식을 쌓는 데 도움이 되는 기타 유용한 정보를 확인할 수 있습니다.
HTML을 처음 사용하시나요? 시작하는 데 도움이 되는 종합적인 과정을 제공합니다.
HTML의 특정 주제를 자세히 알아보려면 다음 과정을 확인하세요.
모든 주요 브라우저 엔진에서 새로 사용할 수 있는 최신 HTML 기능을 알아보세요.
접근성이 뛰어난 웹 애플리케이션을 빌드하는 데 도움이 되는 HTML 패턴과 개념을 알아봅니다.
웹 애플리케이션을 더 빠르게 만드는 HTML 기반 개념과 패턴을 알아봅니다.
Chrome DevTools를 사용하여 웹 애플리케이션에서 HTML 및 DOM을 디버그하는 방법을 알아보세요.
과정

HTML을 처음 접하는 경우 다음 도움말을 참고하세요. HTML 학습 과정에서는 구조적 문제, 메타데이터, 시맨틱스 등 HTML 작동 방식의 기본사항과 기술을 연마하는 데 도움이 되는 추가 주제를 안내합니다.

HTML에 대해 자세히 알아보려면 다음 과정을 참고하세요. 이 과정에서는 웹 애플리케이션을 개선하는 데 사용할 수 있는 고급 주제를 다룹니다.

HTML 양식을 사용하면 사용자가 웹 애플리케이션에 입력할 수 있습니다. 이 과정에서는 HTML 양식을 효과적으로 사용하는 방법에 대해 알아봅니다.
이미지는 웹에서 흔히 사용되지만 img 요소를 사용하는 것 이상이 있습니다. 이 과정에서는 웹에서 이미지를 사용하는 방법에 대해 알아야 할 모든 것을 배웁니다.
접근성은 웹 플랫폼의 모든 부분에 적용되지만 접근 가능한 HTML을 작성하는 것이 접근 가능한 웹 애플리케이션을 빌드하는 데 있어 중요한 부분입니다. 이 과정에서는 접근 가능한 마크업을 작성하는 데 필요한 모든 것을 알려줍니다.

기준은 웹 플랫폼 기능을 모든 주요 브라우저 엔진에서 안전하게 사용할 수 있을 때 웹 개발자에게 신호를 보냅니다. 다음은 이제 기준으로 새로 사용할 수 있는 몇 가지 HTML 기능입니다.

독점 아코디언이 기준이 되었습니다. 2024년 9월에 새로 사용할 수 있습니다.
선언적 Shadow DOM이 2024년 2월에 기준이 되었습니다.
Popover API는 2024년 4월에 새로 출시된 기준 API가 되었습니다.
비활성 속성은 2023년 4월에 기준으로 새롭게 제공되었습니다.
iframe의 지연 로드가 2023년 12월에 기준으로 새롭게 제공되었습니다.

HTML은 액세스 가능한 웹 애플리케이션을 빌드하는 데 있어 기본적인 부분입니다. 이 섹션에서는 HTML을 사용하여 접근성 있는 웹 애플리케이션을 빌드하는 방법을 자세히 알아볼 수 있는 도움말과 리소스를 확인할 수 있습니다.

제목과 랜드마크에 올바른 요소를 사용하면 집중 기술을 사용하는 사용자의 탐색 환경을 크게 개선할 수 있습니다.
올바른 의미론적 HTML 요소를 사용하면 키보드 액세스 요구사항의 대부분 또는 전부를 충족할 수 있습니다. 따라서 tabindex를 조정하는 데 드는 시간을 줄이고 더 많은 사용자를 만족시킬 수 있습니다.
일시적 및 영구적인 운동 장애가 있는 많은 사용자가 애플리케이션을 더 효율적으로 탐색하기 위해 단축키를 사용합니다. 애플리케이션에 적절한 키보드 탐색 전략을 사용하면 모든 사용자에게 더 나은 환경을 제공할 수 있습니다.
스크린 리더가 사용자에게 음성 UI를 표시하려면 의미 있는 요소에 적절한 라벨이나 텍스트 대체 텍스트가 있어야 합니다. 라벨 또는 텍스트 대체는 접근성 트리에서 요소 시맨틱을 표현하는 주요 속성 중 하나인 액세스 가능한 이름을 요소에 제공합니다.

HTML을 사용하는 방식에 따라 웹 애플리케이션의 성능이 달라질 수 있습니다. 이 섹션에서는 HTML을 사용하여 웹 애플리케이션을 더 빠르게 만드는 방법을 자세히 알아볼 수 있는 도움말과 리소스를 확인할 수 있습니다.

브라우저 사전 로드 스캐너는 브라우저가 리소스를 더 일찍 발견하는 데 사용하는 특수화된 HTML 파서입니다. 생성형 AI가 웹 애플리케이션의 성능에 어떻게 도움이 되는지, 그리고 이를 중단하는 방법을 알아보세요.
Fetch Priority API는 fetchpriority HTML 속성을 사용하여 브라우저에 대한 리소스의 상대적 우선순위를 나타냅니다. 로드 최적화를 가능하게 하고 코어 웹 바이탈을 개선할 수 있습니다.
리소스 미리 로드: HTML link 요소를 사용하여 브라우저에 리소스가 필요해지기 전에 가져오라고 지시하는 기법입니다. 이 가이드에서 이를 사용하여 웹 애플리케이션의 성능을 개선하는 방법을 알아보세요.
이미지 지연 로딩은 페이지를 처음 로드할 때 대역폭을 보존하는 데 효과적인 기술입니다. 이 가이드에서는 HTML loading를 사용하여 이미지를 지연 로드하는 방법을 알아봅니다.

Chrome DevTools는 개발자가 웹 애플리케이션을 디버그하는 데 사용하는 도구 모음입니다. 다음은 웹 애플리케이션에서 페이지의 HTML 및 DOM과 기타 관련 개념을 디버그하는 데 도움이 되는 몇 가지 추천 도구입니다.

DevTools에는 웹 애플리케이션의 DOM을 보고, 수정하고, 디버그할 수 있는 Elements 패널이 있습니다. 이 가이드를 읽고 요소 패널 사용을 시작해 보세요.
DevTools의 Elements 패널을 사용하면 JavaScript에서 트리거된 DOM 변경사항을 수신 대기할 수 있습니다. 이 유용한 기능을 사용하여 웹 애플리케이션의 DOM 변경사항을 디버그하는 방법을 알아보세요.
적용 범위 패널은 웹 애플리케이션의 HTML에서 로드된 사용되지 않는 CSS 및 JavaScript 코드를 찾는 데 유용한 도구입니다. 이 가이드에서는 이를 사용하는 방법과 이를 통해 웹 애플리케이션의 성능을 개선하는 방법을 설명합니다.