[HTML] 기초 다지기 2

HTML과 자바스크립트

자바스크립트란?

자바스크립트는 객체 기반의 스크립트 언어.
HTML로는 웹의 내용 작성. CSS로는 웹을 디자인, 자바스크립트로는 웹의 동작 구현.
대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있음.

script 요소

script 요소는 해당 웹 페이지에 사용할 스크립트를 정의하기 위해 사용.
script 요소 내부에 직접 스크립트를 작성하거나, 외부 스크립트 파일의 주소를 src 속성값으로 명시.

XHTML

XHTML(Extensible HTML)

XHTML은 EXtensible HTML을 의미.
XHTML은 HTML과 거의 비슷하지만, 문법의 적용이 조금 더 엄격한 특징.

XHTML에서의 변경 사항

문서의 구조적 측면

  • XHTML DOCTYPE을 반드시 명시.
  • <html>태그의 xmlns 속성을 반드시 명시.
  • <html>, <head>, <title>, <body>태그를 반드시 사용.

문서의 요소적 측면

  • 모든 태그는 반드시 닫혀야 함.
  • 모든 태그는 순서대로 닫혀야 함.
  • 모든 요소는 반드시 소문자로 사용되어야 함.
  • XHTML 문서는 반드시 하나의 root 요소를 포함해야 함.

문서의 속성적 측면

  • 속성 이름은 반드시 소문자로 사용되어야 함.
  • 속성값은 반드시 따옴표로 감싸야 함.
  • 속성값 생략이 없어졌기 때문에 반드시 속성값을 명시해야 함.

HTML 문서를 XHTML 문서로 변환하는 방법

  1. 첫줄에 다음 코드를 추가합니다.
<!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">
  1. xmlns 속성을 추가.
  2. 모든 태그 이름을 소문자로 바꿔준다.
  3. 모든 빈 태그를 닫아준다.
  4. 모든 속성 이름을 소문자로 바꿔준다.
  5. 모든 속성값을 따옴표로 둘러싼다.

HTML5

HTML5 개요

HTML5는 웹 상에서 콘텐츠(content)를 구성하고 보여주기 위한 HTML 언어의 최신 표준 권고안
HTML5는 HTML 4.01, XHTML 1.1 등을 대체하는 HTML의 차세대 표준
문법적으로 매우 유연하게 대처

  • 태그 이름에 대문자 사용
  • 속성값에 따옴표 생략
  • 속성값 생략
  • 빈 태그의 종료 태그(/) 생략

기본 구조

문법

<!DOCTYPE html>

HTML5

<meta charset="UTF-8">

HTML5 변경사항

HTML5에서 추가된 요소 및 타입

  • 의미(semantic) 요소 : <header>, <nav>, <main>, <section>, <aside>, <article>, <footer>, <figure>
  • 멀티미디어 요소 : <video>, <audio>
  • 그래픽 요소 : <canvas>, <svg>
  • input 요소의 타입 : number, date, time, calendar, range

HTML5에서 추가된 자바스크립트 API

  • Geolocation
  • Drag and Drop
  • Web Storage
  • Application Cache
  • Web Worker
  • Server Sent Events

HTML5에서 삭제된 기존 요소

HTML Shiv 방법

익스플로러 8과 그 이전 버전에서는 위와 같이 HTML 요소를 새롭게 정의하는 것을 허용하지 않음.
따라서 위와 같은 방법이 아닌 HTML Shiv 방법 사용(Sjoerd Visscher에 의해 개발). 

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">

</script>

<![endif]-->

Semantic Element

Input 요소와 타입

HTML5에서 추가된 다양한 타입의 input 요소

  1. datalist 요소
  2. keygen 요소
  3. output 요소

