이 과정에서는 HTML 형식을 이해하기 쉬운 부분으로 나눕니다. 다음 몇 개의 모듈에서는 HTML 양식이 작동하는 방식과 프로젝트에서 이를 효과적으로 사용하는 방법을 배웁니다. Learn Forms 로고 옆에 있는 메뉴 창을 사용하여 모듈을 탐색합니다.
기본 HTML 양식을 작성하는 방법, HTML 양식 요소, 양식 스타일 지정, 사용자가 데이터를 다시 입력하도록 지원하는 방법, 양식에 액세스할 수 있고 안전한지 확인하는 방법, 양식을 테스트하는 방법, 특정 양식 유형에 관해 배웁니다.
각 모듈은 지식을 테스트할 수 있는 대화형 데모와 자가 진단으로 가득합니다.
이 과정은 초보자 및 고급 HTML 개발자에게 적합합니다. 처음 몇 개 모듈은 HTML 양식 작성을 시작하는 데 도움이 되고 다른 모듈은 보다 자세한 내용을 제공합니다. 시리즈를 처음부터 끝까지 살펴보면서 HTML 양식에 대한 일반적인 내용을 파악하거나 자세히 알아보고 싶은 특정 모듈을 선택할 수 있습니다.
기본 요건
이 과정을 시작하기 전에 HTML에 대해 알아야 합니다. 웹 개발이 처음이라면 MDN의 HTML 소개 과정을 확인하여 마크업을 작성하는 방법을 모두 알아보세요.
데모
대부분의 데모에서는 CodePen을 사용합니다.
데모를 살펴보면서 스타일이 어디에서 비롯되는지 궁금할 수 있습니다. Google에서는 모든 데모에 포함된 일반 스타일시트를 사용하므로 관련 스타일만 표시됩니다. CodePen을 사용하면 설정에서 포함된 CSS 파일을 선택할 수 있습니다.
양식 컨트롤 및 양식 필드
양식 컨트롤은 사용자 상호작용과 데이터 입력 또는 선택(<input>, <select>, <textarea> 또는 <button>)을 가능하게 하는 요소입니다.
양식 필드가 양식 컨트롤, 특히 텍스트 입력을 위한 요소(<input> 및 <textarea>)를 참조하는 데 사용되기도 합니다.
학습할 내용
Forms를 사용하여 사용자로부터 데이터 가져오기
양식 요소에 관한 이 소개를 통해 웹에서 양식 사용에 관한 기본사항을 알아봅니다.
사용자가 양식에 데이터를 입력하도록 지원하기
양식을 만들기 위해 선택할 수 있는 다양한 양식 요소의 개요입니다.
사용자가 양식에 데이터를 다시 입력하지 않도록 지원
사용자가 양식을 더 편리하게 작성할 수 있도록 합니다.
사용자가 양식에 올바른 데이터를 입력하도록 지원
프런트엔드에서 양식을 검증하는 방법을 알아봅니다.
양식 테스트
양식을 테스트하고 분석하는 방법을 알아보세요.
디자인 기본사항
사용자 친화적인 양식을 만드는 방법을 알아보세요.
접근성
포용적인 양식을 만드는 방법
다국어화 및 현지화
국제적인 데이터 형식에 대비하고 현지화를 위한 양식을 계획하는 방법을 알아봅니다.
보안 및 개인 정보 보호
양식을 안전하게 보호하고 사용자 데이터를 비공개로 유지하는 방법을 알아보세요.
자동 완성
자동 완성 및 자동 완성 속성에 관해 자세히 알아봅니다.
양식의 사용성을 테스트하는 방법
사용성 테스트를 수행하고 모든 사용자에게 양식이 잘 작동하는지 확인하는 방법을 알아보세요.
다양한 기기 및 플랫폼에서의 테스트 양식
양식이 다양한 기기, 브라우저, 플랫폼, 다양한 컨텍스트에서 작동하는지 확인하세요.
데이터 수집
양식을 측정하고 분석하는 방법을 알아보세요.
양식 요소 세부정보
양식 요소, 양식을 사용해야 하는 경우, 양식의 작동 방식에 대해 자세히 알아봅니다.
양식 필드 세부정보
사용할 수 있는 다양한 양식 입력란과 올바른 양식 요소를 선택하는 방법에 대해 알아보세요.
양식 속성 심층 분석
터치 키보드의 레이아웃을 수정하는 방법, 내장된 유효성 검사 활성화 방법 등 양식 속성에 관한 모든 내용을 알아보세요.
양식 스타일 지정
CSS를 사용하여 양식의 스타일을 지정하되, 누구나 사용할 수 있고 양식을 읽을 수 있도록 합니다.
양식 컨트롤 스타일 지정
CSS로 양식 컨트롤을 구현하는 방법 알아보기
JavaScript
자바스크립트를 사용하여 양식을 개선하는 방법을 알아보세요.
결제 양식
더 나은 결제 방법을 만들어 전환율을 높이세요.
주소 양식
사용자가 주소 양식을 빠르고 쉽게 작성할 수 있도록 지원합니다.
결론 및 다음 단계
다음 단계로 나아가는 데 도움이 되는 추가 리소스입니다.
양식에 대해 알아볼 준비가 되셨나요? 이제 시작해 볼까요?