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

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

HTML에 대해 알아보세요.

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

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

기준은 웹 플랫폼 기능을 모든 주요 브라우저 엔진에서 안전하게 사용할 수 있을 때 웹 개발자에게 신호를 보냅니다. 다음은 이제 기준으로 새로 사용할 수 있는 몇 가지 HTML 기능입니다.
선언적 Shadow DOM이 기준이 되었습니다. 2024년에 새로 사용할 수 있습니다.
Popover API는 2024년에 새로 제공되는 기준이 되었습니다.
inert 속성은 2023년에 새로 사용할 수 있는 기준이 되었습니다.
iframe의 지연 로드는 2023년에 새로 제공되는 기준이 되었습니다.

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 코드를 찾는 데 유용한 도구입니다. 이 가이드에서는 이를 사용하는 방법과 이를 통해 웹 애플리케이션의 성능을 개선하는 방법을 설명합니다.
자세히 알아보기