HTML5에서 추가된 input 요소의 타입

  1. 숫자 입력(number)
  2. 입력 범위 지정(range)
  3. 색상 입력(color)
  4. 날짜 입력(date)
  5. 시간 입력(time)
  6. 날짜와 시간 입력(datetime-local)
  7. 연도와 월 입력(month)
  8. 연도와 주 입력(week)
  9. 이메일 입력(email)
  10. URL 주소 입력(url)
  11. 전화번호 입력(tel)
  12. 검색어 입력(search)

HTML5 input 요소의 속성

  1. autocomplete
  2. autofocus
  3. form
  4. formaction
  5. formenctype
  6. formmethod
  7. formnovalidate
  8. formtarget
  9. height and width
  10. list
  11. min and max
  12. multiple
  13. pattern
  14. placeholder
  15. required
  16. step

HTML5 멀티미디어

멀티미디어 파일 형식

HTML5 이전까지는 웹 브라우저마다 어떤 종류의 멀티미디어 파일을 지원할지 각자 다른 방식으로 처리.
하지만 HTML5에서는 플래시와 같은 외부 플러그인의 도움 없이도 멀티미디어 파일을 간단히 사용할 수 있음.

비디오 파일 형식

오디오 파일 형식

비디오

HTML5에서는 <video>태그를 이용하여 웹 페이지에 비디오를 삽입하는 표준화된 방식을 제공

HTML5 video 요소

HTML5 video 속성

  • kind 속성은 자막 문자열의 타입을 명시
  • srclang 속성은 해당 문자열의 언어 설정을 명시
  • label 속성은 사용자가 보게 될 라벨을 명시.

오디오

HTML5에서는 <audio>태그를 이용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공

HTML5 audio 요소

HTML5 audio 속성

플러그인

HTML 플러그인이란 웹 브라우저의 표준 기능을 확장해 주는 프로그램을 의미.
가장 널리 알려진 플러그인으로는 Java Applet, Flash Player, Pdf Reader 등.
이러한 플러그인은 object 요소나 embed 요소를 사용하여 HTML 문서에 추가.

object 요소

object 요소는 HTML 문서에 삽입할 객체(object)를 명시하는데 사용.
이 요소는 모든 웹 브라우저에서 동작하며, 객체뿐만 아니라 또 다른 HTML 문서를 삽입.

<object data="/examples/media/sample_plugins_pdf.pdf" style="width:100%; height:700px"></object>

embed 요소

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 vs svg

canvas 요소는 웹 페이지에 그래픽을 그려주는 쉽고 강력한 방법을 제공.
svg 요소는 Scalable Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안.
svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현.

  • canvas 요소의 성능은 화면이 작거나, 픽셀 수가 많을 경우(>10k)에 좋음.
  • svg 요소의 성능은 화면이 크거나, 픽셀 수가 적을 경우(<10k)에 좋음.

HTML5 API

Geolocation API

사용자의 현재 위치 정보를 가져올 때 사용하는 자바스크립트 API

Drag and Drop

드래그 앤 드롭 API는 웹 페이지 내의 요소를 사용자가 자유롭게 드래그할 수 있도록 설정

Web Storage

웹 스토리지 API는 기존 쿠키(cookie)의 문제점을 극복하기 위해 웹 브라우저가 직접 데이터(data)를 저장할 수 있게 해줌.

  • sessionStorage 객체 : 하나의 세션(session)만을 위한 데이터를 저장하는 객체
  • localStorage 객체 : 보관 기한이 없는 데이터를 저장할 수 있는 객체

Web Worker

web worker는 스크립트가 웹 페이지의 성능에 영향을 미치지 않도록 백그라운드에서 동작하게 해주는 자바스크립트.
web worker는 스크립트의 다중 스레드(multi-thread)를 지원

Server Sent Events

server sent events API는 웹 페이지가 서버로부터 갱신된 정보를 자동으로 받을 수 있도록 설정

Mysql 공식 성능 테스트 도구 mysqlslap의 사용 안내
[BOJ] 15652 N과 M(4)(백트래킹)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage