IT 강좌 HTML 기초 015_HTML5 새로운 기능

HTML5 새로운 기능

HTML5는 HTML의 최신 버전으로, 많은 새로운 태그, 속성, 기능을 도입하여 웹의 기능과 상호작용성을 크게 향상시켰습니다.

HTML5의 흥미로운 새로운 기능들:

• 그림 그리기를 위한 canvas 요소
• 미디어 재생을 위한 video와 audio 요소
• 로컬 오프라인 저장에 대한 더 나은 지원
• article, footer, header, nav, section과 같은 새로운 특수 콘텐츠 요소
• calendar, date, time, email, url, search와 같은 새로운 폼 컨트롤

<canvas>

HTML5 <canvas> 요소는 웹페이지에서 그래픽을 그리는 데 사용됩니다. <canvas> 요소는 JavaScript 기반 그리기 API를 사용하며, 차트, 그래픽, 애니메이션 등 다양한 그래픽을 만드는 데 사용할 수 있습니다.

예제:

1
<canvas width="500" height="500">
2
    귀하의 브라우저는 HTML5 canvas 태그를 지원하지 않습니다.
3
</canvas>
4
<script>
5
    const canvas = document.querySelector("canvas");
6
    // 그리기 컨텍스트 가져오기
7
    const ctx = canvas.getContext("2d");
8
    // 원 그리기
9
    ctx.beginPath();
10
    ctx.arc(250, 250, 100, 0, 2 * Math.PI);
11
    ctx.fillStyle = "yellow";
12
    ctx.fill();
13
</script>

효과:

<svg>

HTML5 SVG 요소는 웹페이지에서 SVG 그래픽을 만드는 데 사용됩니다. SVG 그래픽은 XML 기반 벡터 그래픽으로, 무손실 확대/축소가 가능하며, 다음을 포함한 다양한 목적에 적합합니다:

SVG 요소에는 다음이 포함됩니다:

• <svg> 요소: SVG 그래픽의 루트 요소를 정의합니다.
• <path> 요소: 경로 모양을 정의합니다.
• <rect> 요소: 직사각형 모양을 정의합니다.
• <circle> 요소: 원 모양을 정의합니다.
• <ellipse> 요소: 타원 모양을 정의합니다.
• <line> 요소: 직선을 정의합니다.
• <polygon> 요소: 다각형을 정의합니다.
• <polyline> 요소: 절선을 정의합니다.
• <text> 요소: 텍스트를 정의합니다.
• <g> 요소: 그룹을 정의하며, SVG 요소를 함께 그룹화하는 데 사용됩니다.
• <defs> 요소: 여러 SVG 요소에 적용할 수 있는 전역 속성을 정의합니다.

예제:

1
<svg width="500" height="500">
2
  <circle cx="250" cy="250" r="100" fill="yellow" />
3
</svg>

효과:

SVG와 Canvas는 모두 웹페이지에서 그래픽을 만드는 도구입니다. 각각 장단점이 있으며, 다른 시나리오에 적합합니다.

SVG는 XML 기반 벡터 그래픽으로 무손실 확대/축소가 가능합니다. 이는 SVG 그래픽이 품질 손실 없이 모든 크기로 표시될 수 있음을 의미합니다. SVG 그래픽은 CSS와 JavaScript를 사용하여 조작하고 애니메이션화할 수도 있습니다.

Canvas는 JavaScript 기반 그리기 API로 비트맵 그래픽을 만들 수 있습니다. 이는 Canvas 그래픽이 무손실 확대/축소가 불가능하지만, JavaScript를 사용하여 더 복잡한 그래픽을 만들 수 있음을 의미합니다. Canvas 그래픽도 JavaScript를 사용하여 조작하고 애니메이션화할 수 있습니다.

SVG와 Canvas의 구체적인 차이점:

• SVG 적합한 시나리오:

  • 아이콘, 로고, 일러스트와 같이 무손실 확대/축소가 필요한 그래픽
  • CSS와 JavaScript를 사용하여 조작 및 애니메이션화해야 하는 그래픽

• Canvas 적합한 시나리오:

  • 게임, 애니메이션과 같이 복잡한 그래픽을 만들어야 하는 시나리오
  • JavaScript를 사용하여 복잡한 작업이 필요한 시나리오

HTML5 폼

HTML5는 폼의 기능과 사용성을 향상시키기 위해 몇 가지 새로운 입력 유형과 속성을 도입했습니다.

새로운 폼 요소:

• <datalist> 요소: <input> 요소에 대한 미리 정의된 옵션 목록입니다.

예제:

1
<label for="browser">브라우저 선택:</label>
2
<input list="browsers" id="browser" name="browser" autocomplete="off">
3
<datalist id="browsers">
4
  <option value="Chrome">
5
  <option value="Firefox">
6
  <option value="Safari">
7
  <option value="Edge">
8
  <option value="Opera">
9
</datalist>

효과:

새로운 폼 속성:

• <form> / <input> autocomplete 속성: form 또는 input 필드가 자동 완성 기능을 가져야 함을 지정합니다. 사용자가 자동 완성 필드에 입력을 시작하면 브라우저가 해당 필드에 채울 옵션을 표시해야 합니다.

예제:

1
<form action="demo-form.php" autocomplete="on">
2
  성: <input type="text" name="fname"><br>
3
  이름: <input type="text" name="lname"><br>
4
  이메일: <input type="email" name="email" autocomplete="off"><br>
5
  <input type="submit">
6
</form>

효과:

새로운 input 유형:

1
<form action="/submit" method="post">
2
  <label for="name">이름:</label>
3
  <input type="text" id="name" required />
4
  <br>
5
  <label for="email">이메일 주소:</label>
6
  <input type="email" id="email" required />
7
  <br>
8
  <label for="birthday">생년월일:</label>
9
  <input type="date" id="birthday" required />
10
  <br>
11
  <label for="phone">전화번호:</label>
12
  <input type="tel" id="phone" required />
13
  <br>
14
  <input type="submit" value="제출" />
15
</form>

효과:

[!요약]