2장 본문

 

2.1 HTML5 문서의 기본구조

HTML5 문서는 순수한 텍스트로 이루어진 태그(tag)라는 요소(element)들로 구성되는데 기본적인 구조는 <그림 2.1.1>과 같다.

<그림 2.1.1> HTML5 문서의 기본 구조, <body> 태그 안의 본문이 브라우저에 보임

HTML5 문서는 <!doctype html> 지시어로 시작되는데 이 문서가 HTML5 문서임을 브라우저에 알려주는 것으로서 반드시 첫줄에 나와야 한다. 이것은 HTML 태그는 아니며 소문자나 대문자 어떠한 것을 사용해도 된다.
그 다음은 대개 HTML5 문서의 내용을 설명하는 주석문을 적는다. 주석문은 <!– 로 시작하고 –> 로 끝나는데 반드시 필요하지는 않다. 문서 내의 어느 곳에 위치해도 좋다.
HTML5 문서는 <html> 태그로 시작되어 </html>이라는 태그로 끝이 난다. 이 사이에 웹페이지 제목 등을 적을 수 있는 <head> </head>, 문서의 내용을 적는 <body> </body> 등이 위치한다.
<head> </head> 태그는 문서의 머리말에 해당되는 부분을 작성하는데 대개 웹페이지의 제목을 지정하는 <title> </title> 태그를 포함한다. 본문을 설명하는 메타 태그, JavaScript 코드, CSS 스타일을 포함할 수 있다.
<body> </body> 태그는 문서의 본문 내용을 작성한다. 이 <body> </body> 태그는 제목을 지정하는 <h1> </h1> 이나 문단의 지정을 의미하는 <p> </p> 와 같은 여러 개의 태그를 포함한다. 여기에도 JavaScript 코드를 포함할 수 있다.
<head>와 <body> 사이에는 아무것도 넣어서는 안 된다.
HTML5 문서는 간단히 모든 PC에 설치되어 있는 메모장(Notepad)을 이용하여 작성할 수 있다. ᄒᆞᆫ글, MS Word 등의 워드 프로세서에서 작성하여 텍스트 파일 형태로 작성할 수 있다. 이때 파일명의 확장자는 htm 또는 html을 사용한다.
htm 확장자 파일을 클릭하면, 즉 프로그램을 실행하면 기본으로 설정되어있는 웹브라우저에 파일 내용이 나타난다.
전문적인 HTML 편집기로는 MS사의 WebMatrix, 에디트 플러스(EidtPlus), 아크로 에디터(AcroEditor), 크림슨 에디터(Crimson Editor), 아톰(Atom) 등이 있는데 이러한 HTML 편집기는 HTML 명령문의 문법이 맞는지 체크해주고, 태그/문자열/주석/숫자 등을 서로 다른 색깔로 표현하여 읽기 좋게 만들어 주어 편리하다.

 

2.2 HTML5 기본 태그

HTML5 문서는 <그림 2.1>에서 설명한 <html> </html>, <head> </head>, <body> </body> 등의 태그와 기타 태그들 그리고 본문으로 이루어져 있다. 한 태그는 시작을 나타내는 <tagname>과 그 태그의 끝을 의미하는 </tagname>의 한 쌍으로 이루어져 있고 그 사이에 수행될 다른 태그나 명령문이 위치할 수 있다.
<tagname> 수행될 다른 태그나 명령문 </tagname>
태그이름은 대소문자를 구분하지 않는데 대개 소문자를 많이 이용한다. 태그에 사용된 공백은 인정되지 않는다. 시작 태그와 끝 태그 사이에 위치한 명령문에서 하나의 공백은 인식되지만 두 개 이상의 공백은 특수문자(&nbsp)를 사용하여야 한다.

 

대개의 태그는 시작 태그와 끝 태그의 쌍으로 이루어져 있지만 <br>, <hr> 등은 끝 태그가 없다. 끝 태그가 있는 경우 이를 생략하면 오류가 되어 정상적으로 브라우저 화면에 출력되지 않는다.

 

