일반 HTML5 강좌 1강 - HTML5 개념 및 기본구조

황제낙엽 2016.12.03 09:57 조회 수 : 59

sitelink1 http://kiara77.tistory.com/176 
sitelink2  
sitelink3  
sitelink4  
extra_vars5  
extra_vars6  

HTML5 강좌 1강 - HTML5 개념 및 기본구조

 

지난 강좌에서 HTML 태그에 대해 공부하고 연습을 했습니다.

이번 강좌에서는 HTML5에 대해 알아보도록 하죠.

이번 강좌 역시 기본적인 개념은 간단히 이해하고, 예제를 테스트 해보면서 HTML5를 공부하도록 하겠습니다.

 

참고로 이 강좌는 능숙한 개발자들을 위한 강좌가 아닙니다.

지극히 웹에 대해 초보적이고 이제 입문하는 분들을 위한 강좌입니다.

 

먼저 HTML5가 무엇인지, 왜 HTML5를 사용하는지 알아보겠습니다.

 

*HTML5란 무엇인가?

HTML5란 웹 문서를 제작하는 데 쓰이는 기본 프로그래밍 언어 HTML(hypertext markup language)의 최신규격 입니다.

HTML5를 사용하면 별도 프로그램을 깔지 않아도 인터넷 브라우저상에서 화려한 그래픽 효과를 구현할 수 있고, 음악이나 동영상을 자유롭게 감상할 수 있습니다.

간단히 이야기 하자면 기존 HTML에선 불가능 했던 것들, 즉 ActiveX나 플래시플레이어 등이 설치되어 있어야 가능했던 것들이 

HTML5로 구현하면 ActiveX나 플래시플레이어 등의 설치 없이 가능하다는 겁니다.

또한 운영체제에 상관없이 다양한 기기.. 스마트폰이나 태블릿에서 일반 APP과 같은 기능을 구현할 수 있습니다.

세계적으로 대표적인 IT기업들.. 구글, 애플 등이 HTML5에 대한 깊은 관심을 표현했죠.

특히 구글에서는 최근 모든광고에서 플래시를 제외하고 HTML5로 대체한다고 발표를 했습니다.

그만큼 HTML5는 가볍지만 강력해서 떠오르는 차세대 웹기반 언어라고 말할 수 있겠습니다.

 

*HTML5의 특징 및 기능

HTML5의 주요 특징과 기능을 한번 살펴보도록 하겠습니다.

이러한 것들이 있구나~~ 라고 한번쯤 읽어보고 넘어가면 될 듯 합니다.

차후에 테스트를 통해 다시 접하게 될것입니다.

 

Web Form - 입력 형태를 보다 다양하게 제공

Video - 동영상 재생을 위한 API 제공

Audio   - 음성 재생을 위한 API 제공

Offline Web - 인터넷 연결이 되지 않은 상태에서도 정상적인 기능을 지원하는 애플리케이션 API 제공

Web Database - 표준 SQL을 사용해 질의할 수 있는 DB 기능 제공

Web Storage - 웹 애플리케이션에서 데이터를 저장할 수 있는 기능 제공

Canvas - 2차원 그래픽을 그리기 및 객체에 대한 각종 효과를 주는 기능 제공

SVG - XML 기반의 2차원 벡터 그래픽을 표현하기 위한 SVG 언어 지원

Geolocation - 디바이스의 지리적 위치 정보를 얻은 기능 제공

Web Worker - 웹 애플리케이션을 위한 스레드 기능 제공

Web Socket - 웹 애플리케이션과 서버간의 양방향 통신 기능 제공

CSS3 - 웹 애플리케이션의 다양한 스타일 및 효과를 나타내기 위한 CSS3 지원


*HTML5 지원 브라우저

다양한 브라우저 중에서 HTML5을 기능별로 지원을 하기도, 혹은 못하기도 합니다.

예를 들면 HTML5의 캔버스 기능은 익스플로러 9.0에서 가능합니다.

