From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/html/html5/index.html | 122 +++++++++++++++++++++ .../html/html5/introduction_to_html5/index.html | 40 +++++++ 2 files changed, 162 insertions(+) create mode 100644 files/ko/web/html/html5/index.html create mode 100644 files/ko/web/html/html5/introduction_to_html5/index.html (limited to 'files/ko/web/html/html5') diff --git a/files/ko/web/html/html5/index.html b/files/ko/web/html/html5/index.html new file mode 100644 index 0000000000..2d64ce56d6 --- /dev/null +++ b/files/ko/web/html/html5/index.html @@ -0,0 +1,122 @@ +--- +title: HTML5 +slug: Web/HTML/HTML5 +translation_of: Web/Guide/HTML/HTML5 +--- +

HTML5는 HTML를 정의하는 표준화에 있어서의 최신 표준 명세입니다. HTML5 명세는 아직도 표준 지정이 완료되지 않았고 변경이 계속 진행 중입니다. 하지만, Mozilla 및 다른 웹 브라우저 벤더는 이미 사양 중  많은 부분에 대한 구현을 시작하고 있습니다. 여기에 링크 하고 있는 문서에서는 Firefox 및 다른 많은 제품으로 사용되어 있는 Mozilla의 Gecko 엔진에 있어서 이미 기술 지원되어 있는 HTML5의 기능에 대해 설명하고 있습니다. 각각의 기능을 기술 지원하고 있는 Gecko 버전 및 다른 브라우저 엔진에 대해서는 지정된 페이지를 참조해 주십시오.

+ +

(HTML5의 문서에 대한 다른 분류도 참고하세요.)

+ +

HTML5 소개

+ +
+
HTML5의 소개
+
이 문서에서는 웹 디자인이나 웹 애플리케이션으로 HTML5 이용 방법을 소개합니다.
+
+ +

HTML5의 요소

+ +
+
HTML5 요소·태그의 목록
+
현재 사양 초안에 근거한 HTML5 요소(태그)의 목록표입니다.
+
오디오/비디오 사용하기
+
Firefox 3.5이상에서  HTML5의 {{ HTMLElement("audio") }} 요소와 {{ HTMLElement("video") }} 요소의 기술 지원이 추가되었습니다.
+
HTML5 웹 폼양식
+
HTML5에서는 웹 폼양식이 개선됩니다. {{ HTMLElement("input") }} 요소의 {{ htmlattrxref("type", "input") }} 속성에 새로운 값이나 새 요소인 {{ HTMLElement("output") }} 요소 등이 새롭게 추가되었습니다.
+
HTML5 섹션과 아웃라인
+
HTML5 에서는 아웃라인과 섹션에 관한 요소가 추가되었습니다.: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("hgroup") }}.
+
{{ HTMLElement("mark") }} 요소
+
mark 요소는 텍스트중에서의 특별한 관련성을 강조시키기 위해서 이용합니다.
+
{{ HTMLElement("figure") }} 및 {{ HTMLElement("figcaption") }} 요소
+
주로 사용된 문장과 느슨하게 연결된, 최종 캡션을 수반한 도식이나 그림을 추가할 수 있습니다.
+
+ +

Canvas 기술 지원

+ +
+
Canvas 튜토리얼
+
새로운 요소인 {{ HTMLElement("canvas") }} 요소와 그것을 사용하여 Firefox에 그래프나 다른 객체를 재생 하는 방법에 대해 배웁니다.
+
canvas 요소의 HTML5 text API
+
{{ HTMLElement("canvas") }} 요소가 HTML5 text API를 기술 지원합니다.
+
+ +

웹 애플리케이션 기능

