[웹 프로그래밍] HTML5

한국어

<h1 id="html5">HTML5</h1> <blockquote> <p>HTML(Hyper Text Markup Language)의 완전한 5번째 버전<br /> WWW(World Wide Web)의 핵심 <code class="language-plaintext highlighter-rouge">표준 마크업 언어</code></p> </blockquote> <p><img src="/assets/images/html5/html5.jpg" alt="" /></p> <p class="notice--success">? <code class="language-plaintext highlighter-rouge">마크업 언어</code><br /> 문서 안의 정보를 구조화시키는 언어</p> <h2 id="탄생배경">탄생배경</h2> <p>기존의 HTML은 HTML4.0 이후에도 W3C에 의해서 HTL 4.01, XHTML 1.0, 1.1, 2.0 등으로 발전해왔지만,<br /> 그 동안의 HTML에서의 한계를 극복하기 위해 탄생</p> <h2 id="특징">특징</h2> <p>기존 HTML과의 호환성 유지, 간단한 업데이트</p> <p>어도비 플래시나 실버라이트 등의 <code class="language-plaintext highlighter-rouge">플러그인</code>을 기반으로 하는 응용프로그램에 대한 필요성을 줄이는 것에 초점</p> <p>비디오, 오디오 등 다양한 부가기능과 최신 멀티미디어 콘텐츠를 액티브 X 없이 브라우저에서 쉽게</p> <p>웹 표준, 웹 접근성 한층 증대</p> <p>JAVA Script 사용하지 않고도 문법이 <code class="language-plaintext highlighter-rouge">간결</code>하고 명확하게 변화 ⏩ 문서의 크기 감소 ⏩ <code class="language-plaintext highlighter-rouge">생산성 향상</code></p> <p>HTML5 기반 암호화 표준화 진행</p> <blockquote> <p>모질라 한국 커뮤니티는 웹 표준 기반 HTML5 암호화 및 대한민국의 공인인증서등에 사용가능한 W3C 웹 크립토그래피 API를 제안</p> </blockquote> <h2 id="주요기능">주요기능</h2> <ul> <li><code class="language-plaintext highlighter-rouge">Device Access</code><br /> 카메라, 동작센서 등의 H/W 기능을 웹에서 직접적으로 제어</li> <li><code class="language-plaintext highlighter-rouge">Connectivity</code><br /> 웹(클라이언트)에서 서버 측과 직접적인 양방향 통신 가능</li> <li><code class="language-plaintext highlighter-rouge">3D Graphics & Effects</code><br /> 다양한 2/3차원 그래픽 기능을 지원</li> <li><code class="language-plaintext highlighter-rouge">Styling Effects(CSS3)</code><br /> 글씨체, 색상, 배경 등 다양한 스타일 및 이펙트 기능 제공</li> <li><code class="language-plaintext highlighter-rouge">Multimedia</code><br /> 비디오 및 오디오 기능을 자체적으로 지원</li> <li><code class="language-plaintext highlighter-rouge">Offline & Storage</code><br /> 네트워크 미지원 환경에서도 웹 이용을 가능하게 함</li> <li><code class="language-plaintext highlighter-rouge">Geo-Location</code><br /> GPS없이도 단말기의 지리적인 위치 정보를 제공</li> <li><code class="language-plaintext highlighter-rouge">Semantics</code><br /> 웹 자료에 의미를 부여하여 사용자 의도에 맞는 맞춤형 검색 제공</li> </ul> <h2 id="기타기능">기타기능</h2> <ul> <li>캔버스 : 2차원 그래픽(애니메이션, 게임)을 그리기 위한 캔버스 API 제공</li> <li>오프라인 웹 : 인터넷 연결이 되지 않은 상태에서도 정상적인 기능을 지원하는 애플리케이션 캐시 API 제공</li> <li>웹 데이터베이스 : 표준SQL을 사용할 수 있는 데이터베이스 API 제공</li> <li>로컬 저장소 : 클라이언트에 데이터를 저장하기 위한 API 제공<br /> (웹 브라우저가 실행되는 컴퓨터에 데이터를 저장하는 API, 쿠키와 유사한 역할을 가지나 더 큰 용량으로 저장공간을 이용할 수 있다.)</li> <li>웹 워커 : 웹 응용을 스레드 기능에 대한 API 제공<br /> (시간이 많이 소요되는 작업들을 백그라운드로 개발해 웹 브라우저의 UI가 느려지지 않도록 하는 기능)</li> <li>드래그앱드롭 : 모든 요소를 드래그 앤 드랍으로 이동할 수 있음</li> <li>SSE(Server-Send Events) : 웹페이지가 자동으로 서버에서 업데이트 정보를 가져오는 기능(페이스북, 트위터…)</li> </ul> <h2 id="다양한-element-attribute의-변화">다양한 Element, Attribute의 변화</h2> <p><img src="/assets/images/html5/difference-html-and-html5.jpg" alt="" /></p> <blockquote> <p>시멘틱 태그 추가<br /> 웹 리소스와 정보를 모두 컴퓨터가 처리할 수 있도록 구조화시킨 기술</p> </blockquote> <table> <tbody> <tr> <td>태그</td> <td>설명</td> </tr> <tr> <td>Header</td> <td>문서의 Header를 나타낼 때</td> </tr> <tr> <td>Footer</td> <td>문서의 Footer를 나타낼 때</td> </tr> <tr> <td>Nav</td> <td>문서 내 네비게이션(Navigation) 요소가 있을 때</td> </tr> <tr> <td>Section</td> <td>문서의 영역을 구성, 문서 구조를 구성하는 H1~H6와 함께 사용</td> </tr> <tr> <td>Article</td> <td>뉴스기사나 블로그 Article과 같은 독립된 Contents를 표시할 때 사용</td> </tr> <tr> <td>Aside</td> <td>주요 컨텐츠 이외의 참고가 될 수 있는 컨텐츠를 구성할 때 사용</td> </tr> <tr> <td>Figure</td> <td>그림, 비디오와 같은 포함된 컨텐츠의 Caption 을 표시할 때 사용</td> </tr> <tr> <td>Figcaption</td> <td>캡션에 사용</td> </tr> <tr> <td>Details</td> <td>사용자가 필요에 따라 보거나 숨길 수 있는 세부정보를 지정</td> </tr> <tr> <td>Summary</td> <td>details 요소 안에 보이는 머리글을 정의. <br />summary를 클릭하여 세부정보를 보거나 숨길 수 있음</td> </tr> <tr> <td>Main</td> <td>문서의 중요내용을 지정. 고유한 내용. 둘 이상의 main 태그가 존재할 수 없음</td> </tr> <tr> <td>Mark</td> <td>텍스트 부분을 강조</td> </tr> <tr> <td>Meter</td> <td>알려진 범위 또는 또는 분수값내에서 스칼라 측정을 정의</td> </tr> <tr> <td>Progress</td> <td>진행바를 표시</td> </tr> <tr> <td>Time</td> <td>일자/시간을 정의하는 태그</td> </tr> <tr> <td>Wbr</td> <td>텍스트에서 줄 바꿈을 추가할 수 있는 위치 지정 <br />(같은 기능의 br 와 달리 공간이 충분할 경우에는 줄바꿈을 수행하지 않음)</td> </tr> </tbody> </table>

