HTML5 페이지를 만들고 싶습니다.
웹 페이지의 문자 인코딩을 정의해야 합니다.
웹 페이지에 사용한 언어를 명시하고 싶습니다.
<script> 요소와 <link> 요소 최적화하기자바스크립트나 외부 CSS 파일을 연결할 때 가능한 한 간소하게 쓰고 싶습니다.
새로운 header, footer, nav, aside, section, article 요소를 이용해 문서 구조를 명시하고 싶습니다.
<article>? <section>?article 요소나 section 요소 중 어느 쪽이 더 적절한지 잘 모르겠습니다.
<section>문서 콘텐츠의 개요를 보고 싶습니다.
페이지 제목과 태그라인을 각각 h1과 h2로 마크업했지만 문서 개요에는 태그라인이 나타나지 않게 하고 싶습니다.
텍스트 콘텐츠를 강조하고 싶습니다.
한 묶음의 텍스트를 중요한 것으로 표시하고 싶습니다.
검색 결과에서 검색어를 하이라이트하고 싶습니다.
법적 고지나 저작권 문구를 스몰 프린트로 마크업하고 싶습니다.
약어와 두문자어의 원래 의미를 제공하고 싶습니다.
사이트 로고와 주요 제목을 단 하나의 링크로 감싸고 싶습니다.
웹 페이지에 일러스트레이션과 함께 캡션을 넣고 싶습니다.
날짜와 시간을 기계에서 인식할 수 있도록 인코드하는 동시에 사람도 읽을 수 있게 하고 싶습니다.
사용자가 포커스를 줌에 따라 콘텐츠를 펼치고 접을 수 있게 하고 싶습니다(브라우저가 지원한다면).
순서 있는 목록(ol)에서 순번이 1이 아닌 숫자로 시작하게 하고 싶습니다.
사용자가 로그인하기 전에는 보이지 말아야 할 콘텐츠가 있습니다.
사용자가 브라우저에서 바로 콘텐츠를 수정할 수 있게 하고 싶습니다.
사용자가 웹 페이지의 콘텐츠를 끌어서 옮길 수 있게 하고 싶습니다.
콘텐츠를 정확하게 마크업하고 싶습니다.
어떤 코딩 스타일과 문법을 써야 하는지 알고 싶습니다.
브라우저 또는 특정 브라우저 버전에서 HTML5 기능을 지원하는지 알고 싶습니다.
인터넷 익스플로러는 자신이 인식하지 못하는 요소에 CSS를 적용하지 않습니다. 따라서 HTML5 구현이 어려운데, 인터넷 익스플로러에서 이들 새 요소에 적용한 CSS를 전혀 렌더링하지 않기 때문입니다.
브라우저에서 HTML5 기능을 지원하면 그에 맞게 구현하고, 지원하지 않을 때는 다른 방법으로 해결하고 싶습니다.
견고한 템플릿을 통해 HTML5를 시작하고 싶습니다.
마크업 에러를 모두 찾아서 없애고 싶습니다.
아직 HTML5를 쓸 생각은 없지만 나중에 사이트를 HTML5로 업그레이드할 때 편하도록 미리 준비하고 싶습니다.
사용자에게 검색 필드를 제공하고 싶습니다.
사용자에게 이메일 주소나 URL, 전화 번호 같은 연락처 정보를 입력하는 필드를 제공하고 싶습니다.
사용자에게 날짜와 시간을 입력할 필드 - 예를 들어 약속을 잡기 위해 - 를 제공하고 싶습니다.
사용자가 숫자를 입력할 필드 - 예를 들어 주문 폼에서 상품 수량을 입력할 필드를 제공하고 싶습니다.
사용자에게 일정 범위 안에서 숫자를 입력하는 - 예를 들어 비디오의 볼륨 - 컨트롤을 제공하고 싶습니다.
사용자에게 색깔을 선택할 수 있게 하고 싶습니다 - 예를 들어 웹 페이지의 모양을 사용자 마음대로 바꿀 수 있도록.
사용자가 텍스트를 자유로이 입력할 수 있게 하면서도 선택할 수 있는 예를 제안하고 싶습니다.
폼을 전송하기 전에 특정 필드를 반드시 입력하게끔 하고 싶습니다.
페이지를 불러 왔을 때 특정 필드에 포커스를 주고 싶습니다.
텍스트 필드에 대한 힌트나 도움말을 해당 필드 안에 표시하고 싶습니다.
폼 필드에서 자동완성을 끄고 싶습니다.
입력할 수 있는 값을 필드의 규칙에 맞게 제한하고 싶습니다.
HTML5의 입력 타입과 속성을 HTML5를 지원하지 않는 브라우저에서도 사용하고 싶습니다.
HTML5를 지원하지 않는 브라우저에서도 HTML5 속성을 이용하여 유효성 검사를 하고 싶습니다.
사용자에게 약속 스케줄 폼을 제공하고 싶습니다.
웹 페이지에서 네이티브 오디오를 재생하고 싶습니다.
HTML5 audio 요소가 브라우저에서 어떻게 재생될 지 컨트롤하고 싶습니다.
<audio> 생성하기웹 페이지에서 실시간으로 오디오를 생성하고 싶습니다.
<canvas> 요소를 써서 <audio> 시각화하기HTML5 오디오의 파형을 canvas 요소에 그리고 싶습니다.
오디오 플레이어를 직접 디자인하고 싶습니다.
웹 페이지에서 네이티브 비디오를 재생하고 싶습니다.
가능한 많은 브라우저에서 네이티브 비디오를 재생하고 싶습니다.
비디오 플레이어의 너비와 높이를 지정하고 싶습니다.
사용자가 비디오를 재생하기 전에 스틸 프레임이나 포스터 이미지를 표시하고 싶습니다.
비디오를 자동으로 반복 재생하고 싶습니다.
<canvas> 요소로 비디오 조작하기유튜브 비디오를 페이지에 삽입하고 싶지만 유튜브에서 자동으로 선택하는 미리보기 프레임을 개선하고 싶습니다.
마이크로데이터를 이용해 콘텐츠에 눈에 보이는 이상의 의미와 시맨틱을 추가하고 파싱 도구에서 이를 통해 정보를 얻게 하고 싶습니다.
콘텐츠와 함께 추가적인 의미 - 예를 들어 해당 콘텐츠가 특정 인물을 설명하고 있음을 나타내서 인기 있는 검색엔진이 이 데이터를 이용하게 하고 싶습니다.
콘텐츠에 사용자에게는 보이지 않을 데이터를 추가하고 싶습니다.
페이지에 있는 커스텀 데이터에 접근하고 데이터에 따라 어떤 동작을 실행하고 싶습니다.
페이지에 있는 커스텀 데이터를 조작하거나 추가하고 싶습니다.
data() 메서드이미지에 대체 텍스트를 제공하고 싶습니다.
사용자에게 약어나 두문자어의 의미를 알리고 싶습니다.
웹 콘텐츠의 주요 섹션을 구분하고 싶습니다.
내비게이션 링크를 최대한 많은 사용자에게 도움에 되게끔 마크업하고 싶습니다.
폼 필드와 텍스트 레이블을 연결해야 합니다.
연관된 폼 필드를 그룹으로 묶어야 합니다.
fieldset에 들어있는 필드를 비활성화했다가 특정 조건 - 예를 들어 사용자가 라디오 버튼이나 체크박스를 선택할 때 - 이 만족되면 동적으로 활성화하고 싶습니다
어느 폼 필드가 필수적인지 사용자가 눈으로도 알 수 있게 하고 반드시 입력하도록 프로그램을 통해 강제하고 싶습니다.
웹 페이지의 일부가 동적으로 업데이트되었을 때 사용자에게 알리고 싶습니다.
사용자의 인터넷 장치 위치를 알고 싶습니다.
사용자의 브라우저가 HTML5 지오로케이션 API를 자체적으로 지원하지 않더라도 사용자의 인터넷 위치를 알고 싶습니다.
위도와 경도 좌표를 사람에게 친근한 주소로 바꾸고 싶습니다.
주소를 위도와 경도 좌표로 바꾸고 싶습니다.
사용자의 현재 위치로부터 특정한 주소까지의 방향을 알고 싶습니다.
가장 가까운 스타벅스에서 다음으로 가까운 스타벅스를 향한 방향을 알고 싶습니다.
<canvas><canvas>에 그리기img 요소를 통해 페이지에 외부 이미지를 불러오지 않고 그래픽 요소를 그리고 싶습니다.
canvas 요소에 투명한 도형을 그려 그 아래에 있는 콘텐츠가 비쳐 보이게 하고 싶습니다.
<canvas> 요소의 크기 지정canvas 요소의 너비와 높이를 명시적으로 기본 크기와 다르게 설정하고 싶습니다.
그림에 그래디언트나 기타 스타일을 쓰고 싶습니다.
<canvas> 그림에 외부 이미지 불러오기그래픽이나 아이콘, 사진 등 외부 파일에 저장된 이미지를 canvas 요소에 불러와서 canvas API 그림 명령어를 통해 조작하거나 장식하고 싶습니다.
canvas 그림에 그레이스케일이나 인버트invert: 반대 색깔 등의 색깔 변형을 적용하고 싶습니다.
크기 조절이나 회전, 비틀기 같은 변형을 적용하고 싶습니다.
<canvas> 요소에서 텍스트 사용canvas 그림에 텍스트를 바로 삽입하고 싶습니다.
<canvas> 그림 자르기그림을 그린 다음 따로 정의한 도형 모양대로 잘라내고 싶습니다.
<canvas> 그림 애니메이트하기canvas 요소에 정적 도형을 그리는 방법은 충분히 알았지만 도형을 이리저리 움직이는 방법도 알고 싶습니다.
<canvas> 요소로 그래프 그리기canvas 요소에서 데이터를 그래프로 표현하고 싶습니다.
<canvas> 그림을 파일로 저장하기현재 canvas 요소에 있는 그림을 파일로 저장하고 싶습니다.
개인화된 설정이나 입력하다 중단한 폼 데이터 등을 사용자의 시스템에 저장해서 다음 방문했을 때 이용하려 합니다.
사용자가 오프라인이 되더라도 일반적인 브라우저 캐시에 의존하지 않고 웹 애플리케이션과 모든 자원을 사용하게 하고 싶습니다
복잡한 라이브러리를 사용하거나 마우스 이벤트를 직접 관리하지 않고 브라우저 자체적인 드래그 앤 드롭 기능을 이용하고 싶습니다.
복잡하고 오래 실행되는 자바스크립트 작업이 브라우저 UI를 멈추지 않게 하고 싶습니다.
웹 애플리케이션과 서버 사이에 지속적인 양방향 통신을 생성해서 브라우저와 서버가 필요할 때마다 데이터를 주고받게 하고 싶습니다.
웹 애플리케이션에서 뒤로 가기/앞으로 가기 버튼의 히스토리 큐를 세밀히 제어하고 브라우저의 주소 표시즐에도 URL을 표시하고 싶습니다.
사용자가 로컬 파일시스템의 이미지 파일을 읽어들여 웹 페이지에서 미리보기를 한다거나 사이트에 올릴 수 있게 하고 싶습니다.