주석문 태그는 시작과 끝이 <!– … –> 와 같은 예외적인 태그로서 주의하여야 한다.

 

2.2.1 HTML5 기본 태그

HTML5 문서는 <그림 2.1>에서 설명한 <html> </html>, <head> </head>, <body> </body> 의 태그와 대략 100여개의 기타 중요 태그를 사용하여 만드는데 편집에 사용되는 기본 태그는 [표 2.2.1]과 같다.

2.2.2 태그의 속성 지정

HTML5 문서를 구성하는 각각의 태그는 다음과 같이 시작 태그 안에 속성(attribute)을 가질 수 있다.

 

이 태그는 문서에 jjlee.jpg라는 사진 파일을 가로 80픽셀 세로 60픽셀로 포함하라는 명령어이다.
태그의 속성도 대소문자를 구별하지 않는다. 그러나 속성값에 불필요한 공백이 들어가면 오류가 된다.
HTML5에서 태그의 속성값은 대개 이중인용부호 ”안에 지정하는데 단일인용부호 ’를 사용하거나, 인용부호를 전혀 사용하지 않아도 된다. 다만 속성값에 공백이 있는 경우는 인용부호를 사용하여야 한다.
<h1 style=”color:blue;”>
<p style=”font-family:verdana;“>
<img src=”JJLEE.jpg”>
<a href=”http://www.w3schools.com”>

[표 2.2.2]는 HTML5의 여러 가지 태그에 많이 사용되는 속성을 정리한 것이다.

[표 2.2.2]에서 alt 속성은 <img> 태그에서 이미지가 안보일 경우 대신 지정해주는 속성이다. 이미지의 너비를 width, 높이를 height 속성으로 다음과 같이 지정할 수 있다.


title 속성은 요소에 툴팁(tool tip: 마우스를 대면 설명이 나타남)을 지정해 준다.


disabled 속성은 3장에서 배우는 <input> 태그가 필요시 작동하지 않게 하여준다. 다음은 두 개의 텍스트 입력창에서 이름을 입력하기 전까지는 주소 입력창을 입력할 수 없도록 지정한 것이다.


href 속성은 HTML 문서에서 다른 홈페이지 링크에 사용되는 태그 <a>에서 링크의 URL (web address)을 지정한다. 태그 <a>에 대해서는 2.4.3절에서 자세히 설명한다.


id 속성을 이용하여 HTML 모든 요소에 고유 이름을 지정해 준다. 이 고유 이름을 이용하여 JavaScript에서 각 요소에 적당한 동작을 지정해 줄 수 있다. 다음 예제는 <h1> 태그에 id를 준 후 버튼을 누르면 <h1> 태그의 내용이 바뀌는 JavaScript 프로그램이다.

 

2.3 HTML5 텍스트 편집 및 멀티미디어 삽입 태그

HTML5 문서의 편집에 많이 사용되는 텍스트 폰트/색 편집 및, 사진, 오디오 및 비디오 등의 멀티미디어 삽입 관련 태그에 대해서 살펴보자.

2.3.1 텍스트 폰트 형식 편집

HTML5 문서의 텍스트 폰트 형식 지정에 사용되는 주요 태그는 [표 2.3.1]과 같다.

 

2.3.2 폰트색과 문서의 배경색

[예제 2.3.1]에서 <h1> 태그에 style=”color:blue;” 속성을 주어 ‘HTML이란?’의 색을 파랑색으로 바꾸었다. HTML 문서 전체의 배경색과 폰트색을 지정하려면 <body> 태그에 bgcolor와 text 속성을 지정한다.
<body bgcolor=색상 text=폰트색>
폰트색이나 문서의 배경색에 대한 속성으로 많이 사용되는 색상명은 [표 2.3.2]와 같다.


<그림 2.3.2>는 EX020301.htm에서 <body> 태그를 <body bgcolor=silver text=green>로 하여 크롬으로 실행한 화면이다.

<그림 2.3.2> EX020301.htm에서 배경색을 회색, 폰트색을 초록으로 바꾼 화면

