HTML 5 기본 페이지 구성 코드

다음 코드는 html 5로 구성한 초간단 페이지 코드이다.

이 문서는 상당부분 http://www.sitepoint.com/a-basic-html5-template/ 의 설명에 기초하고 http://www.w3schools.com/의 여러 문서들을 참조하여  작성하였음을 미리 밝힌다. 

html 5는 이전 버전인 xhtml이나 HTML 4와는 기본적인 개념에서는 같지만 상당한 변화가 이루어졌다. 그 변화가 무엇인지 기본적으로 살펴보기로 하자.

 

doctype

html에서 doctype은 Tag는 아니며 웹 문서가 어떤 버전의 html을 사용하고 있는지를 브라우저에게 알려주기 위한 설정 정보이다. doctype은 문서의 맨 처음에 기록되어야 하며 반드시 <html> 태그보다 앞에 나와야 한다.

html 5와 xhtml, html 4는 Doctype에서 많이 달라졌다. 각 버전별로 doctype을 살펴보자.

html 5

html 5는 이전 버전의 html들이 3가지 다른 doctype을 갖는 데 반해 단 하나의 타입만을 가지며, 아래와 같은 아주 간단한 구조를 갖는다. 이 버전의 정의는 대문자 또는 소문자로 입력해도 같으며, doctype이 간단히 html 이기만 하면 된다.

 

xhtml 1.0

html 5가 발표되기 전까지 w3c의 표준으로 사용되어 온 xhtml 1.0은 아래와 같이 세 가지 다른 doctype을 갖는다. strict 버전은 엄격한 코드 규칙을 적용하는 버전으로 xhtml의 모든 html 구성요소와 속성을 지원하지만 명목상으로만 존재하거나 제거된 태그(예를 들어 font 태그)를 지원하지 않는다. transitional 버전은 strict 버전과 같이 xhtml의 모든 요소와 속성을 포함하며 또한 xhtml에서는 유명무실하거나 사라진 이전 버전의 요소들 또한 지원한다. frameset 버전은 transitional과 동일하나 frameset을 지원한다.

 

xhtml 1.1

xhtml 1.1은 기본적으로 xhtml 1.0 strict와 같다. 다만 이 버전을 모듈 기반의 xhtml이라 하는데 예를 들어 동아시아(일본, 중국) 언어를 주석 형태의 표현이 가능하도록 해주는 Ruby Annotation 를 지원해준다.

 

html 태그

html 태그는 문서가 웹 문서임을 브라우저에게 알리며 html 문서의 시작을 나타내는 태그이다. 모든 html 구성요소들은 이 태그의 열고 닫는 구조(<html>…</html>) 속에 포함되어야 한다(doctype 제외).

html 5

html 5에서 표현하는 아래의 html 태그에는 lang 속성(attrubute)가 포함되어 있는데 이는 콘텐츠(내용물)의 표현 언어를 나타낸다. 영어인 경우는 en, 한글인 경우에는 ko이다.

 xhtml 1.0

xhtml 1.x 버전에서 html 태그는 아래와 같이 xmlns 속성을 포함한다. html 5에서는 사용할 수 없다.

 

head 태그와 구성요소

head 태그는 head 구성요소들을 포함하는 태그이다.  head 구성요소들이란 <title>, <base>, <link>, <meta>, <script>, <style> 들을 말한다. 이 구성요소들은 문서 자체에 포함되는 콘텐츠(내용물)이라기보다는 그 문서의 속성을 정의하거나 문서의 내용을 꾸미거나 제어하는 기능을 하는 요소들이다.

 <title>창 제목</title>

<title> 태그는 브라우저의 창 또는 탭에 표시되는 제목을 넣는 태그이다. <title>제목으로 넣을 내용</title>의 형식으로 사용한다.

<meta> 태그

<meta> 태그는 메타데이터에 대한 정보를 설정한다. 메타데이터는 페이지에 보이지는 않지만 브라우저 또는 기타 장치들이 인식가능한 데이터를 담고 있다.

<meta> 태그로 설정하는 데이터들은 다음과 같은 것들이 있다.

author – 웹 페이지 저작자
description – 웹 페이지 설명
keywords – 웹 페이지 키워드들(쉼표로 구분, 검색을 위한 키워드)

또 아래와 같은 http-equiv 속성의 값이 refresh 이고 content의 값이 숫자로 되어 있으면 지정한 초(숫자) 의 시간마다 페이지를 새로고침 하게 된다.

<meta> 태그에서 가장 일반적으로 사용되고 빠뜨릴 수 없는 것이 character set 지정이다.