하지만 웹 데이터베이스 기능은 10.0 이상에서 가능합니다.

크롬브라우저에선 HTML5의 멀티미디어 기능을 3.2에서 지원합니다.

그런데 위치정보 기능은 최소 4.1 이상에서 가능하죠.

그렇다면 우리는 어떤 브라우저를 사용하고 어떤 버전을 사용해야 할까요?

복잡하게 생각하실 필요 없습니다.

본인 사용할 수 있는 브라우저에서 최신버전으로 업데이트를 하여 사용하면 되겠죠?

저는 크롬브라우저를 사용해 테스트를 하겠습니다.

 

참고로 http://html5test.com/ 사이트에 들어가면 본인의 PC에 설치된 브라우저에서 HTML5의 지원여부를 알 수 있습니다.

저도 들어가서 확인해봤습니다.

 

 

01.jpg

 

 

 

제 PC 브라우저에 대한 스코어가 나오네요.

저는 555포인트 에서 521포인트를 받았네요.

꽤 높은 포인트라 생각이 되네요~

하지만 중요한것은 포인트가 아니고 사용하려고 하는 브라우저에서 지원을 하는지 여부겠죠?

 

 

02.jpg

 

 

 

제 크롬브라우저는 최신버전 입니다.

크롬브라우저로 테스트를 해도 무방할 듯 하네요 :)

 

*시맨틱웹

시맨틱웹이란 HTML5에서 의미있는 구조를 나타내기 위해 추가된 태그입니다.

어떠한 것들이 추가됐는지 한번 살펴보겠습니다.

<header> 머리말을 나타내는 태그

<hgroup> 제목과 부제목을 묶는 태그

<nav> 메뉴 부분을 나타내는 태그

<article> 개별 콘텐츠를 나타내는 태그

<section> 제목별로 나눌 수 있는 태그

<aside> 좌우측의 사이드바를 나타내는 태그

<footer> 제작자의 정보나 저작권의 정보를 나타내는 태그

이 태그들 역시 외우려고 하지 마시고요.

테스트를 많이 하다보면 익숙해질 테니까요.

 

* HTML5의 기본구조

기존 HTML 4.0이나 XHTML에 비해 간단해졌습니다.

먼저 DOCTYPE 선언을 보겠습니다.

(1)HTML 4.01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

(2)XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

(3)HTML5

<!DOCTYPE html>

정말 간단해졌죠?

메타태그에서 캐릭터셋 선언 역시 심플해졌습니다.

(1)기존

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

(2)HTML5

<meta charset="UTF-8">

 

 

03.jpg

 

 

 

그리고 중요한것이 하나 있습니다.

바로 문서의 캐릭터셋에 대한 부분입니다.

실제로 실무를 접하면서 개발자들이나 퍼블리셔들이 종종 하는 실수입니다.

바로 문서의 실제 캐릭터셋과 문서에서 선언한 캐릭터셋에 대한 일치 여부입니다.

문서의 하드웨어는 ANSI(euc-kr) 인데 소프트웨어는 utf-8 이라면 충돌이 나겠죠?

그래서 캐릭터셋을 선언해줄 경우에는 항상 문서자체의 캐릭터셋도 확인을 해야 합니다.

저는 에디트플러스를 사용하므로 에디트플러스에서 확인하는 방법을 알려드리겠습니다.

 

 

04.jpg

 

 

 

위와같이 파일 -> 새이름으로 버튼을 누르면 다음과 같이 파일명을 저장하는 창이 나옵니다.

 

 

05.jpg

 

 

 

위와같이 인코딩 방식을 문서와 동일하게 셋팅을 하고 저장을 하면 됩니다.

다른 편집기들도 비슷한 방식입니다.

 

다음강좌에 이어서 HTML5에 대해 알아보고 예제를 통해 테스트를 해보겠습니다.

 

(예제는 첨부파일에서 받을 수 있습니다.)

 

01.zip

이 게시물을
목록
쓰기 태그