HTML5

HTML(Hyper Text Markup Language)의 완전한 5번째 버전
WWW(World Wide Web)의 핵심 표준 마크업 언어

? 마크업 언어
문서 안의 정보를 구조화시키는 언어

탄생배경

기존의 HTML은 HTML4.0 이후에도 W3C에 의해서 HTL 4.01, XHTML 1.0, 1.1, 2.0 등으로 발전해왔지만,
그 동안의 HTML에서의 한계를 극복하기 위해 탄생

특징

기존 HTML과의 호환성 유지, 간단한 업데이트

어도비 플래시나 실버라이트 등의 플러그인을 기반으로 하는 응용프로그램에 대한 필요성을 줄이는 것에 초점

비디오, 오디오 등 다양한 부가기능과 최신 멀티미디어 콘텐츠를 액티브 X 없이 브라우저에서 쉽게

웹 표준, 웹 접근성 한층 증대

JAVA Script 사용하지 않고도 문법이 간결하고 명확하게 변화 ⏩ 문서의 크기 감소 ⏩ 생산성 향상

HTML5 기반 암호화 표준화 진행

모질라 한국 커뮤니티는 웹 표준 기반 HTML5 암호화 및 대한민국의 공인인증서등에 사용가능한 W3C 웹 크립토그래피 API를 제안

