제1과목 1-8 HTML 태그
페이지 정보
본문
1-8 HTML
* HTML 태그 관련 내용은 실제로 연습하는 것이 중요하다. 또한 전자상거래 자격증의 경우 실기를 미리 준비하는 것이 중요하므로 HTML 태그 관련 내용은 운용사 실기 수험서의 내용을 참고하도록 한다.
⑴ 기본 사항
① 태그(=요소)의 정의
HTML의 태그(Tag)는 웹 문서 즉 HTML 문서의 형식의 근간이다.
■ <b>진하게</b> --> 진하게
■ <u>밑줄을 친다</u> --> 밑줄을 친다
② 속성의 정의
태그 안에 담겨서 태그의 기능을 보완해주는 것이다. 어떤 태그의 경우는 속성이 단순한 보완의 의미가 아니라 중요한 역할을 하기도 한다. 각 태그마다 속성의 종류와 역할은 많이 다를 수 있다.
예) <table border="2" align="center" cellpadding="3" width="800">라면 border, align, cellpadding, width는 테이블 태그의 속성이고 각 속성의 값은 = 다음의 " " 안에 주어진 2, center, 3, 800이다.
③ 단독태그와 쌍태그
■ 단독태그 - <br> <hr> <meta> 등 열기 태그만으로 된 태그로서 </br> </hr> </meta> 등의 닫기 태그가 원래 없다.
■ 쌍태그 - 대부분의 태그는 쌍태그이다. <body> </body>, <font color="red"> </font> 와 같이 열기 태그와 닫기 태그로 이루어져 있다.
⑵ <head>와 <body>
① <head> 태그와 <body> 태그
일반 HTML 문서는 <head> 태그에 속하는 부분과 <body> 태그에 속하는 부분으로 나눌 수 있는데 <head> 태그 안에 웹 문서의 각종 정보와 중요 사항 등이 들어가고 <body> 태그 부분에는 본문의 내용이 들어간다.
단 프레임셋 문서는 <body> 태그가 없다. <body> 부분 대신 프레임 분리에 대한 내용이 담긴 <frameset> 부분이 들어가게 되는 것이다.
② <head> 태그 안에 포함되는 태그들
■ <head> 부분에는 그 HTML 문서의 기본 정보가 담긴 내용들과 클라이언트 스크립트(주로 자바스크립트)의 정의와 스타일시트(CSS)의 정의에 대한 내용들이 주로 이 <head> 부분에 삽입된다.
■ <title> 태그 - 웹 문서의 제목을 쓴다. 웹 브라우저 창의 타이틀 바에 보여지는 내용이다.
■ <meta> 태그 - 작성자(author), 키워드(keyword) 등의 문서에 대한 여러 가지 정보와 http-equiv를 담는 태그. 닫기 태그가 없다.
■ <link> 태그 - 외부 문서와의 관계를 규정하는 태그로서 주로 외부 스타일시트를 이용할 때 많이 사용한다. 닫기 태그가 없다.
■ <script> 태그 - 클라이언트 스크립트의 함수를 정의한 내용을 담는다. 사실 꼭 <head> 태그 안에 있어야 할 필요는 없고 함수가 실행되는 이벤트 보다 먼저 있으면 그만이지만 항상 <head> 태그가 <body> 태그보다 먼저 있으므로 실수하지 않고 헷갈리지 않도록 <head> 태그 안에 함수를 정의한 내용 즉 <script>태그를 집어넣고 본문에는 그 함수를 실행하도록 하는 이벤트를 집어넣는 것이다.
■ <style> 태그 - 본문에서 사용될 스타일시트(CSS)의 태그의 내용을 정의하는 곳이다. 스타일시트는 사실 여러 가지 사용 방법이 있는데, 그 중 자체 문서의 내용에 대해서만 제한 및 정의를 하는 경우 자신이 사용하고 싶은 태그나 클래스에 대한 정의를 <head> 태그 안의 <style> 태그 안에 써 두는 것이다.
* <title>, <script>, <style> 태그의 경우 닫기 태그를 사용하지 않거나 오타가 나는 경우 본문이 실행되지 않는다. 주의할 것.
헤드 태그 안에 포함되는 태그들의 실례(實例)
<head>
<title>JJUM.COM 웹사이트</title>
<meta keyword="전자상거래 자격, 전자상거래 관리사, 전자상거래 운용사 ">
<link rel="stylesheet" href="css/css_01.css">
<style type="text/css">
td { font-size:11px; font-color:blue; }
</style>
<script language="javascript" >
function view_oh(url)
{window.open(url,"newwindow","toolbar=no, menubar=no, resizable=yes, scrollbars=yes, width=800, height=500, location=no, left=30, top=30") }
</script>
</head>
③ <body> 태그
<body> 태그 - ‘여기부터 본문이다’라고 브라우저에 알려주는 태그이다.
<body bgcolor="black" background="ohgiraffe_01.gif" text="white" link="blue" vlink="purple">
■ bgcolor 속성은 배경색이다. 검은색으로 지정한 것이다.
■ background 속성은 배경 이미지를 집어넣는 것이다. 그 값에 있는 것은 이미지 파일의 이름이다. bgcolor와 background 둘 다 지정해 주게 되면 백그라운드 즉 배경이미지가 우선한다.
■ text 속성은 본문 글자의 기본 색을 지정해주는 것이다. 검은색이 디폴트로 되어 있고 또 일반적으로 검은색으로 많이 지정하지만 여기서는 배경색이 검은색으로 지정되어 있으므로 하얀색으로 지정한 것이다.
■ link 속성은 메타태그 내의 링크 태그와는 전혀 개념이 다른 것으로 하이퍼링크 되어 있는 글자들의 색상을 지정하는 것이다. 다른 일반 텍스트들과 구별하기 좋게 하기 위해서이다.
■ vlink 속성은 방문했던(클릭했던) 하이퍼링크를 구별하기 위한 색상을 지정하는 것이다.
⑶ 기타 태그
① 문단 관련 태그
■ <p> 태그 - 줄 바꿈을 하고 한 줄을 띄운다. 중요한 속성으로는 align 속성이 있는데 이 속성을 사용하여 <p> 와 </p> 사이를 정렬한다. align=left align=center align=right 등의 세 가지 값을 사용한다. 이중에서 왼쪽 정렬(align=left)은 브라우저 디폴트이므로 속성을 사용하지 않으면 왼쪽으로 정렬된다. 예) <p align=center> 가운데 정렬 </p> ⇒ 안에 들어 있는 내용을 가운데 정렬함.4) 문단, 줄 바꿈 및 정렬 관련 태그
■ <div> 태그 - 줄 바꿈을 하지만 한 줄을 띄우지 않는다. <p> 태그와 마찬가지로 left, center, right의 세 가지 방식을 사용하여 정렬한다. <div> 태그는 스타일시트(CSS)를 담는 그릇(컨테이너)의 역할을 한다. 스타일시트의 정의에 따라 사용하는 클래스를 <div>에 사용하는 것이다. <div class=ohgiraffe> </div>와 같은 형식으로 안의 내용들을 헤드 태그 부분에 정의했던 ohgiraffe이라는 이름을 가진 class의 내용을 적용하는 것이다.
■ <br> 태그 - 줄바꿈을 한다. 연속으로 쓰면 줄을 띄우는 역할, 즉 텍스트를 보기 편하게 하는 역할로 많이 쓰인다. 닫기 태그가 없다(<p> 태그는 연속으로 쓰이지 않는다).
■ <h1> ... <h6> 태그 - 글자 크기를 지정하고 한 줄을 띄운다. 이 태그는 정렬이 가능한 문단 태그의 일종이다. 즉 <h2 align="center">의 표현이 가능하다. 텍스트로 만들어진 홈페이지가 주를 이루던 시절 주로 제목을 지정하기 위해서 사용되던 태그이다. 특기할 사항은 글자 크기 지정 숫자가 폰트 태그와는 반대라는 점이다. 즉 6이 가장 작은 글씨이다.
② 글자 관련 태그
■ <font> 태그 - 글자의 색상과 크기를 지정해 준다. <font face=“바탕” color=red size=4>오지랖 </font>이라고 작성하면 ‘오지랖’ 글자의 글자체는 ‘바탕’이 되고 글자 색깔은 ‘빨강’이 되고 크기는 일반 브라우저 디폴트보다 한 단계 더 큰 글씨가 된다. 폰트 태그에서의 글자 크기는 상대적인 개념으로서 ‘size=1’이 가장 작은 글씨, ‘size=7’이 가장 큰 글씨가 된다(글자 크기의 브라우저 디폴트 즉 기본 글씨 크기는 size=3이다).
■ <b> 태그 - 글자를 두껍게(진하게) 표현한다.
■ <u> 태그 - 글자에 밑줄을 친다.
■ <i> 태그 - 글자를 기울임체(이탤릭체)로 표현한다.
■ <s> 태그 - 글자에 취소선을 표시한다.
■ <sup>와 <sub> - 윗 첨자와 아래 첨자를 표현한다.
③ 테이블(표) 관련 태그
■ <table> 태그
예 1) <table align=center cellpading=3 cellspacing=2 width=100% border=2 bordercolor=pink bgcolor=green>
예 2) <table align=right width=800 border=0 background=ohgiraffe_01.gif>
■ align=center, align=right : 테이블 태그에서의 align 속성 즉 정렬은 문서 창 내에서 테이블 자체의 정렬이다.
■ width=100%, width=800 : width 속성의 값이 %(상대값)인 경우는 웹 브라우저 창의 크기에 따라 테이블의 너비가 같이 연동한다. 100%라는 것은 웹 브라우저 창 크기와 같게 한다는 것이다. %가 없는 경우(절대값)는 웹브라우저 창의 크기에 관계없이 테이블의 너비가 항상 800픽셀이 되도록 한다는 것이다.
■ border=2 : border 속성은 테이블 선(線)의 굵기를 규정한다. 값이 0이면 선이 보이지 않는다.
■ bordercolor=pink : bordercolor 속성은 말 그대로 테이블 선의 색상을 규정한다.
■ cellpadding=3 cellspacing=2 : cellspacing 속성은 border와 text 사이의 간격을 규정한다. cellpading 속성은 셀(줄과 열로 분리된 하나의 공간=칸)과 border 사이의 간격을 규정한다.
■ bgcolor와 background : 첫 번째 예에서는 배경색<bgcolor>이 쓰였고 두 번째 예에서는 배경이미지<background>가 사용되었다.
■ <tr> 태그 - 테이블의 행을 정의하는 태그로서 <tr> 태그의 숫자에 따라 줄이 생겨난다.
■ <td> 태그 - 행의 칸(셀)을 정의하는 태그로서 <tr> 태그 안에 쓰여야 한다. <tr> 태그 안에 <td> 태그가 세 개 있으면 칸이 세 개 만들어지는 것이다.
■ <td> 태그에는 여러 가지 속성들이 있다. 예) <td align=center bgcolor=green width=120 height=300> 여기서의 정렬은 셀 안의 텍스트의 정렬 방식이다. 물론 배경색뿐만 아니라 배경이미지도 쓰일 수 있다. 표의 경우는 height 속성이 잘 안 쓰이지만 <td> 태그에서는 종종 쓰인다.
④ 프레임 관련 태그
■ <frameset> 태그 - <frameset> 태그는 한 화면을 2개 이상의 화면으로 나누어 화면마다 각기 다른 웹 문서를 보여주려고 할 때 사용하는 태그이다. 이런 경우에는 나누어진 각 화면에 해당하는 문서 외에도 화면을 나누는 여러 가지 정보를 담고 있는 문서가 필요한데 그 문서를 일반적으로 프레임 문서라고 한다. 프레임 문서 안에서 프레임 내용을 규정하는 태그가 <frameset> 태그이다. 이 프레임 문서는 일반 웹 문서와 달리 보디 태그가 없고 그 대신에 <frameset>과 </frameset> 사이에 다양한 화면 분할 정보 및 소스 문서 정보 등이 들어 있다.
■ <frame> 태그 - 프레임 셋 요소로 나누어진 화면에 불러올 문서를 규정하는 요소이다.
프레임 문서의 일반적인 형식
<html>
<head>
<title> 세 개의 프레임으로 분리된 프레임 문서입니다 </title>
</head>
<frameset lows=“100,*”>
<frame src="111.html" name=top scrolling=no marginwidth=0 marginheight=0>
<frameset cols=“150,*”>
<frame src="222.html" name=left scrolling=auto marginwidth=10 marginheight=5>
<frame src="333.html" name=main scrolling=auto marginwidth=10 marginheight=5>
</frameset>
</html>
⑤ 폼 관련 태그
■ <form> 태그 - 모든 폼 관련 태그들은 <form> 태그 내에 즉 <form>과 </form> 사이에 있어야 한다.
■ <input> 태그 폼 태그 중에서 제일 많은 입력 양식의 종류를 갖고 있는 태그로서 type 속성의 값에 따라 양식이 정해진다.
■ <input> 태그의 type 속성 값의 종류와 사용 예
- text 한줄 입력 상자 <input type=text size=16 maxlength=10>
- password 비밀번호 입력 상자 <input type=password size=8 maxlength=8>
- radio 선택 항목 <input type=radio value=“male” checked>
- checkbox 다중 선택 항목 <input type=checkbox value="웹서핑" checked>
- file 파일 올리기 <input type=file>
- button 버튼 <input type=button>
- submit 전송 버튼 <input type=submit value=“전송”>
- reset 취소 버튼 <input type=reset value=“취소”>
- image 이미지 버튼 (전송) <input type=image>
- hidden 숨김 항목 <input type=hidden value="aaa">
■ <select> 태그 - 펼침 메뉴 또는 목록 상자를 만들 때 사용한다. <select name=age size=1> <option value=10>10th</option> <option value=20>20th</option> <option value=30>30th</option> </select>
■ <textarea> 태그 - 여러 줄을 입력할 수 있는 글 상자를 만든다. <textarea name=area1 rows=10 cols=40>여기에 글을 쓰시면 됩니다.</textarea>