+ +
+
Firefox 오프 라인 자원
+
Firefox는 HTML5의 오프 라인 자원 사양을 완전하게 구현 및 지원하고 있습니다. 대다수 브라우저의 몇 가지 레벨로 오프 라인 자원을 기술 지원하고 있습니다.
+
Online 이벤트와 Offline 이벤트
+
Firefox 3은 WHATWG의 online 및 offline 이벤트를 기술 지원하고 있습니다. 이러한 이벤트는 애플리케이션이나 확장 기능에 현재 인터넷 접속 상태의 연결 여부를 확인할 수 있습니다.
+
WHATWG 클라이언트 사이드 세션 스토리지 및 영구 스토리지 (DOM Storage)
+
클라이언트 사이드 세션 스토리지와 영구 스토리지에 의하고 웹 애플리케이션이 구조화 데이터를 클라이언트 측에 저장할 수 있도록 합니다.
+
contentEditable 속성： 웹 사이트 및 위키 편집 용이성
+
HTML5 에서는 contentEditable 속성이 표준화 되었습니다. 이 기능에 대해 살펴봅니다.
+
로컬 파일 사용하기
+
새로운 HTML5 File API 지원이 Gecko에 추가되었습니다. 이 API는 웹 애플리케이션이 사용자가 선택한 로컬 파일에 접근 하는 것을 가능하게 합니다. 이것에는 type 속성의 값에 file를 지정한 {{ HTMLElement("input") }} 요소에 새롭게 추가된 multiple 속성을 이용하는 것으로 복수 파일을 선택할 수 있게 되는 기술 지원가 포함되어 있습니다.
+
+ +

DOM 주요 기능

+ +
+
getElementsByClassName
+
Document 및 Element 노드에 있어서의 getElementsByClassName 메소드가 지원되어 있습니다. 이러한 메소드를 이용하는 것으로 지정한 클래스 또는 지정한 클래스의 목록를 가지는 요소를 찾아낼 수 있습니다.
+
드래그 앤 드롭
+
HTML5의 드래그앤 드롭 API는 웹 사이트간에 있어서의 아이템의 끌어오기 및 놓기 기능을 지원합니다. 또, 확장 기능이나 Mozilla 기반의 애플리케이션으로 사용할 수 있는 단순한 API 도 제공합니다.
+
HTML 내 포커스 관리
+
HTML5가 새로운 activeElement 속성과 hasFocus 속성이 지원되어 있습니다.
+
웹 기반 프로토콜 핸들러
+
navigator.registerProtocolHandler()메소드를 사용하여, 웹 애플리케이션을 프로토콜 핸들러로서 등록할 수 있게 되었습니다.
+
+ +

HTML 파서

+ +

Gecko의 HTML5 표준 파서(HTML 문서를  DOM으로 변환하는 엔진)는 2010 년 3 월에 기본적으로 사용됩니다(Gecko 1.9.2 / Firefox 3.6에 탑재되어 있는 시점의 HTML5 파서는 매우 불안정한 버전이며 실제 이용하는 것을 추천 하지 않습니다).{{ fx_minversion_inline(4.0) }}

+ +

추가 변경사항

+ + + +

HTML5의 일부로서 포함된 기술

+ +

아래 기술들은 "HTML5"의 광의의 영역에 포함되어 있습니다만 W3C의 HTML5 사양에 없는 것들입니다.

+ + + +

관련 문서

+ +

웹 발자에게 영향이 있는 Firefox 출시 버전에 따른 변경점：

+ + diff --git a/files/ko/web/html/html5/introduction_to_html5/index.html b/files/ko/web/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..8b9698dc53 --- /dev/null +++ b/files/ko/web/html/html5/introduction_to_html5/index.html @@ -0,0 +1,40 @@ +--- +title: HTML5 소개 +slug: Web/HTML/HTML5/Introduction_to_HTML5 +tags: + - HTML5 + - 웹개발 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +

HTML5는 HTML 표준의 가장 새로운 버전입니다. HTML5를 통해 리치 미디어의 기술 지원 뿐만이 아니라, 사용자 및 로컬 데이터를 웹 서버 사이에 보다 간편하면서도 효과적으로 교환할 수 있는 웹 애플리케이션을 개발하기 위한 확장 기술 지원를 제공하는 새로운 기능도 제공됩니다.

+ +

