자바스크립트는 객체 기반의 스크립트 언어.
HTML로는 웹의 내용 작성. CSS로는 웹을 디자인, 자바스크립트로는 웹의 동작 구현.
대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있음.
script 요소는 해당 웹 페이지에 사용할 스크립트를 정의하기 위해 사용.
script 요소 내부에 직접 스크립트를 작성하거나, 외부 스크립트 파일의 주소를 src 속성값으로 명시.
XHTML은 EXtensible HTML을 의미.
XHTML은 HTML과 거의 비슷하지만, 문법의 적용이 조금 더 엄격한 특징.
<html>
태그의 xmlns 속성을 반드시 명시.<html>
, <head>
, <title>
, <body>
태그를 반드시 사용.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
HTML5는 웹 상에서 콘텐츠(content)를 구성하고 보여주기 위한 HTML 언어의 최신 표준 권고안
HTML5는 HTML 4.01, XHTML 1.1 등을 대체하는 HTML의 차세대 표준
문법적으로 매우 유연하게 대처
<!DOCTYPE html>
<meta charset="UTF-8">
<header>
, <nav>
, <main>
, <section>
, <aside>
, <article>
, <footer>
, <figure>
<video>
, <audio>
<canvas>
, <svg>
익스플로러 8과 그 이전 버전에서는 위와 같이 HTML 요소를 새롭게 정의하는 것을 허용하지 않음.
따라서 위와 같은 방법이 아닌 HTML Shiv 방법 사용(Sjoerd Visscher에 의해 개발).
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
HTML5 이전까지는 웹 브라우저마다 어떤 종류의 멀티미디어 파일을 지원할지 각자 다른 방식으로 처리.
하지만 HTML5에서는 플래시와 같은 외부 플러그인의 도움 없이도 멀티미디어 파일을 간단히 사용할 수 있음.
HTML5에서는 <video>
태그를 이용하여 웹 페이지에 비디오를 삽입하는 표준화된 방식을 제공
HTML5에서는 <audio>
태그를 이용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공
HTML 플러그인이란 웹 브라우저의 표준 기능을 확장해 주는 프로그램을 의미.
가장 널리 알려진 플러그인으로는 Java Applet, Flash Player, Pdf Reader 등.
이러한 플러그인은 object 요소나 embed 요소를 사용하여 HTML 문서에 추가.
object 요소는 HTML 문서에 삽입할 객체(object)를 명시하는데 사용.
이 요소는 모든 웹 브라우저에서 동작하며, 객체뿐만 아니라 또 다른 HTML 문서를 삽입.
<object data="/examples/media/sample_plugins_pdf.pdf" style="width:100%; height:700px"></object>
embed 요소는 HTML 문서에 삽입할 객체(object)를 명시하는데 사용.
이 요소는 모든 웹 브라우저에서 동작하며, 객체뿐만 아니라 HTML 문서를 삽입할 수도 있음.
<embed src="/examples/media/sample_plugins_pdf.pdf" style="width:100%; height:700px">
embed 요소는 종료 태그가 없으므로 자식 요소를 둘 수 없다. object 요소를 지원하지 않는 브라우저가 있기 때문에 호환성을 높이기 위한 차원에서 또 다른 규격인 embed 요소 제안.
두개를 한 번에 쓰는 것 추천.
<object><embed></embed></object>
canvas 요소는 웹 페이지에 그래픽을 그려주는 쉽고 강력한 방법을 제공.
svg 요소는 Scalable Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안.
svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현.
사용자의 현재 위치 정보를 가져올 때 사용하는 자바스크립트 API
드래그 앤 드롭 API는 웹 페이지 내의 요소를 사용자가 자유롭게 드래그할 수 있도록 설정
웹 스토리지 API는 기존 쿠키(cookie)의 문제점을 극복하기 위해 웹 브라우저가 직접 데이터(data)를 저장할 수 있게 해줌.
web worker는 스크립트가 웹 페이지의 성능에 영향을 미치지 않도록 백그라운드에서 동작하게 해주는 자바스크립트.
web worker는 스크립트의 다중 스레드(multi-thread)를 지원
server sent events API는 웹 페이지가 서버로부터 갱신된 정보를 자동으로 받을 수 있도록 설정