html 5 에서 character set 지정은 아래와 같다. 이 코드는 이전의 html 버전보다 짧아지고 간결해졌다.

xhtml에서 위 코드는 아래와 같이 사용한다. html 4.01 버전에서는 끝의 종료태그(end tag)인 / 가 없다.

charset은 웹 문서가 담고 있는 텍스트의 문자셋을 지정한다. charset에는 ISO-8859-1, UTF-8 등이 있다. html 5의 기본 문자셋은 UTF-8이다. UTF-8은 전세계의 거의 모든 문자열을 포함하는 유니코드를 말한다. 예를 들어 웹 페이지에서 중국어나 일본어, 또 사용하지 않는 한글 조합 등이 저장되고 출력되게 하려면 UTF-8을 사용해야 한다. Windows의 메모장을 비롯해서 웹 페이지 코드를 작성하거나 수정할 수 있는 텍스트 편집기에서 UTF-8 문서를 작성하려면 설정 등에서 문서의 encoding 설정을 UTF-8로 변경해야 한다. 문자셋에 대한 자세한 설명은 나중에 다른 글에서 하기로 하자.

<link> 태그

<link>태그는 웹 문서와 외부 문서와의 연결을 설정하는데 사용하는 태그이다. 대부분의 경우에 이 태그는 스타일시트(style sheet)를 연결할 목적으로 사용된다. 스타일시트는 CSS(Cascading Style Sheets)라고 하며 html 구성요소들의 디자인을 설정하는 속성들의 모음이라고 할 수 있다. 스타일시트를 연결하는 코드는 아래와 같다.

xhtml 또는 html 4.x 코딩에 익숙한 개발자 또는 분석자라면 위 코드에서 type=”text/css”가 빠졌다는 것을 알것이다. html 5에서는 type을 명시하지 않아도 된다. 오히려 너무 많은 따옴표를 사용하는 것을 경계하며, 이미 ref 속성의 값이 stylesheet이므로 대부분의 html 5 코드에서 type은 생략된다. xhtml 버전에서 위 코드는 아래와 같이 표현한다.

 

html 구성요소 디자인을 위해서 많은 경우에 style sheet를 별도의 파일에 저장해두고 불러오지만 경우에 따라 직접 입력해줄 수도 있다. 그 때는 아래와 같이 하면 된다.

 

 

IE 6,7,8을 위한 html 5 지원

위 코드를 보면 일반적인 HTML 태그 또는 구성요소 외에 IE를 위한 조건문과 스크립트 링크가 포함되어 있다.

html을 소개하는 글에서 굳이 이런 류의 코드를 소개하지 않아도 되지만 이 코드가 하는 역할을 이해하면 새로운 버전인 html 5가 이전의 버전들과 어떻게 다른지, 또 달라서 발생하는 문제를 어떻게 해결할 수 있는지 알 수 있게 되므로 간단히나마 여기서 소개해본다.

html 5에는 이전에 없던 새로운 태그들이 추가되었다. canvas와 같은 드로잉 요소와  audio, video와 같은 미디어 요소, 그리고 header, footer, nav, article, aside 등과 같은 구조용 태그 등이 새로 추가되었다. html 5에 추가된 새로운 태그들을 모든 브라우저가 100% 지원하는 것은 아니지만 대부분의 최신 웹브라우저들이 계속 모든 태그들과 속성 등을 지원하고 있다.

html 5에 추가된 태그들의 특징 중 하나는 semantic 인데, 이것은 태그들을 그 자체로 의미가 파악가능하도록 이름을 지어 브라우저 또는 장치들이 소스코드로부터 콘텐츠를 구조화하거나 데이터를 추출하기 쉽도록 한다는 것이다. header, footer, nav, article, aside 등과 같은 태그들이 semantic 태그인데 이 태그들은 사실 div 와 거의 같은 기능을 하는데 의미를 갖는 이름으로 새로 탄생한 것들이다.

<div id=”header”></div> 는 <header></header>로 할 수 있고, <div id=”footer”></div>는 <footer></footer>로 할 수 있다.

그런데 문제는 IE(Internet Explorer) 이전 버전들에서 발생한다. Firefox, Chrome, Safari, Opera 등과 같은 브라우저들은 대부분 일찍부터 html 5의 새로운 구성요소들을 지원해왔으나 IE는 9에 와서야 일부 지원하기 시작했다. 그래서 IE 6, 7, 8에서 html 5의 새로운 구조 관련 태그들을 기본적으로 인식하도록 하기 위한 방법이 모색되었고 실제로 여러가지 방법이 등장하였다. 그 중에 하나가 html5shiv 이다.