만일 HTML5 문서의 일부분만 배경색/폰트색을 바꾸고 싶다면 다음 예와 같이 <div> 태그를 이용하여 블록을 지정한 후(2.4절 참조) <div> 시작 태그에 style 속성을 이용하여 색을 지정하면 된다.
<div style=”background-color; color:red”>

</div>

 

2.3.3 심볼 및 특수 문자

HTML5 문서는 수학에서 많이 사용되는 여러 가지 심볼과 그리스 문자, ⓒ와 같은 특수문자(copyright 에 사용)도 여러 개의 문자의 조합으로 표현이 가능하다. [표 2.3.3]은 많이 이용되는 수학 심볼, 그리스 문자, 특수문자에 대한 표이다.


다음 예는 그리스 문자와 아래첨자태그 <sub>를 이용하여 수학식을 적은 예이다.


HTML5 문서에서 문장을 만들 때 공백을 여러 개 입력해도 하나의 공백만 보이는데 &nbsp: 를 사용하면 여러 개의 공백도 삽입할 수 있다.

 

2.3.4 이미지, 오디오, 비디오 삽입

HTML5 문서에는 쉽게 사진(<img> 태그), 오디오(<audio> 태그) 및 비디오(<video> 태그) 파일을 삽입할 수 있다.
가. 이미지 <img> 태그
HTML5 문서에는 BMP, JPG, GIF 등의 형식으로 만들어진 사진 파일을 삽입할 수 있는데 이와 같은 사진 파일을 이미지(image)라 부른다.
HTML5 문서에 이미지를 넣으려면 [표 2.3.4]와 같은 이미지(<img>) 태그를 사용한다. 이러한 이미지가 포함된 문서는 네트워크를 통해 전송될 때 속도가 느릴 수 있으므로 적절한 수의 이미지만 사용하는 것이 좋다.


나. 오디오 <audio> 태그
HTML5 이전까지는 오디오나 비디오를 웹페이지에서 재생하기 위해 브라우저에 플러그인(plug-in) 소프트웨어를 설치하였는데 대표적인 것인 ActiveX이다. 이 플러그인 소프트웨어는 비표준 형식의 오디오나 비디오 데이터를 처리하여 주었다.
HTML5에서는 이러한 플러그인 소프트웨어 없이 <audio>와 <video> 태그를 이용하여 대부분의 오디오 비디오 파일을 재생할 수 있다. 하지만 아직 HTML5가 지원하지 않는 파일 형식은 플러그인의 설치가 필요하다.
[표 2.3.5]는 <audio> 태그와 그 속성에 대한 설명이다.


다음은 <audio> 태그의 예이다. 이 태그를 실행하면 오디오 플레이어가 우측과 같이 나타나며 음량을 조절할 수 있고 파일을 다운로드할 수도 있다


다. 비디오 <video> 태그
[표 2.3.6]은 <video> 태그와 그 속성에 대한 설명이다. 현재 HTML5에서 재생 가능한 비디오 타입은 mp4, WebM, Ogg 등이 있다. mp4는 ISO/IEC에서 표준화한 MPEG-4의 멀티미디어 컨테이너 형식이다. WebM은 VP8 영상 코덱으로 인코딩된 비디오와 Xiph.org에서 개발하여 무료로 사용할 수 있는 Vorbis 오디오 코덱으로 인코딩한 오디오 데이터를 저장하는 형식이다. WebM은 구글에서 후원을 받아 개발된 로얄티 없는 고화질 압축 영상 형식이다. Ogg는 Xiph.org에서 개발한 멀티미디어 컨테이너 형식이다.


다음은 w3Schools에 있는 <video> 태그의 예이다. 여기서 <source> 태그로 두 개의 비디오 파일 형식을 적은 이유는 브라우저가 특정 비디오 파일만 인식할 수 있기 때문에 개발자가 하나의 비디오 타입을 여러 파일 형식으로 만들어 놓고 브라우저가 재생 가능한 파일을 선택하도록 한 것이다. 이 <video> 태그를 실행하면 비디오 플레이어가 우측과 같이 나타나며 음량을 조절할 수 있고 파일을 다운로드할 수도 있다.

 

