HTML5 변경사항
HTML5 기본 구조
HTML5에서는 DOCTYPE 선언이 매우 간단해졌다.
<!DOCTYPE html>
또한, 문자셋(character set)의 선언도 매우 간단해졌다.
HTML5에서의 기본 문자 인코딩(character encoding) 방식은 UTF-8이다.
<meta charset="UTF-8">이전의 기본 문자 인코딩
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">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에 삭제된 기존 요소
|
삭제된 기존 요소 |
설명 |
|
<acronym> |
<abbr> 태그로 대체 |
|
<applet> |
<object> 태그로 대체 |
|
<basefont> |
CSS로 적용 |
|
<big> |
CSS로 적용 |
|
<center> |
CSS로 적용 |
|
<dir> |
<ul> 태그로 대체 |
|
<font> |
CSS로 적용 |
|
<frame> |
삭제 |
|
<frameset> |
삭제 |
|
<noframes> |
삭제 |
|
<strike> |
CSS로 적용 |
|
<tt> |
CSS로 적용 |
https://www.w3.org/TR/html5/
웹 브라우저의 HTML5 지원
현재 최신 버전의 주요 웹 브라우저들은 모두 HTML5를 지원하고 있다.
HTML5의 새로운 요소들이 구형 버전의 웹 브라우저에서는 제대로 표현되지 못할 수도 있다.
따라서, 구형 버전의 웹 브라우저가 알지 못하는 새로운 HTML 요소를 정보를 알려줘야 한다.
다음 예제는 웹 브라우저가 알지 못하는 새로운 HTML 요소를 어떻게 다뤄야 하는지 알려주는 방법이다.
<script>document.createElement("mytag")</script>
<style>
mytag { background-color: #fff2cc; font-size: 20px; font-weight: 600}
</style>
<mytag>여기서만 사용할 수 있는 태그입니다.</mytag>위와 같은 방법을 사용하면 모든 새로운 요소를 웹 브라우저에 표현할 수 있다.
익스플로러 8 이전 버전에서는 위와 같이 HTML 요소를 새롭게 정의하는 것을 허용하지 않는다.
따라서, 위와 같은 방식이 아닌 HTML5Shiv을 사용해야 한다.
HTML5Shiv
HTML5Shiv은 익스플로러 8과 그 이전 버전에서도 HTML5의 새로운 요소들을 자유롭게 사용할 수 있도록 하기 위해 개발된 라이브러리이다. Sjoerd Visscher에 의해 개발되었다.
GitHub에 가면 자세한 설명과 다운로드가 가능하다.
https://github.com/afarkas/html5shiv
적용 방법은 아래와 같이 라이브러리 파일을 주석 코드과 함께 <head>태그 내에 삽입하면 된다. 그러면 익스플로러 8(IE6~9)과 그 이전 버전의 브라우저만이 이 자바 스크립트 파일을 읽고 적용할 수 있게 된다.
<head>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>참조 : https://www.w3schools.com/html/html5_browsers.asp
HTML5 Semantic 요소
시멘틱(semantic) 요소란 그 자체에 의미를 가지고 있는 요소를 말한다. 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미한다.
시멘틱 요소가 아닌 div, span 요소 등은 해당 요소가 무슨 내용인지는 내부 코드를 봐야 알 수 있다.
그에 비해, 시멘틱 요소인 form, table, img 요소는 코드를 보지 않아도 해당 요소가 이름만 봐도 바로 알 수가 있다.
HTML5에 추가된 시멘틱 요소
|
시멘틱 요소 |
설명 |
|
<header> |
HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 나타낼 때 사용한다. |
|
<nav> |
HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 나타낼 때 사용한다. |
|
<main> |
HTML 문서의 주요 콘텐츠(content)를 정의함. |
|
<section> |
HTML 문서에서 섹션(section) 부분으로 내용의 컨텐츠를 나타낼 때 사용한다. |
|
<article> |
HTML 문서에서 내용의 컨텐츠 중에 독립적인 하나의 글(article) 부분을 나타낼 때 사용한다. |
|
<aside> |
HTML 문서에서 페이지 부분 이외의 컨텐츠(content)를 나타낼 때 사용한다. |
|
<figure> |
HTML 문서에서 그래픽과 비디오 등의 독립적인 컨텐츠(content)를 나타낼 때 사용한다. |
|
<figcaption> |
figure 요소를 위한 캡션을 나타낼 때 사용한다. |
|
<footer> |
HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 나타낼 때 사용한다. |
|
<bdi> |
기본 출력방향과는 다른 방향으로 출력되는 텍스트를 나타낼 때 사용한다. |
|
<mark> |
하이라이팅된 텍스트를 정의함. |
|
<details> |
사용자가 보거나 숨길 수 있는 추가적인 설명문을 나타낼 때 사용한다. |
|
<summary> |
details 요소에 나타날 내용을 정의함. |
|
<dialog> |
다이얼로그(dialog) 박스나 다이얼로그 윈도우를 정의함. |
|
<menuitem> |
사용자가 팝업 메뉴(popup menu)를 통해 선택할 수 있는 메뉴의 아이템(menu item)을 나타낼 때 사용한다. |
|
<meter> |
정해진 범위 내의 스칼라 치수를 나타낼 때 사용한다. |
|
<progress> |
작업에 대한 진행 정도를 나타낼 때 사용한다. |
|
<ruby> |
루비(ruby) 문자를 나타낼 때 사용한다. 루비란? 임의의 문자(보통은 한자)에 대해 읽는 법을 알려주는 문자를 말한다. |
|
<rt> |
본문 위에 나타날 문자를 나타낼 때 사용한다. |
|
<rp> |
루비(ruby) 문자를 지원하지 않는 브라우저에서만 나타날 내용을 나타낼 때 사용한다. |
|
<time> |
날짜와 시간을 나타낼 때 사용한다. |
|
<wbr> |
br 요소와는 달리 긴 단어가 화면의 맨 끝에 오면 상황에 따라 줄 바꿈 할 곳을 미리 나타낼 때 사용한다. |
HTML5에 추가된 주요 시멘틱 요소
HTML5에서 새롭게 추가된 대표적인 의미 요소는 다음과 같다.
- header 요소
- nav 요소
- main 요소
- section 요소
- article 요소
- figure와 figcaption 요소
- footer 요소
header 요소
header 요소는 HTML 페이지나 섹션(section) 부분에 대한 헤더(header)를 정의한다.
헤더(header)란? 일반적으로 어떤 것에 앞에 나오는 것으로서, 각 페이지의 맨 위에 출력되는 텍스트나 이미지등의 조합이다. 한 페이지 내에 여러 개의 header 요소가 존재할 수 있다.
<header>
<h1>전체 문서에 대한 헤더(header)입니다.</h1>
</header>
...
<section>
<header>
<h2>섹션 부분에 대한 헤더(header)입니다.</h2>
<p>헤더 부분에 들어간 단락입니다.</p>
</header>
</section>
nav 요소
nav 요소는 HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의한다.
nav 요소는 링크의 커다란 집합을 의미하지만, 문서 내의 모든 링크가 nav 요소에 포함되는 것은 아니다.
<nav>
<a href="/html/html5_element_semantic">의미 요소</a> |
<a href="/htmlhtml5_element_form/">Forms 요소</a> |
<a href="/html/html5_element_inputtype">Input 요소</a>
</nav>
...
<p>이 링크는 nav 요소에 포함되지 않는 <a href="/html/html5_element_inputattr">Input 속성</a>에 관한 링크에요!</p>section 요소
section 요소는 HTML 문서에서 섹션(section) 부분을 정의한다.
섹션(section)이란 제목을 가지고 있으며, HTML 문서의 전체적인 내용과 관련이 있는 콘텐츠들의 집합을 의미한다.
<section>
<h2>섹션(section) 영역입니다.</h2>
<p>Lorem ipsum</p>
</section>article 요소
article 요소는 HTML 문서에서 독립적인 하나의 기사(article) 부분을 정의한다. article 요소의 내용은 그 자체만으로도 이해가 되어야 하며, 웹 사이트의 나머지 부분과는 별도로 읽을 수 있어야 한다.
<article>
<h2>기사(article) 영역입니다.</h2>
<p>Lorem ipsum</p>
</article>위의 두 예제를 살펴보면 section 요소와 article 요소 간의 별다른 차이점을 발견할 수 없을 것이다.
실제로도 두 요소 간의 쓰임에 있어 큰 차이를 보이지는 않는다.
대체로 section 요소는 HTML 문서의 전체적인 내용에 포함되며, article 요소는 문서의 전체적인 내용과는 별도의 독립적인 내용이 들어갈 때 사용하면 된다.
figure 요소와 figcaption 요소
책이나 신문 등에 포함되는 이미지 바로 아래에는 해당 이미지를 설명하는 캡션(caption)이 위치하게 된다.
HTML5에서는 위와 같은 목적을 위해 figure 요소와 figcaption 요소를 제공하고 있다.
figure 요소는 HTML 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠(content)를 정의할 때 사용한다.
figcaption 요소는 위와 같은 figure 요소를 위한 캡션을 정의할 때 사용한다.
<figure>
<img src="/examples/images/img_flower.png" alt="flowers" width="350" height="263">
<figcaption>[ 그림 1. 위의 그림은 이쁜 꽃이네요! ]</figcaption>
</figure>시멘틱 요소(Semantic Elements) 왜 사용하는가?
HTML4를 사용하여 개발자는 요소 스타일에 고유 한 ID / 클래스 이름을 사용했었다. header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, 기타 등등
의미 요소가 추가되기 전인 HTML4까지는 div 요소를 사용하여 레이아웃을 작성하는 경우가 많았다.
<div id="header"><h2>Header 영역</h2></div>
<div id="nav"><h2>Nav 영역</h2></div>
<div id="section"><p>Section 영역</p></div>
<div id="footer"><h2>Footer 영역</h2></div>이로 인해 검색 엔진이 올바른 웹 페이지 컨텐츠를 식별 할 수 없었다.
새로운 HTML5 요소 (<header>, <footer> <nav> <section>, <article>)를 사용하면 이 작업이 더욱 쉬워질 것이다.
W3C에 따르면 시맨틱 웹 (Semantic Web)은 응용 프로그램, 기업 및 커뮤니티에서 데이터를 공유하고 재사용 할 수 있다.
[세상살이] - 온라인에서 무료로 이미지, 동영상 용량 줄이기
온라인에서 무료로 이미지, 동영상 용량 줄이기
온라인에서 무료로 이미지, 동영상 용량 줄이기 사진이나 동영상 업로드 시 용량 제한에 걸릴때가 있다. 화질 변화는 없이 용량을 줄이고 싶을 때, 사진이나 동영상을 전문 프로그램을 사용하지
smarti.tistory.com
바둑에 담긴 지혜
바둑에 담긴 지혜 위기십결(圍棋十訣) 당나라 현종은 '기대조(棋待詔)'라는 벼슬을 두었는데, 이는 바둑의 최고수에게 헌정되는 자리였다. 당시 기대조였던 당나라의 바둑 고수 왕적신(王積薪)
smarti.tistory.com
플랩풋볼, 소셜 축구 풋살 용병 모임
플랩풋볼 '아침부터 심야, 평일부터 주말까지 내가 하고 싶을 때 집, 회사, 학교 등 나와 가까운 구장에서 내가 하고 싶은 곳에서 여성 매치, 혼성 매치, 중급 매치, 초급 매치 그리고 레슨까지 내
smarti.tistory.com
[세상살이] - 디데이계산기, The Day Before 앱 휴대폰에 설치하기
디데이계산기, The Day Before 앱 휴대폰에 설치하기
디데이비포(The day before) 앱 소개 휴대폰을 항상 가지고 다니지만 정작 중요한 날을 넘기거나 닥쳐야 생각이 날 때가 있다. 이성 친구와의 기념일, 가족의 생일, 시험일, 병원 예약한 날, 모임일
smarti.tistory.com
[디자인공부] - 캘리그라피 같은, 붓글씨 같은 행복고흥 서체 다운로드 및 설치
캘리그라피 같은, 붓글씨 같은 행복고흥 서체 다운로드 및 설치
행복고흥 서체 다운로드 받기 고흥군청 홈페이지 www.goheung.go.kr/ 에 들어가서 고흥안내 / 고흥소개 / 전용서체 페이지 중간쯤 '고흥군 서체 다운받기' 하여 압축을 푼다. 고흥군청 www.goheung.go.kr 행
smarti.tistory.com
'코딩공부' 카테고리의 다른 글
| HTML5 그래픽 2 (0) | 2020.10.06 |
|---|---|
| HTML5 그래픽 1 (0) | 2020.10.05 |
| HTML5 멀티미디어 (0) | 2020.10.05 |
| HTML5 기본정리 2 (0) | 2020.10.03 |
| HTML 확장 CSS, Javascript, html과 xhtml (0) | 2020.10.03 |
| HTML select, textarea, button, fieldset, label (0) | 2020.10.03 |
| HTML 입력폼(Forms), 타입(Type), 속성(Attributes) (0) | 2020.10.03 |
| HTML 텍스트 요소 (0) | 2020.09.30 |
댓글