HTML5는 아직 표준 제정 단계에 있기 때문에 현재 사양에 대한 변경이 있을 것입니다. 따라서 모든 브라우저에 HTML5 기능 모든 것이 기술 지원되어 있는 것은 아닙니다. 하지만, Gecko (그리고 이를 사용하는 Firefox)에는 훌륭하게 HTML5의 최초 단계 기술 지원이 포함되어 있어 새로운 기능에 대한 대처를 계속하고 있습니다. Gecko는 버전 1.8.1에서 HTML5의 기능을 기술 지원하기 시작했습니다. HTML5의 메인 페이지에 Gecko가 기술 지원하고 있는 HTML5기능 목록이 있습니다. 여러 브라우저의 기술 지원 상황의 상세한 정보에 대해서는 CanIUse 웹 사이트를 참조해 주십시오.

+ +

HTML5 DOCTYPE

+ +

HTML5의 DOCTYPE는 매우 간단합니다. HTML 콘텐트로 HTML5를 사용하는 것을 나타내려면 단순하게 아래와 같이 합니다：

+ +
<!DOCTYPE html>
+
+ +

이  DOCTYPE은 현재 HTML5를 기술 지원하고 있지 않는 브라우저조차, HTML의 호환성을 유지함과 동시에 HTML5의 규격 대로 기능이 지원되지 않더라도 신기능을 무시하는 것을 의미하는 표준 모드로 전환합니다.

+ +

이것은 이전의 doctype들 보다 훨씬 간단하고 짧으며, 기억하기 쉽고, 다운로드 받아야 하는 바이트의 양을 줄여줍니다.

+ +

<meta charset>으로 문자셋 정의하기

+ +

보통 문서의 처음에는 사용된 문자셋을 정의합니다. 이전 버전의 HTML에서는 매우 복잡한 {{HTMLElement("meta")}} 엘리먼트를 통해서 문자셋을 정의했습니다. 이제는 이렇게 간단해졌습니다.

+ +
<meta charset="UTF-8">
+ +

이것을 {{HTMLElement("head") }} 뒤에 가져다 놓으세요. 몇몇 브라우저는 HTML에 기대했던것과 다른 문자셋이 정의되어 있으면 문서를 다시 해석합니다. 또한, 여러분이 현재 다른 문자셋을 사용하고 있다면 UTF-8로 여러분 웹 페이지의 문자셋을 변경하는것을 추천합니다. 이것이 여러 스크립트를 사용한 문서의 문자 처리를 단순화시켜줍니다.

+ +

HTML5는 ASCII와 호환되며 적어도 8비트의 크기를 가지는 문자셋만을 지원합니다. 이렇게 함으로서 보안을 강화하고 특정형태의 공격을 방지할수 있습니다.

+ +

새로운 HTML5 해석기의 사용

+ +

HTML5에서는 마크업의 의미를 분석하는 해석 룰이 더 정확하게 정의 되었습니다. HTML5가 나오기 전까지는 단지 유효한 마크업의 의미만 정의되었기 때문에 마크업에 작은 에러라도 있을 때 문서를 어떻게 해석해야 할지는 정의되지 않았습니다. 결국 모든 브라우저가 서로 다르게 작동했습니다. 이제는 그렇지 않습니다. 이제 마크업에 에러가 있을 때는 모든 호환 브라우저가 똑같이 반응해야 합니다.

+ +

이 요구사항이 웹 개발자들의 삶을 꽤 편하게 해줍니다. 이제 모든 최신 브라우저가 HTML5의 해석 룰을 따르지만 HTML5-비호환 브라우저들도 여전히 사용되고 있습니다. 유효한 마크업을 사용하면 읽기 편하고 유지보수에 좋을 뿐 아니라, 여러 오래된 브라우저에서 호환되지 않을 가능성을 매우 줄여주기 때문에 이를 매우 추천합니다.

+ +

걱정하지 마세요 — 여러분 웹사이트를 손 댈 필요는 없습니다 — 웹브라우저 개발자들이 여러분을 위해 모두 준비해놓았습니다!

-- cgit v1.2.3-54-g00ecf