2.4 HTML5 고급 태그

HTML5 문서를 더욱 다양하게 꾸밀 수 있는 리스트(list) 태그 <ol>, <ul>, <dl>과 테이블 태그 <table>, 하이퍼링크 태그 <a>, 메타데이터 태그 <meta> 에 대해서 설명한다.

2.4.1 리스트 <ol>, <ul>,<dl>

리스트(list)란 일반 책의 차례와 같이 여러 문장들을 보기 좋게 나열하여 보여주는 것을 의미한다. HTML5 문서에서 문장의 리스트는 다음과 같이 세 가지 형태가 있는데 지정에 사용되는 주요 태그는 [표 2.4.1]과 같다.
· 번호 없는 리스트(unordered list) <ul> … </ul>
· 번호 있는 리스트(ordered list) <ol> … </ol>
· 용어 설명 리스트(description list) <dl> … </dl>

 

용어 설명을 위한 리스트의 예는 다음과 같다.


다음 예와 같이 리스트 안에 다른 리스트를 중첩시킬 수도 있다.

 

2.4.2 테이블 <table>

HTML5 문서에서 행과 열로 이루어진 테이블(table)을 만들 수 있다. 테이블의 구성은 테이블 제목(caption), 머리행(heading), 행과 열의 셀(cell)로 이루어진 테이블 몸체(body), 그리고 바닥행(foot)로 이루어져 있다.
테이블 각각의 구성을 위해 사용되는 태그는 <그림 2.4.2>와 같이 <table>, <caption>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td> 등이다.

<그림 2.4.2> HTML5의 테이블 구성

[표 2.4.2]는 <table> 태그의 일반적인 형태와 속성에 대한 설명이고 [표 2.4.3]은 <table> 태그와 같이 사용하여 다양한 형태의 테이블을 만드는데 도와주는 <tr>, <td>, <th>, <caption> 태그 속성에 대한 설명이다.

각 셀에는 텍스트뿐만 아니라 사진을 다음과 같이 넣을 수도 있다.

<td> <img src=“jjlee.jpg”> </td>
<td>와 <th> 태그에서 rowspan과 colspan 속성을 이용하면 행과 열의 숫자가 다른 비정형 테이블을 만들 수도 있다. <그림 2.4.4>는 [예제 2.4.2]에서 rowspan을 이용하여 이름을 옆으로 표시한 예이다. 이 경우 전체 테이블을 4행 5열로 설계한 후 ‘이름’ 셀을 행 확장(row span)한 것이다. 유사한 방법으로 colspan을 사용할 수 있다.

 


<그림 2.4.4> [예제 2.4.2]에서 rowspan 사용 예

 

2.4.3 하이퍼링크와 내비게이션 <a>

웹문서는 여러 개의 HTML 페이지를 상호 연결하는 방식으로 구성한다. 한 HTML 페이지에서 다른 HTML 페이지의 연결을 하이퍼링크(hyperlink), 간단히 링크(link)라고 부른다.
하이퍼링크는 텍스트나 이미지에 다른 웹페이지 주소를 적어서 만든다. 하이퍼링크는 같은 웹사이트의 여러 개의 HTML 페이지를 연결하는 것은 물론이고 다른 웹사이트의 페이지를 연결하기도 한다.
이와 같이 하이퍼링크된 웹 문서들을 따라 이동하는 것을 항해 또는 내비게이션(navigation)이라 부른다. 하이퍼링크는 [표 2.4.4]의 태그 <a>와 href 속성을 이용하여 만든다.

 

다음은 href 속성의 여러 가지 예이다.