주요기능

• Device Access
  카메라, 동작센서 등의 H/W 기능을 웹에서 직접적으로 제어
• Connectivity
  웹(클라이언트)에서 서버 측과 직접적인 양방향 통신 가능
• 3D Graphics & Effects
  다양한 2/3차원 그래픽 기능을 지원
• Styling Effects(CSS3)
  글씨체, 색상, 배경 등 다양한 스타일 및 이펙트 기능 제공
• Multimedia
  비디오 및 오디오 기능을 자체적으로 지원
• Offline & Storage
  네트워크 미지원 환경에서도 웹 이용을 가능하게 함
• Geo-Location
  GPS없이도 단말기의 지리적인 위치 정보를 제공
• Semantics
  웹 자료에 의미를 부여하여 사용자 의도에 맞는 맞춤형 검색 제공

기타기능

• 캔버스 : 2차원 그래픽(애니메이션, 게임)을 그리기 위한 캔버스 API 제공
• 오프라인 웹 : 인터넷 연결이 되지 않은 상태에서도 정상적인 기능을 지원하는 애플리케이션 캐시 API 제공
• 웹 데이터베이스 : 표준SQL을 사용할 수 있는 데이터베이스 API 제공
• 로컬 저장소 : 클라이언트에 데이터를 저장하기 위한 API 제공
  (웹 브라우저가 실행되는 컴퓨터에 데이터를 저장하는 API, 쿠키와 유사한 역할을 가지나 더 큰 용량으로 저장공간을 이용할 수 있다.)
• 웹 워커 : 웹 응용을 스레드 기능에 대한 API 제공
  (시간이 많이 소요되는 작업들을 백그라운드로 개발해 웹 브라우저의 UI가 느려지지 않도록 하는 기능)
• 드래그앱드롭 : 모든 요소를 드래그 앤 드랍으로 이동할 수 있음
• SSE(Server-Send Events) : 웹페이지가 자동으로 서버에서 업데이트 정보를 가져오는 기능(페이스북, 트위터…)

다양한 Element, Attribute의 변화

시멘틱 태그 추가
웹 리소스와 정보를 모두 컴퓨터가 처리할 수 있도록 구조화시킨 기술

태그	설명
Header	문서의 Header를 나타낼 때
Footer	문서의 Footer를 나타낼 때
Nav	문서 내 네비게이션(Navigation) 요소가 있을 때
Section	문서의 영역을 구성, 문서 구조를 구성하는 H1~H6와 함께 사용
Article	뉴스기사나 블로그 Article과 같은 독립된 Contents를 표시할 때 사용
Aside	주요 컨텐츠 이외의 참고가 될 수 있는 컨텐츠를 구성할 때 사용
Figure	그림, 비디오와 같은 포함된 컨텐츠의 Caption 을 표시할 때 사용
Figcaption	캡션에 사용
Details	사용자가 필요에 따라 보거나 숨길 수 있는 세부정보를 지정
Summary	details 요소 안에 보이는 머리글을 정의. summary를 클릭하여 세부정보를 보거나 숨길 수 있음
Main	문서의 중요내용을 지정. 고유한 내용. 둘 이상의 main 태그가 존재할 수 없음
Mark	텍스트 부분을 강조
Meter	알려진 범위 또는 또는 분수값내에서 스칼라 측정을 정의
Progress	진행바를 표시
Time	일자/시간을 정의하는 태그
Wbr	텍스트에서 줄 바꿈을 추가할 수 있는 위치 지정 (같은 기능의 br 와 달리 공간이 충분할 경우에는 줄바꿈을 수행하지 않음)