HTML의 개념과 Tag의 특징 분류없음2008/08/29 18:29
HTML의 개념과 Tag의 특징
1. HTML의 정의 및 특징
1) HTML의 정의
HTML은 Hyper Text Markup Language의 약자로서, “특정 정보로 연결되는 문서를 만들 수
있는 언어“라는 뜻
2) HTML의 특징
① 대문자와 소문자를 구별하지 않는다. ② tag라는 명령어들로 이루어져 있다.
③ tag는 < >(각괄호) 안에 작성하며 여는 tag와 닫는 tag가 있다.
④ 파일 확장자명을 반드시 HTML 또는 HTM으로 지정해 주어야 한다.
2. HTML문서 작성하기 기초
|
<html> <head><title></title> </head> <body> 홈페이지 본문 내용 </body> </html> |
1) HTML의 최소 골격 태그
① <html></html> : html문서의 시작과 끝을 정의한다.
② <head></head> : html문서에 대한 정보가 있다.
③ <title></title> : 웹브라우저의 제목표시줄에 나타나는 홈페이지 제목이다.
④ <body></body> : 홈페이지 본문 내용을 입력한다.
2) HTML문서의 확장자 : 홈페이지 문서는 확장자형식이 HTML 또는 HTM 이어야한다.
문단 및 글자 관련 태그
1. 문단 관련 태그
1) <p> 태그
① 빈줄을 삽입하면서 줄바꿈을 실행한다. ② 닫는 태그가 필요 없다.
③ 본문의 맨 처음에서는 적용되지 않는다. ④ 여러 번 연속해서 입력해도 단 한번만 적용된다.
2) <br> 태그
① break 줄바꿈을 실행한다. ② 닫는 태그가 필요 없다.
③ 본문의 맨 처음에서도 적용된다. ④ 여러 번 연속해서 입력해도 모두 적용된다.
3)   : 공백 한칸
4) <center></center> : 가운데 정렬
5) <div align=right></div> : 오른쪽 정렬
2 글자 관련 태그
1) <b></b> : bold 진하게 2) <i></i> : italic 기울임꼴 3) <u></u> : unterline 밑줄
4) <h#></h#> : (#은 숫자 1~6까지)
① header ② 글자가 진하고 크며 자동줄 바꿈이 적용된다.
③ 숫자의 범위는 1부터 6까지이며 숫자가 클수록 글자 크기가 작다.
글자모양 태그
1. font color : <font color="색상명"></font>은 글자의 색상을 변경할 때 사용
2. font size : <font size="크기"></font>는 글자의 크기를 변경할 때 사용
숫자의 범위는 1~7까지 숫자가 커질수록 글자크기도 크게 표현된다.
3. font face : <font face="글꼴명">은 글자의 모양을 변경할 때 사용하는 태그
글자색상, 글자크기, 글자모양을 모두 변경할 때에는 <font>태그에 color, size, face 속성을 모두 지정
|
<font size=7 color="red" face="휴먼매직체">홈페이지 방문을 환영합니다.</font> <font color="red" face="휴먼매직체" size=7>홈페이지 방문을 환영합니다.</font> |
마퀴태그 및 목록 태그
1. marquee 태그
1) marquee 태그 : 글자가 움직이는 효과를 나타내며 </marquee>로 마감
2) 속성
① bgcolor : background color 배경색을 지정
② direction : 글자가 움직이는 방향을 left / right / up / down으로 지정 (기본값 : left)
③ scrollamount : 글자가 움직이는 속도를 지정 (기본값 :６）
④ behavior : 글자의 움직임을 slide(중지) / scroll(반복) / alternate(왕복) 로 지정 (기본값 : scroll)
2. 순서 목록
1) UL 태그 : Unordered List 의 의미로써 글머리표를 이용해 순서없는 목록을 만든다.
목록에 속하는 항목은 <li>로 만들며 type을 circle , square 로 지정할 수 있다.
2) OL 태그 : Ordered List 의 의미로써 글머리표를 이용해 순서있는 목록을 만든다.
목록에 속하는 항목은 <li>로 만들며 type을 A/a 또는 I/i로 지정하여 글머리표 타입을 변경할 수 있다.
하이퍼링크 태그
1. 하이퍼링크(Hyper Link) : 하이퍼링크는 다른 문서로 연결하는 기능
① 태그는 <a href="URL/파일명">이며, 닫는 태그는 </a>이다.
② 속성으로는 target과 title이 있다.
2. URL주소를 이용하여 다른 웹사이트로 연결
<a href="http://www.naver.com"> 네이버 </a>
3. 하이퍼링크 태그의 속성
1) target : 현재 웹브라우저가 아닌, 새창에서 열 때에는 taget을 _blank로 지정한다.
2) title : 마우스를 올렸을 때 풍선도움말(tooltip)이 나타나게 한다.
<a href="http://www.naver.com" target="_blank" title="가자~네이버로"> 네이버 </a>
책갈피
1. 책갈피
① 같은 페이지 내에서 링크하는 기능이며 하이퍼링크를 만들 때에도 역시 <a href>태그를 사용한다.
단, 하이퍼링크시 #을 써야한다. #표시는 같은 페이지로 링크한다는 것을 의미한다.
② 책갈피 기능을 이용해 하이퍼링크를 만들면 이름이 있는 곳으로 링크 되는데, 이름을 만들 때에는
<a name> 태그를 이용한다.
<a name="top"></a>
...중략...
<a href="#top">[맨위로]</a>
이미지 삽입하기
1. URL주소 이용 : 이미지를 삽입할 때에는 <img src="URL/파일명"> 태그를 이용
2. 너비, 높이 변경하기
① 너비를 변경할 때에는 width속성을 이용 ② 높이를 변경할 때에는 height속성을 이용
3. img 태그의 속성
1) width와 height
이미지의 가로와 세로 길이를 변경할 때에는 width와 height 속성을 이용하여 픽셀값을 지정한다.
<img src="../img/chicago.jpg" width=250 height=300>
2) border : 테두리의 두께는 border 속성을 이용하여 픽셀값을 지정한다.
<img src="../img/chicago.jpg" border=0>
3) align : 그림에 글자를 정렬할 때에는 align속성에 top/middle/bottom을 지정한다.
<img src="../img/chicago.jpg" align="top">
4) title : title속성을 이용하면 풍선도움말을 나타낼 수 있다.
<img src="../img/chicago.jpg" title="뮤지컬 시카고">
4. 이미지에 하이퍼링크 만들기
하이퍼링크 태그와 이미지 태그를 이용하면 홈페이지에 삽입된 이미지에 하이퍼링크를 만들 수 있다.
<a href="http://www.naver.com" target="_blank">
<img src="../img/logo.gif" border=0>
</a>
테이블 만들기
1. 표 만들기
1) <table> 태그
① 표를 만들 때에는 <table>태그를 이용한다.
② <table> 태그에 border값을 지정하지 않으면 테두리 선이 보이지 않는다.
2) <tr> 태그
① 가로줄을 만들 때에는 table row의 의미를 가진 <tr> 태그를 이용한다.
② 표에 필요한 가로줄만큼의 <tr>태그를 입력해야 한다.
3) <td> 태그
① 표의 셀을 만들 때에는 table data의 의미를 가진 <td>태그를 이용한다.
② 셀의 내용들은 왼쪽으로 정렬된다.
③ <td>와 </td>사이에 아무런 내용도 입력하지 않으면, 셀이 만들어지지 않는다.
4) <th> 태그
① table header 의 의미로써, 각 셀의 내용을 가운데로 정렬하고 진하게 표현한다.
② <td>와 사용법이 같다.
5) <caption> 태그
① 표의 제목을 지정한다.
② 반드시 <table>태그 다음에 입력해야 한다.
③ align="bottom/left/right" 속성을 이용하여 표의 제목을 정렬할 수 있다.
표속성
1. <table> 태그의 속성
1) 배경색 ① bgcolor : 배경색을 색상명이나 RGB값으로 지정한다.
② 표에만 배경색상이 적용된다.
2) 가로세로 길이
① width : 표 전체의 가로길이를 픽셀값으로 지정할 수 있다.
② height : 표 전체의 세로길이를 픽셀값으로 지정한다.
3) 정렬
align : left, right, center를 지정할 수 있다.
4) 테두리 색상
① bordercolor : 테두리의 색상을 지정한다.
② bordercolorlight : 테두리의 밝은 부분 색상을 지정한다.
③ bordercolordark : 테두리의 어두운 부분 색상을 지정한다.
5) 테두리값
① border : 테두리값을 지정한다.
② border를 생략하거나 0으로 지정하면 테두리가 보이지 않게 된다.
6) 셀간격
① cellspacing : 셀과 셀 사이의 간격을 지정한다.
② cellspacing을 0으로 지정하면, 테두리가 한 겹으로 표현된다.
7) 셀안쪽 여백
cellpadding : 픽셀값을 지정하면 셀 안쪽의 상하좌우에 여백이 지정된다.
2. <tr> 태그의 속성
1) bgcolor : 배경색을 지정한다.
2) 가로세로 정렬
① align : left / right / center을 지정할 수 있다.
② valign : up / bottom / middle을 지정할 수 있다.
3. <td> 태그의 속성
1) bgcolor : 배경색을 지정한다.
2) 가로세로 정렬
① align : left / right / center을 지정할 수 있다.
② valign : up / bottom / middle을 지정할 수 있다.
3) <th>태그의 속성도 <td> 태그와 같다.
셀합치기
1. column 합치기
① colspan = 숫자
② <td>태그의 속성으로써, 합쳐야할 셀의 개수를 지정한다.
|
| |
|
|
|
<tr>
<td colspan=2></td>
</tr>
<tr>
<td></td>
<td></td
</tr>
</table>
2. row 합치기
① rowspan = 숫자
② <td>태그의 속성으로써, 합쳐야할 셀의 개수를 지정한다.
|
|
|
|
|
<tr>
<td rowspan=2></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
양식태그
1. 폼태그
1) <form>태그 : HTML문서에서 데이터를 주고 받는 동적인 웹페이지를 만들기 위해서 사용한다.
(회원가입, 이메일전송, 쇼핑몰 등)
2) <form>태그의 속성
① name : form의 이름
② action : form태그에 입력한 데이터를 전송받아 실행할 CGI프로그램의 URL주소
③ method : 전송방식 (get / post)
2. text, password, file
1) text
① <input type=text> : 글자를 입력할 수 있다.
② name : 이름 ③ size : 길이 ④ maxlength : 최대 글자 길이
2) password
<input type=password> : 입력한 문자를 *로 표현한다. (비밀번호, 주민등록번호 등)
3) file : <input type=file> : 파일을 첨부할 때 사용한다.
3. checkbox, radio
1) checkbox : <input type=checkbox> : 체크상자를 만든다. 체크상자의 여러 항목을 선택할 수 있다.
2) radio
<input type=radio> : 라디오버튼을 만든다. 여러 항목 중 단 한가지만을 선택할 수 있다.
4. textarea
① <textarea></textarea> 이메일을 보낼 때 내용을 입력하거나, 간단한 메시지를 입력할 때 사용한다.
② rows와 cols 속성을 이용하여 크기를 변경할 수 있다.
5. select
① <select></select> : 선택항목을 만들 수 있다.
② <select>와 </select>사이에는 <option>을 이용하여 여러 개의 항목을 만든다.
③ size : 화면에 보여질 항목의 개수를 지정한다.
6. button, submit, reset
1) button ① <input type=button> : 회색버튼이 만들어진다.
② value : 버튼 위에 쓰여질 글자를 입력한다.
2) submit
<input type=submit> : <form>태그 안에 입력한 내용을 서버로 전송한다.
3) reset
<input type=reset> : <form>태그 안에 입력한 내용을 모두 지우고 초기화한다.
색상태그
1. 배경그림 삽입하기 : <body background="파일명">
2. 배경색과 글자색
① 배경색을 변경하려면 bgcolor를 지정하고 글자색을 변경하려면 text를 지정한다.
② <body bgcolor="blue" text="yellow">
3. 링크색상 바꾸기
① link : 하이퍼링크색상 (열어보지 않은 링크) ② alink : 현재 선택된 링크 (active)
③ vlink : 열어본 링크 (visited) ④ <body link=“blue” vlink=“purple” alink="red">
배경그림, 배경음악, 동영상과 플래시 삽입하기
1. 배경그림 삽입하기
background : 홈페이지에 배경그림을 삽입합니다. <body background="파일명“>
2. 배경음악 삽입하기
<bgsound src="음악파일명"> 보통 <head></head>사이에 위치합니다.
3. 동영상 삽입하기
① <embed src="파일명/URL"> ② loop : 반복횟수 ③ autostart : 자동재생
4. 플래시 삽입하기 : <embed src="파일명/URL">
프레임 나누기
1. 세로(column)로 분할하기
1) <frameset cols="분할비율"></frameset>
① 분할비율은 백분율(%)이나 픽셀값으로 지정할 수 있다.
② 화면분할 개수에는 제한이 없으며, 콤마(,)로 구분합니다.
③ <frameset cols="20%, 80%"> : 두 부분으로 분할하는 경우
2) <frame src="파일명"> : 화면을 분할한 개수만큼 <frame src>태그를 기입
2. 가로(row)로 분할하기
1) <frameset rows="분할비율"></frameset>
<frameset rows="20%, 70%, *"> : 세 부분으로 분할하는 경우입니다. (*은 분할후 남은공간을 의미)
2) <frame src="파일명"> : 화면을 분할한 개수만큼 <frame src>태그를 기입합니다.
프레임 속성
1. 경계선 고정
noresize 속성을 <frame src>태그에 기입합니다. <frame src="left.html" noresize>
2. 경계선 숨기기
1) 경계선 숨기기 : border=0값을 지정합니다. <frameset cols="20%,*" border=0>
2) 스크롤 바 숨기기
① scrolling=yes/no/auto 속성을 이용
② <frame src="left.html" scrolling=auto> (기본값은 auto)
4. name
① 화면을 분할한 후 원하는 부분에서 링크한 사이트가 열리도록 하려면 name속성을 지정해야 합니다.
② name은 <frame src>태그에 지정하며, 하이퍼링크를 만들 때 target을 해당 name으로 지정합니다.
