'HTML5'에 해당되는 글 3건

HTML5 웹페이지 구조 관련 태그를 사용해 보도록 하겠습니다.

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

  다음은 <section>태그 안에 <article>태그를 사용해 본문을 표시하겠습니다

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

3번째는 여러 가지 시맨틱 웹의 태그를 이용해 화면의 레이아웃을 구성하는 내용입니다.

4번째로는 레이아웃을 표시하려면 각 태그에 CSS를 적용해야 합니다.

출처 : 자바웹을 다루는 기술

깃허브: github.com/soulwine-it

  시맨틱 웹(Semantic Web)의 사전적 정의는 기계가 이해할 수 있고 처리할 수 있는 웹 콘텐츠를 만드는 것으로, 1998년 월드와이드웹(WWW)의 창시자인 팀 버너스 리(Tim Berners Lee)에 의해 개발되고 정의된 개념입니다.

  HTML4에서는 웹 페이지 구조에 해당하는 머리말, 메뉴, 본문, 하단부를 만들 때(div)태그에 CSS를 적용하는 방식으로 작업을 했습니다. 그러다 보니 <div> 태그만 봐서는 그 의미를 잘 알수 없다는 문제가 있었습니다.

  따라서 HTML5에서는 이 문제를 보와하기 위해 의미있는 구조를 나타낼 수 있는 태그들을 추가하여 가독성을 높였습니다. HTML5에 추가된 태그를 정리하면

쉽게 그려 본다면 시맨틱 웹의 자체 태그를 이용해 구성한 레이아웃입니다.

  웹 브라우저는 웹 사이트를 만드는 프로그래밍 언어인 HTML, CSS와 자바스크립로 이루어진 구문만 인식하여 화면에 나타냅니다. 그리고 JSP는 웹 사이트 화면을 구성하는 HTML을 좀 더 동적으로 구현하기 위해 도입된 기능입니다. HTML 기능도 꾸준히 업그레이드 되어 지금은 HTML5 버전이 사용되고 있습니다.

  HTML5는 기존 HTML4에서는 지원하지 않는 동영상이나 오디오 기능 그리고 지리 위치 정보등을 지원합니다. 플러그인을 따로 설치하지 않아도 화려한 그래픽 효과를 구현할 수 있으며, 운영체제에 상관없이 스마트폰, 태블릿 같은 모바일 환경에서도 기능을 구현할 수 있습니다.

HTML5 여러가지 기능

 HTML5의 문서 구조