어느 웹사이트나 가장 기본이 되는 웹페이지가 존재한다. 예를 들면 www.ssu.ac.kr/index.htm 과 같은 것인데 다른 웹사이트를 지정하는 것은 그 웹사이트의 기본 HTML 페이지를 지정하는 것과 같다.
하이퍼링크된 웹주소는 3가지 색으로 변경된다. 처음 만들어져 있을 때는 밑줄과 함께 파란색으로 표시되며(standard link), 이 하이퍼링크를 이용하여 다른 웹주소로 이동하면 자주색으로 변한다(visited link). 마우스로 하이퍼링크를 누르고 있으면 빨강색으로 출력된다(active link)l. 이러한 하이퍼링크의 색은 CSS3를 이용하여 바꿀 수 있다.
target 속성은 하이퍼링크에 연결된 웹페이지가 출력될 윈도우를 지정한다. target 속성은 3.3절에서 다시 설명한다.
download 속성은 사진, pdf, mp3, html 파일, hwp 파일, ppt 파일 등 모든 파일을 다운로드할 수 있는 링크를 만든다. 이때 다운로드 할 파일명은 href 속성에 지정한다 다음 예는 jjlee.jpg 파일을 다운로드하는 링크이다. HTML5는 웹페이지에서 파일을 쉽게 다운로드 할 수 있도록 이 기능을 도입하였다. IE나 사파리에서도 작동하지만 약간 다르게 처리된다.


한 HTML 문서가 너무 길면 사용자가 브라우저 화면을 위 아래로 이동하면서 살펴야 되어서 불편할 수 있다. 태그 <a>의 href를 이용하면 문서 내 특정위치로 이동하는 하이퍼링크를 만들 수 있는데 이 특정위치를 앵커(anchor)라 부른다. 이동할 위치에 있는 태그의 id 속성을 정의한 후 현재 페이지의 특정 위치로 이동할 수 있다.
<a href = “#1절”>1절 HTML </a>

<a name=”1절“> 1절 HTML이란 </a>

2.4.4 메타데이터 <meta>

메타데이터란 HTML5 문서를 설명해주는 데이터를 의미하는 것으로 <base>, <link>, <script>, <style>, <title>, <meta> 등 여러 가지 태그가 이에 해당한다.
<base> 태그는 웹문서들이 담겨 있는 기본 URL과 출력될 윈도우를 지정하기 위해 사용된다. 예를 들어 내가 만든 HTML5 문서 myfirst.htm 이 http://www.jjlee.org/page1/ 에 저장되어 있다면 <base> 태그를 이용하여 다음과 같이 지정한다.
<head>
<base href=“http://www.jjlee.org/page1”>
</head>
이후 <a> 태그에서 myfirst.htm 대한 경로는 다음과 같이 지정하면 된다.
<a href=“myfirst.htm”>
<base> 태그에서 target 속성을 이용하여 웹문서가 출력될 윈도우를 지정할 수도 있다.
<style>은 HTML5 문서에 CSS 스타일을 담는 태그로서 문단의 모양을 내는데 사용된다. 4장에서 자세히 설명한다.
<h1 style=”color:blue;”>HTML이란?</h1>
<title>은 HTML5 문서의 제목을 적거나 특정 요소에 대한 설명을 하는 툴팁 정보를 담든데 사용된다.
<head>
<title> 웹페이지 제목 (Page title) </title>
</head>
<meta> 태그는 웹페이지의 저작자, 문자 인코딩 방식, 문서 내용 등을 다음과 같이 지정할 수 있다. 이렇게 문서의 정보를 입력하면 구글이나 네이버 같은 검색엔진이 이 웹페이지에 대한 정보를 가져가 쉽게 검색되게 하여 준다.
<meta name=“author”content=“이정진”>
<meta name=“description” content=“HTML 문서의 설명”>
<meta name=“key words” content=“computer, html, css3, javascript”>
<meta character=“UTF-8”>
HTML5에서는 UTF-8이 기본 문자 인코딩 방식이므로 <meta> 태그에서 생략해도 좋지만 호환성을 위해 두어도 된다.

 

2.5 태그들의 블록

 