html5shiv의 원리는 의외로 간단하다. 예를 들어 header 라는 태그를 인식하지 못하는 IE 6, 7, 8에서 문서의 header 부분에서 다음과 같은 스크립트를 실행하면 header라는 새로운 요소(태그)를 생성해주는 것이다.

html5shiv는 위와 같은 역할을 하는 스크립트들로 구성되어 있다.

<!–[if lt IE 9]>…<![endif]–>

위에서 본 것 처럼 html5shiv <!–[if lt IE 9]>…<![endif]–>가 둘러싸고 있다. 이것은 IE의 html 안에서 작동하는 조건문으로 만일 IE 버전이 9보다 작으면 그 안의 내용을 포함 또는 실행하라는 것이다. if 구문에서 lt 는 < 이다. 즉 IE 9보다 작으면 다음의 내용이 적용된다는 것이다.

IE 9 보다 작은 경우에 html5shiv 스크립트를 불러오라고 코드를 넣었으면, 6, 7, 8에 대해서는 별도로 지정하지 않아도 된다.

만일 기능경기대회와 같은 대회에서 평가도구로 지정된 브라우저가 html 5를 지원하는 브라우저라면 굳이 위와 같은 코드를 사용할 필요는 없을 것이다. 그러나 우리나라처럼 IE 의존도가 높은 환경에서 이전 버전을 지원하는 것은 매우 중요한 일이므로 실전에서는 위와 같은 방법을 사용하는 것이 좋을 것이다. 

 

body

body는 웹 브라우저의 창에 보이는 내용이 들어가는 부분이다. 물론 모든 것이 다 보인다고 할 수는 없지만 웹 문서의 내용(텍스트, 이미지, 동영상, 리스트, 표, 애니메이션 등 등) 이 기본적으로 <body>…</body> 안에 포함되어야 한다.

 

<script src=”js/script.js”></script>

이 코드는 문서에 자바스크립트 파일일 연결하여 포함시키는 부분이다.

 

스크립트는 웹브라우저에서 구성요소들을 제어하기 위해 줄단위로 실행되는 프로그램 언어이다.

초창기에 스크립트 언어는 크게 javascript와 vbscript가 사용되었다. vbscript는 Microsoft 사에서 IE를 개발하여 출시하면서 포함된 것으로 IE에서만 작동되는 Visual Basic 스크립트형 언어이다. 그러나 최근에는 거의 모든 브라우저들이 스크립트를 대표하는 것으로 javascript로 인식하고 있다. 따라서 html 5에서는 <script></script> 태그 역시 이전 버전에서 반드시 넣었어야 하는 type=”text/javascript” 속성을 사용하지 않고 아래와 같이 사용할 수 있도록 하였다.

<script src=”js/script.js”></script>

이전 html 버전에서는 다음과 같이 해주었다.

<script src=”js/script.js” type=”text/javascript”></script>

<script> 태그는 반드시 닫는 태그인 </script>와 쌍으로 이루어져 있어야 하며 그 사이에 자바스크립트를 넣어 실행시켜야 한다. 그러나 위와 같이 직접 웹 문서 안에 스크립트를 기술한 경우가 아니라 별도의 js 파일로 저장되어 있는 자바스크립트 파일을 연결해 사용할 경우에는  여는 <script>와 닫는 </script> 사이에 어떤 코드도 들어가면 안된다. 예를 들어 다음 코드는 잘 못된 코드이며 에러를 유발한다.

<script src=”js/script.js”>
document.write(“test”);
</script>

자바스크립트를 직접 써주고 싶으면 아래와 같이 해야 한다.

<script>
document.write(“test”);
</script>

자바스크립트는 어디에 넣는 것이 좋을까?

자바스크립트는 <head>…</head> 안에 또는 <body>…<body>안에 넣을 수 있다. 어느 곳이 좋은지에 대해서는 개발자마다 다를 수 있다. 자바스크립트를 head 태그 안 또는 <body>의 바로 아래에 넣을 수도 있고, </body>의 바로 위에 넣을 수도 있다. 최근에 </body> 바로 위에, 즉 모든 보여주어야 할 요소들을 불러들이고 난 뒤에 본문(body)을 닫기 직전에 스크립트를 불러오거나 실행하는 방법이 화면을 보여주는 시간이 빠르다고 한다. 그러나 이것은 스크립트를 어떻게 구성했는지에 따라 다르다.

자바스크립트의 위치에 관련해서는 아래 링크를 참조해보자.

http://www.w3schools.com/js/js_whereto.asp

 

Share the joy
  •  
  •  
  •  
  •  

댓글 남기기