HTML5 여러 가지 태그 요소들은 블록(block)으로 지정한 후 일괄적으로 여러 가지 속성을 지정할 수 있다. 앞에서 연구한 <h1> – <h6> 같은 태그와 <p> 태그는 블록 요소로서 항상 새 줄에서 시작되고 웹브라우저에 설정된 너비를 왼쪽에서 오른쪽까지 모두 차지한다. 이밖에 많이 이용되는 블록 요소로는 <div>와 <form> 태그가 있다. <div> 태그는 이 절에서 연구하고 <form> 태그는 3장에서 연구한다.
여러 요소들의 블록과는 다르게 한 태그 내에 있는 일정한 부분을 인라인 블록(inline block)으로 지정한 후 이 부분만 속성을 지정할 수 있다. 한 줄 내부에 지정하는 인라인 블록은 새로운 줄에서 시작하지 않고 전체 브라우저 너비를 차지하지 않는데 앞에서 연구한 <a>와 <img> 태그가 여기에 해당한다. 이밖에 많이 이용되는 인라인 블록에는 <span> 태그가 있다.

2.5.1 <div> 태그

<div> 태그는 다른 HTML5 요소들을 담는 컨테이너로 사용되기도 하는데 style과 class 속성을 가질 수 있다. CSS와 같이 사용하면 요소들의 블록에 대한 스타일을 지정할 수 있다.

2.5.2 <span> 태그

<span> 태그는 한 문장의 일부 텍스트에 대한 컨테이너로 사용되는데 style과 class 속성을 가질 수 있다. CSS와 같이 사용하면 HTML5 요소들의 블록에 대한 스타일을 지정할 수 있다.

 

2.6 웹브라우저 화면의 분할

 

<iframe> 태그는 inline frame이라는 의미로 한 웹페이지 내부에 다른 웹페이지를 끼워 넣으려고 할 때 이용된다. 형식은 다음과 같다.
<iframe src=”URL”></iframe>
여기서 src 속성은 웹주소 URL을 지정한다. <iframe> 은 height나 width 속성을 이용하여 웹 페이지의 크기를 지정할 수도 있고, border를 표시하거나 색을 지정할 수 있다.
<iframe src=”demo.htm” style=”border:none;”></iframe>
<iframe src=”demo_iframe.htm” style=”border:2px solid grey;”></iframe>

 

2.7 HTML5 문서의 구조화

  

HTML의 최근 버전인 HTML5는 <그림 2.7.1>과 같이 일반적인 문서에서 많이 나타나는 여러 개의 주요 요소를 태그로 만들었다. 각 태그 요소는 독립된 형태를 유지하면서 여기저기 흩어져 있어도 이 요소들이 모여 전체 문서를 구성한다.


<그림 2.7.1> HTML5 문서의 일반구조와 주요 구성 요소

<header> 요소는 문서의 전체 제목이나 <section> 요소의 제목 등을 표시한다. 따라서 한 문서에 여러 개의 <header> 요소가 있을 수 있다.
<nav> 요소는 이 문서와 연결되는 다른 여러 개의 HTML 문서와의 링크(navigation link)를 표시한다. 하지만 모든 링크를 <nav> 요소에 적을 필요는 없다.
한 문서는 여러 개의 <section> 요소를 포함할 수 있는데 <section> 요소는 문서의 한 부분을 정의한다. 예를 들면 한 웹사이트에는 자신을 간단히 소개하는 <section>, 자세한 내용을 설명하는 <section>, 찾아오는 길을 안내하는 <section> 등이 있을 수 있다. 이와 같은 <section>의 적당한 배치를 위하여 <div> 요소를 많이 이용하기도 한다.
<article> 요소는 웹사이트의 다른 부분들과는 독립적으로 읽히고 싶은 문서를 작성할 때 사용된다. 세미나 공지나, 블로그 글, 그리고 신문기사 같은 문서를 작성할 때 사용한다. <article> 요소는 그 자체가 관련 요소들의 블록으로 정의되기도 한다.
<footer> 요소는 한 문서나 <section>의 꼬리말을 표시하는 부분으로 저자명이나, 저작권, 용어 해설 등을 적는다. 한 문서에는 여러 개의 <footer> 요소가 있을 수 있다.
<aside> 요소는 문서의 주 내용이 아닌 보조 내용을 표시한다.
이밖에도 HTML5의 다른 구성 요소들은 [표 2.7.1]과 같다.

Leave a Reply

Your email address will not be published. Required fields are marked *