'수업 공지사항/[2011-1]인터넷PGM'에 해당되는 글 7건

2011/06/07 19:11

인터넷프로그래밍 수시평가 3

2011/06/07 19:11 in 수업 공지사항/[2011-1]인터넷PGM

** 제출형식 : 결과화면 이미지 - 200012345_김철수_수시3.jpg

*** 요구사항
수시2에서 제공된 파일(mp4, jpg)을 활용하여 수시2와 동일하게 구현함, 단 local에서 구동되는 것이 아니라 IIS 를 활용하여 Web Service를 제공해야 함, URL에 IP Address 로 접속해야 함

*** 제출방법
결과화면을 아래의 결과화면-예시1의 구도 및 형식으로 jpg 파일로 캡쳐하여 제출함
제출한 이미지의 내용에 제출자의 학번 및 성명을 최상단에 기재함

*** 결과화면-예시 1

*** 참고화면-예시 1

*** 참고화면-예시 2 - IIS 설정

'수업 공지사항 > [2011-1]인터넷PGM' 카테고리의 다른 글

인터넷프로그래밍 수시평가 3 (0)	2011/06/07
인터넷프로그래밍 수시평가 2 (0)	2011/06/03
인터넷프로그래밍 수시평가 1 (0)	2011/06/01
인터넷프로그래밍 Report 1 - Web Form (0)	2011/05/27
인터넷프로그래밍 강의자료 (0)	2011/05/04
HTML 기본 (0)	2011/04/13

Posted by Columbus

동의대, 수시3

Trackback 0 Comment 0

2011/06/03 04:31

인터넷프로그래밍 수시평가 2

2011/06/03 04:31 in 수업 공지사항/[2011-1]인터넷PGM

** 제출형식 : 결과화면 이미지 - 200012345_김철수_수시2.jpg, 원본소스파일- 200012345_김철수_수시2.html

*** 요구사항
제공된 파일(flv, jpg)을 활용하여 flv를 mp4로 변환 후 구글크롬에서 아래와 같이 동작하며 mp4 파일을 지원하지 않는 브라우져(오페라, 파이어폭스)에서는 아래와 같이 동작하게 구현함

*** 첨부파일 3개

Quiz2-annex1-110603.a00

Quiz2-annex1-110603.a01

Quiz2-annex1-110603.alz

'수업 공지사항 > [2011-1]인터넷PGM' 카테고리의 다른 글

인터넷프로그래밍 수시평가 3 (0)	2011/06/07
인터넷프로그래밍 수시평가 2 (0)	2011/06/03
인터넷프로그래밍 수시평가 1 (0)	2011/06/01
인터넷프로그래밍 Report 1 - Web Form (0)	2011/05/27
인터넷프로그래밍 강의자료 (0)	2011/05/04
HTML 기본 (0)	2011/04/13

Posted by Columbus

동의대, 수시2

Trackback 0 Comment 0

2011/06/01 16:15

인터넷프로그래밍 수시평가 1

2011/06/01 16:15 in 수업 공지사항/[2011-1]인터넷PGM

** 제출형식 : 200712345_김철수.html

*** 참고사항

아이디:autofucus
비밀번호:required
비밀번호 확인:required
회원등급:readonly value="준회원"

이름:required
메일주소:required, autocomplete="off"
연락처:autocomplete="off"
코딩숙련도:min="1" max="3" step="1"

상품명:readonly value="셔츠"
색상 datalist: 검정색, 흰색, 하늘색
주문개수:min="1" max="3" value="1"

*** 결과화면
*크롬

*오페라

'수업 공지사항 > [2011-1]인터넷PGM' 카테고리의 다른 글

인터넷프로그래밍 수시평가 3 (0)	2011/06/07
인터넷프로그래밍 수시평가 2 (0)	2011/06/03
인터넷프로그래밍 수시평가 1 (0)	2011/06/01
인터넷프로그래밍 Report 1 - Web Form (0)	2011/05/27
인터넷프로그래밍 강의자료 (0)	2011/05/04
HTML 기본 (0)	2011/04/13

Posted by Columbus

동의대, 수시1, 인터넷프로그래밍

Trackback 0 Comment 0

2011/05/27 03:27

인터넷프로그래밍 Report 1 - Web Form

2011/05/27 03:27 in 수업 공지사항/[2011-1]인터넷PGM

포털사이트에 회원가입시 회원정보를 입력받는 웹폼을 구현하시오.

HTML5 형식을 준수하며 다양한 디자인을 허용함

제출일 : 2011-1학기 기말고사일까지

제출방법 : 출력물과 원본Source File을 모두 제출

제출방법 1 : 원본 Source File 을로 송부함, email 제목예시 ---> [인프]이동의, 200438299, Report1
제출방법 2 : 출력물, 최종결과화면 1장 및 Source File 출력물

'수업 공지사항 > [2011-1]인터넷PGM' 카테고리의 다른 글

인터넷프로그래밍 수시평가 2 (0)	2011/06/03
인터넷프로그래밍 수시평가 1 (0)	2011/06/01
인터넷프로그래밍 Report 1 - Web Form (0)	2011/05/27
인터넷프로그래밍 강의자료 (0)	2011/05/04
HTML 기본 (0)	2011/04/13
인터넷프로그래밍 특허참고 (0)	2011/04/05

Posted by Columbus

과제, 동의대, 인프

Trackback 0 Comment 0

2011/05/04 02:37

인터넷프로그래밍 강의자료

2011/05/04 02:37 in 수업 공지사항/[2011-1]인터넷PGM

'수업 공지사항 > [2011-1]인터넷PGM' 카테고리의 다른 글

인터넷프로그래밍 수시평가 2 (0)	2011/06/03
인터넷프로그래밍 수시평가 1 (0)	2011/06/01
인터넷프로그래밍 Report 1 - Web Form (0)	2011/05/27
인터넷프로그래밍 강의자료 (0)	2011/05/04
HTML 기본 (0)	2011/04/13
인터넷프로그래밍 특허참고 (0)	2011/04/05

Posted by Columbus

Trackback 0 Comment 0

2011/04/13 12:02

HTML 기본

2011/04/13 12:02 in 수업 공지사항/[2011-1]인터넷PGM

<CITE>

▣원어 : CITation / 시작태그:필요 함 / 종료태그:필요 함
이 태그는 짧은 인용(citation)구를 표시할때 사용 되며, 이태릭체로 표시 됩니다.

▣속성
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0, N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상

예제:

<html>
<head>
<title>CITE 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<cite>짧은 인용구를 표시합니다.</cite>
</body>
</html>

결과는 이태릭 체로 나타납니다.

짧은 인용구를 표시합니다.

▣원어 : CENTER / 시작태그:필요 함 / 종료태그:필요 함
텍스트를 홈페이지의 중앙에 위치 시키고 div Align=CENTER의 단축형 입니다. 그러나 W3C에서는 <div Align=Center>태그를 권장 합니다.

예제:

<html>
<head>
<title>CENTER 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
이태그는 텍스트를 중앙에 위치 시킬때 사용 됩니다.<p>
<center>글씨가 중앙에 왔나요.^^</center>
</body>
</html>

위의 결과를 보시면..

이태그는 텍스트를 중앙에 위치 시킬때 사용 됩니다.

글씨가 중앙에 왔나요.^^

<DEL>

▣원어 : DELeted text / 시작태그:필요 함 / 종료태그:필요 함
이 태그는 본문내용중 삭제 표시를 해야 할 경우 사용되며, <STRIKE>태그와 마찬 가지로 가운데 줄이 들어 갑니다. 이 태그는 Netscape에서는 지원되지 않으므로 <STRIKE>태그를 사용 하는 것이 좋습니다.

▣속성
• cite="url"
-----삭제할 대상에 대한 참고사항이 있는 url을 지정 합니다. IE 4.0 이상
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0 이상
• datetime="년도-월-일T시|분|초Z"
-----삭제 시점을 표시합니다. "T"와 "Z"는 반드시 있어야 합니다. IE 4.0 이상

예제:

<html>
<head>
<title>DEL 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
이 태그는 본문 내용중 삭제표시가 필요한 경우 사용합니다.<p>
<del>이곳은 삭제 표시 된곳입니다.</del>
</body>
</html>

자 그럼 결과를 보실까요..(__+)

이 태그는 본문 내용중 삭제표시가 필요한 경우 사용합니다.

~~이곳은 삭제 표시 된곳입니다.~~

<EM>

▣원어 : EMphasis / 시작태그:필요 함 / 종료태그:필요 함
홈페이지의 내용중 강조할 부분에 사용되며, 이태그가 적용되면 <I>태그와 마찬 가지로 이태릭체로 변합니다.

▣속성
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상

예제:

<html>
<head>
<title>EM 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
이 태그는 본문 내용중 강조할 부분에 사용합니다.<p>
<em>이곳은 강조된 부분입니다.</em>
</body>
</html>

결과는 이태릭체로 나타납니다.

이 태그는 본문 내용중 강조할 부분에 사용합니다.

이곳은 강조된 부분입니다.

<I>

▣원어 : Italic text style / 시작태그:필요 함 / 종료태그:필요 함
이 태그가 적용되면 이태릭체로 나타납니다.

▣속성
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상

예제:

<html>
<head>
<title>I 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
이 태그는 본문 내용이 이태릭체로 나타납니다.<br>
<i>이태릭체로 나오는 부분입니다.</i>
</body>
</html>

결과는 이태릭체로 나타납니다.

이 태그는 본문 내용이 이태릭체로 나타납니다.
이태릭체로 나오는 부분입니다.

<INS>

▣원어 : INSert text / 시작태그:필요 함 / 종료태그:필요 함
이 태그는 본문중 삽입 표시를 해야 할 경우 사용 되며, 적용되면 밑줄이 쳐진다. Netscape에서는 지원되지 않으므로 <U>태그를 사용 해야 합니다.

▣속성
• cite="url"
-----<ins>태그가 적용될 내용에 대한 참고 사항이 있는 url을 지정 합니다. IE 4.0 이상
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0 이상
• datetime="년도-월-일T시|분|초Z"
-----삽입 시점을 표시합니다. "T"와 "Z"는 반드시 있어야 합니다. IE 4.0 이상

예제:

<html>
<head>
<title>INS 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
이 태그는 본문 내용중 삽입 표시가 필요한 경우 사용합니다.<br>
<ins>이곳은 삽입 표시 된곳입니다.</ins>
</body>
</html>

결과를 보시겠습니다...음...

이 태그는 본문 내용중 삽입 표시가 필요한 경우 사용합니다.
이곳은 삽입 표시 된곳입니다.

<SAMP>

▣원어 : SAMPle / 시작태그:필요 함 / 종료태그:필요 함
이 태그는 프로그램 소스나 스크립트 같은 것들을 예제로 사용할 경우 사용되며, <TT>태그와 같이 고정비례폭체로 나타납니다.

▣속성
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상

예제:

결과를 보면 다음과 같습니다.

이 태그는 프로그램 소스나 스크립드 같은 것들을 예제로 사용시 쓰입니다.
영어 알파벳은abcd~xyz입니다.

<FONT>

▣원어 : FONT / 시작태그:필요 함 / 종료태그:필요 함
홈페이지 내의 글꼴을 설정합니다.

▣속성
• color="값" (값 = 색이름 / SRGB)
-----글자의 색을 지정합니다. IE 3.0, N 3.0 이상
• face="글꼴 이름"
-----글꼴을 지정합니다. 여러개의 글꼴을 지정하려면(,)로 구분하며 순차적으로 적용IE 3.0, N 3.0 이상
• size="글꼴 크기"
-----글자의 크기를 지정합니다. 절대적으로 1~7까지 지정할 수 있으며 숫자가 클수록 글 크기도 커지고 상대적으로는 기본 글 크기 3을 기준으로 값을 더하거나 뺌니다.기본 글 크기는 3 IE 3.0, N 3.0 이상

예제:

<html>
<head>
<title>FONT 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
이 태그는 글꼴을 설정하는 태그입니다.<br>
<font color="green">이곳은 글이 녹색입니다.</font><br>
<font size="4" face="Times New Roman, Times, serif">이곳의 글크기는 절대값을 적용했으며, 글꼴은<br>
Times New Roman, Times, serif입니다.</font><br>
<font size="-1">글 크기는 상대적으로 그 값을 빼거나 더할수도 있습니다.<font>
</body>
</html>

위의 결과를 보시면 다음과 같습니다.

이 태그는 글꼴을 설정하는 태그입니다.
이곳은 글이 녹색입니다.
이곳의 글크기는 절대값을 적용했으며, 글꼴은
Times New Roman, Times, serif 입니다 .
글 크기는 상대적으로 그 값을 빼거나 더할수도 있습니다.

▣원어 : Heading / 시작태그:필요 함 / 종료태그:필요 함
홈페이지의 제목의 크기를 나타낼때 쓰이며, 자동으로 줄 바꿈이 적용됩니다.
<H1>이 가장 크로<H6>이 가장 작습니다.

▣속성
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상
• align="값" (값 = left / center / right / justify)
-----제목의 정렬 상태를 지정합니다. IE 4.0,N 4.0 이상

예제:

<html>
<head>
<title>H 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
제목의 크기를 설정합니다.<br>
<h1>H1 크기</h1>
<h2>H2 크기</h2>
<h3>H3 크기</h3>
<h4>H4 크기</h4>
<h5>H5 크기</h5>
<h6>H6 크기</h6>
</body>
</html>

결과를 보겠습니다.

H1 크기

H2 크기

H3 크기

H4 크기

H5 크기

H6 크기

<S>

▣원어 : Strike-through text style / 시작태그:필요 함 / 종료태그:필요 함
이 태그는 <STRIKE>태그와 마찬 가지로 본문 내용중 일부분에 가운데에 줄을 넣습니다.

▣속성
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상

예제:

<html>
<head>
<title>S 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
본문중 일부분에 가운데에 줄을 넣습니다.<br>
<s>바로 이곳이 태그가 적용된 부분입니다.</s>
</body>
</html>

결과를 보시면 다음과 같습니다.

본문중 일부분에 가운데에 줄을 넣습니다.
~~바로 이곳이 태그가 적용된 부분입니다.~~

▣원어 : STRIKE-through text / 시작태그:필요 함 / 종료태그:필요 함
이 태그 또한 글자의 가운데에 선을 긋습니다.

▣속성
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상

예제:

<html>
<head>
<title>STRIKE 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
글자의 가운데에 줄을 긋습니다.<br>
<strike>이곳에 줄이 그어졌습니다.</strike>
</body>
</html>

결과는 <S>태그와 같습니다.

글자의 가운데에 줄을 긋습니다.
~~이곳에 줄이 그어졌습니다.~~

▣원어 : STRONGer emphasis / 시작태그:필요 함 / 종료태그:필요 함
홈페이지 내에서 일부 텍스트를 강한 강조할때 사용됩니다. <B>태그와 마찬가지로 굵고 진하게 나타납니다.

▣속성
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상

예제:

<html>
<head>
<title>STRONG 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
글자를 강조하는 태그입니다.<br>
<strong>정말 강조 되었죠..^^</strong>
</body>
</html>

강조 되었으리라 보고 넘어갈까요....그래도 한번 보겠습니다...ㅡㅡ;;

글자를 강조하는 태그입니다.
정말 강조 되었죠..^^

<SUB>

▣원어 : SUBscript / 시작태그:필요 함 / 종료태그:필요 함
홈페이지에서 화학 기호와 같이 아래 첨자를 사용하고자 할때 이 태그를 사용합니다.

▣속성
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0, N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상

예제:

</head>
<body bgcolor="white">
우리 인체는 물이 없이는 살 수 없습니다.<br>
"아저씨, 아저씨는 물(H<sub>2</sub>O)없이 살 수 있어요...^^;"
</body>
</html>

결과는 이렇습니다.

우리 인체는 물이 없이는 살 수 없습니다.
"아저씨, 아저씨는 물(H₂O)없이 살 수 있어요...^^;"

<SUP>

▣원어 : SUPerscript / 시작태그:필요 함 / 종료태그:필요 함
홈페이지에서 수학 기호의 제곱근과 같이 윗첨자를 사용하고자 할때 이 태그를 사용합니다.

▣속성
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상

예제:

<html>
<head>
<title>SUP 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
(x+y)<sup>2</sup>=x<sup>2</sup>+2xy+y<sup>2</sup><br>
맞나 틀리나.. 모르겠지요..
</body>
</html>

그럼 공식의 결과를 보면...

(x+y)²=x²+2xy+y²
맞나 틀리나.. 모르겠지요..

<TT>

▣원어 : TeleType / 시작태그:필요 함 / 종료태그:필요 함
본문 내용중 일부를 Teletype(고정 비례폭)체로 만드는 태그입니다.

▣속성
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상

예제:

<html>
<head>
<title>TT 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
이 태그를 적용 시키면 다음과 같겠지요.<br>
글꼴이 <tt>고정폭 으로 표시되는게</tt>보이나요?
</body>
</html>

위 결과를 살펴 보겠습니다.

이 태그를 적용 시키면 다음과 같겠지요.
글꼴이 고정폭 으로 표시되는게보이나요?

<U>

▣원어 : Under lined text / 시작태그:필요 함 / 종료태그:필요 함
홈페이지의 본문 내용중 일부에 밑줄을 긋는 태그입니다. <INS>태그 또한 밑줄을 긋는 태그이나 Netscape에서는 지원되지 않으니 <U>태그를 사용하는게 좋습니다.

▣속성
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상

예제:

<html>
<head>
<title>U 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
이 태그를 적용 시키면 다음과 같겠지요.<br>
<u>링크된것이 아니라 U 태그를 적용한 것입니다.</u>
</body>
</html>

결과는 <ins>태그와 같습니다. 그래도 한번 보고 넘어 가지요...

이 태그를 적용 시키면 다음과 같겠지요.
링크된것이 아니라 U 태그를 적용한 것입니다.

<VAR>

▣원어 : VARiable / 시작태그:필요 함 / 종료태그:필요 함
이 태그는 변수의 이름을 설정 하거나 스크립트에 의해 사용자가 변수를 입력해야 하는 경우에 사용하는 태그입니다. <i>태그와 같이 이태릭체로 적용

▣속성
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상

예제:

<html>
<head>
<title>Var태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
이 태그는 변수의 이름을 설정 할때 사용합니다.<br>
<var>이곳에 var 태그가 적용되었습니다.</var>
</body>
</html>

결과를 보시면

이 태그는 변수의 이름을 설정 할때 사용합니다
이곳에 var 태그가 적용되었습니다.

표와 관련있는 태그

<TABLE> <TR> <TD> <TBODY> <TFOOT> <THEAD> <TH> <CAPTION> <COLGROUP> <COL>

<TABLE>

▣원어 : TABLE / 시작태그:필요 함 / 종료태그:필요 함
본문 내에 표를 만드는 태그입니다.
가장 많이 쓰이는 태그 이며, 홈페이지 내에서 많은 응용력을 필요로 합니다. 이 태그만 잘 사용해도 홈페이지 분위기가 확~~아주 중요한 태그입니다.

▣속성
• align="값" (값 = left / center / right)
-----표의 정렬 상태를 설정 합니다. IE 3.0, N 3.0 이상
• backgroungd="이미지 파일 경로"
-----배경이 될 이미지 파일의 경로를 지정해 줍니다. IE 3.0, N 4.0 이상
• bgcolor="값" (값 = 색이름 / SRGB)
-----배경 색상을 지정해 줍니다. IE 3.0, N 3.0 이상
• bordercolor="값" (값 = 색이름 / SRGB)
-----표의 외곽선의 색상을 지정해 줍니다. IE 3.0, N 3.0 이상
• border="픽셀"
-----표의 외곽선의 두께를 설정하며, 값이 "0"이면 외곽선이 보이지 않습니다.
• bordercolordark="값" (값 = 색이름 / SRGB)
-----표의 외곽선을 3차원으로 만들때 사용되는 어두운 색을 지정 IE 3.0 이상
• bordercolorlight="값" (값 = 색이름 / SRGB)
-----표의 외곽선을 3차원으로 만들 때 사용되는 밝은 색을 지정 IE 3.0 이상
• cellpadding="픽셀"
-----셀 경계와 셀 안의 내용과의 간격을 지정 IE 3.0, N 3.0 이상
• cellspacing="픽셀"
-----셀과 셀 사이의 간격을 지정 IE 3.0, N 3.0 이상
• cols="숫자"
-----표에 들어갈 열의 개수를 지정 IE 4.0, N 4.0 이상
• class="클래스 이름"
-----스타일 시트의 서식을 적용 IE 4.0, N 4.0 이상
• frame="값" (값 = above / below / border / hsides / Lhs / rhs / vside / void)
-----표 외곽선의 형태를 지정 border="1" 이상일 때 사용할 수 있습니다. IE 3.0 이상

above	바깥쪽 경계선 중 윗쪽만 나타남
below	바깥쪽 경계선 중 아래쪽만 나타남
border	기본적인 외곽선
hsides	바깥쪽 경계선 중 위아래만 나타남
Lhs	바깥쪽 경계선 중 왼쪽만 나타남
rhs	바깥쪽 경계선 중 오른쪽만 나타남
vside	바깥쪽 경계선 중 좌우만 나타남
void	외곽선이 나타 나지 않습니다.

• height="픽셀"
-----표의 높이를 설정
• hspace="픽셀"
-----표 위아래로 표 외곽 내용들과의 간격을 설정합니다. N 3.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. IE 4.0, N 4.0 이상
• rules="값" (값 = cols / rows / none / all / group)
-----표에서 셀 사이에 경계선을 설정합니다. IE 3.0 이상

cols	열 사이의 경계선만 그린다.
rows	행들 사이의 경계선만 그린다.
none	표 외곽선을 제외한 내부 셀 경계를 모두 지운다.
all	표 외곽선을 포함한 내부 셀 경계를 모두 그린다.
group	<TBODY>, <TFOOT>등 그룹들 안의 경계선을설정

• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상
• width="픽셀/(%)"
-----표의 너비를 설정 하며, 브라우저를 대비한 비율을 퍼센트로 사용 하기도 합니다.

예제:

<html>
<head>
<title>TABLE 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table style="border: #000000 1px solid">
<caption align="TOP">style="border: #000000 1px solid"</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="0">
<caption align="TOP">BORDER="0"</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1">
<caption align="TOP">BORDER="1"</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="4">
<caption align="TOP">BORDER="4"</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
</body>
</html>

결과:

style="border: #000000 1px solid"
a	b	c
x	y	z

BORDER="0"
a	b	c
x	y	z

BORDER="1"
a	b	c
x	y	z

BORDER="4"
a	b	c
x	y	z

<html>
<head>
<title>TABLE 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1" width="500" bgcolor="#999999">
<caption align="TOP">WIDTH="500" bgcolor="#999999"</caption>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>x</td><td>y</td><td>z</td></tr>
</table>
<p>
<table border="1" width=80%>
<caption align="TOP">WIDTH=80% (500px의 80%)</caption>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>x</td><td>y</td><td>z</td></tr>
</table>
</body>
</html>

결과:

WIDTH="500" BGCOLOR="#999999"
a	b	c
x	y	z

WIDTH=80% (500px의 80%)
a	b	c
x	y	z

<html>
<head>
<title>TABLE 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1" >
<caption align="TOP">FRAME 속성을 사용하지 않을 때 </caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=VOID>
<caption align="TOP">FRAME=VOID</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=BORDER>
<caption align="TOP">FRAME=BORDER</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=ABOVE>
<caption align="TOP">FRAME=ABOVE</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=BELOW>
<caption align="TOP">FRAME=BELOW</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
</body>
</html>

결과:

FRAME 속성을 사용하지 않을 때
a	b	c
x	y	z

FRAME=VOID
a	b	c
x	y	z

FRAME=BORDER
a	b	c
x	y	z

FRAME=ABOVE
a	b	c
x	y	z

FRAME=BELOW
a	b	c
x	y	z

<html>
<head>
<title>TABLE 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1" frame=HSIDES>
<caption align="TOP">FRAME=HSIDES</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=LHS>
<caption align="TOP">FRAME=LHS</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=RHS>
<caption align="TOP">FRAME=RHS</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=VSIDES>
<caption align="TOP">FRAME=VSIDES</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" BOX>
<caption align="TOP">FRAME=BOX</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td> </tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td> </tr>
</table>
</body>
</html>

결과:

FRAME=HSIDES
a	b	c
x	y	z

FRAME=LHS
a	b	c
x	y	z

FRAME=RHS
a	b	c
x	y	z

FRAME=VSIDES
a	b	c
x	y	z

FRAME=BOX
a	b	c
x	y	z

<TR>

▣원어 : Table Row / 시작태그:필요 함 / 종료태그:필요 없음
표의 행을 만드는 태그 입니다.
<TABLE>안에 들어가며 <TR>태그가 들어갈 때 마다 행이 바뀌고 이 태그 안에는 <TD>가 들어가 셀을 만들어 줍니다.

▣속성
• align="값" (값 = left / center / right / justify / char)
-----행에 들어갈 내용의 정렬 상태를 설정 합니다. IE 3.0, N 3.0 이상
• bgcolor="값" (값 = 색이름 / SRGB)
-----배경 색상을 지정해 줍니다. IE 3.0, N 3.0 이상
• bordercolor="값" (값 = 색이름 / SRGB)
-----표의 외곽선의 색상을 지정해 줍니다. IE 3.0 이상
• bordercolordark="값" (값 = 색이름 / SRGB)
-----표의 외곽선을 3차원으로 만들때 사용되는 어두운 색을 지정 IE 3.0 이상
• bordercolorlight="값" (값 = 색이름 / SRGB)
-----표의 외곽선을 3차원으로 만들 때 사용되는 밝은 색을 지정 IE 3.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• class="클래스 이름"
-----스타일 시트의 서식을 적용 IE 4.0, N 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상
• nowrap
-----한 행의 줄바꿈 기능을 해제합니다. IE 3.0, N 3.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----행에 들어가는 내용의 정렬 방식을 위아래를 기준으로 설정 IE 4.0, N 4.0 이상

예제:

<html>
<head>
<title>TR 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
표에 행을 삽입한다. 즉 TR 태그가 삽입이 될 때마다 행이 바뀐다.<p>
<table border="1">
<caption align="TOP">TR 태그의 정렬방식</caption>
<tr align="left" valign="top">
<th colspan="3" align="CENTER">정렬방식</th>
</tr>
<tr align="left" valign="top">
<td width="200" height="50">LEFT, TOP</td>
<td width="200" height="50" valign="middle">LEFT, MIDDLE</td>
<td width="200" height="50" valign="bottom">LEFT, BOTTOM</td>
</tr>
<tr align="center" valign="middle">
<td width="200" height="50" valign="top">CENTER, TOP</td>
<td width="200" height="50">CENTER, MIDDLE</td>
<td width="200" height="50" valign="bottom">CENTER, BOTTOM</td>
</tr>
<tr align="right" valign="bottom">
<td width="200" height="50" valign="top">RIGHT, TOP</td>
<td width="200" height="50" valign="middle">RIGHT, MIDDLE</td>
<td width="200" height="50">RIGHT, BOTTOM</td>
</tr>
</table>
</body>
</html>

결과:

표에 행을 삽입 합니다. 즉 TR 태그가 삽입이 될 때마다 행이 바뀝니다.

TR 태그의 정렬방식
정렬방식
LEFT, TOP	LEFT, MIDDLE	LEFT, BOTTOM
CENTER, TOP	CENTER, MIDDLE	CENTER, BOTTOM
RIGHT, TOP	RIGHT, MIDDLE	RIGHT, BOTTOM

<TD>

▣원어 : Table Data cell / 시작태그:필요 함 / 종료태그:필요 없음
표 내에 셀을 삽입 하며, <TD> 태그는 반드시 <TR> 태그 안에 들어가야 합니다.

▣속성
• align="값" (값 = left / center / right / justify / char)
-----행에 들어갈 내용의 정렬 상태를 설정 합니다. IE 3.0, N 3.0 이상
• axis="셀 이름"
-----셀의 이름을 설정합니다. IE40, N 4.0 이상
• axes="관련 내용"
-----셀의 내용과 부합하는 이름을 나열합니다. IE40, N 4.0 이상
• backgroungd="이미지 파일 경로"
-----셀 안에 배경이 될 이미지 파일의 경로를 지정 IE 3.0, N 4.0 이상
• bgcolor="값" (값 = 색이름 / SRGB)
-----셀의 배경 색상을 지정 IE 3.0, N 3.0 이상
• bordercolor="값" (값 = 색이름 / SRGB)
-----셀 경계선에 색상을 지정 IE 3.0 이상
• bordercolordark="값" (값 = 색이름 / SRGB)
-----셀 경계선을 3차원으로 만들때 사용되는 어두운 색을 지정 IE 3.0 이상
• bordercolorlight="값" (값 = 색이름 / SRGB)
-----셀 경계선을 3차원으로 만들 때 사용되는 밝은 색을 지정 IE 3.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• class="클래스 이름"
-----스타일 시트의 서식을 적용 IE 4.0, N 4.0 이상
• colspan="숫자"
-----두개 이상의 열의 공간을 하나의 열로 만들 때 사용 IE 3.0, N 3.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. IE 4.0, N 4.0 이상
• rowspan="숫자"
----두개 이상의 행의 공간을 하나의 행으로 만들 때 사용. IE 3.0, N 3.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상
• nowrap
-----셀 안의 줄바꿈 기능을 해제합니다. IE 3.0, N 3.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----행에 들어가는 내용의 정렬 방식을 위아래를 기준으로 설정 IE 4.0, N 4.0 이상

예제:

결과:

셀의 배경으로 그림
a	b	c

셀의 배경으로 색
왼쪽 위 정렬	가운데 정렬	오른쪽 아래 정렬
a	b	c

▣원어 : Table BODY / 시작태그:필요 없음 / 종료태그:필요 없음
Table FOOTer / 시작태그:필요 함 / 종료태그:필요 없음
Table HEADer / 시작태그:필요 함 / 종료태그:필요 없음
테이블을 머리말, 본문, 꼬리말로 나누었을 때 <THEAD>는 머리말, <TBODY>는 본문에 해당하며 그리고 <TFOOT>는 꼬리말에 해당 합니다. 이 태그는 시작 태그만 사용해도 무방합니다.

▣속성
• align="값" (값 = left / center / right / justify / char)
-----들어갈 내용의 정렬 상태를 설정 합니다. IE 3.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. IE 4.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• class="클래스 이름"
-----스타일 시트의 서식을 적용 IE 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----열에 들어가는 내용의 정렬 방식을 위아래를 기준으로 설정 IE 4.0 이상

예제:

<html>
<head>
<title>T(HEAD, BODY, FOOT)태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1" width=500>
<caption>TBODY 태그</caption>
<thead>
<tr bgcolor="#FF9999"><td>THEAD<td>THEAD<td>THEAD</tr>
<tfoot>
<tr bgcolor="#99CCFF"><td>TFOOT<td>TFOOT<td>TFOOT</tr>
<tbody>
<tr bgcolor="#0099CC"><td>TBODY<td>TBODY<td>TBODY</tr>
<tr bgcolor="#0099CC"><td colspan="3">TBODY</tr>
</tbody>
<tbody>
<tr bgcolor="#0099CC"><td colspan="3">TBODY</tr>
<tr bgcolor="#0099CC"><td>TBODY<td>TBODY<td>TBODY</tr>
</tbody>
</table>
</body>
</html>

결과를 보면 TFOOT은 먼저 기술 하여도 제일 마지막에 나타나고 TBODY는 본문에 해당하는 중간에 나타납니다.

TBODY 태그
THEAD	THEAD	THEAD
TFOOT	TFOOT	TFOOT
TBODY	TBODY	TBODY
TBODY
TBODY
TBODY	TBODY	TBODY

<TH>

▣원어 : Table Header cell / 시작태그:필요 함 / 종료태그:필요 없음
보통은 표에 가장 윗 줄에 위치하며 각 열의 제목을 나타낼 때 쓰며, 태그자 적용되면 글꼴이 굵게 되고 가운데 정렬이 됩니다.

▣속성
• align="값" (값 = left / center / right / justify / char)
-----행에 들어갈 내용의 정렬 상태를 설정 합니다. IE 3.0, N 3.0 이상
• axis="셀 이름"
-----셀의 이름을 설정합니다. IE40, N 4.0 이상
• axes="관련 내용"
-----셀의 내용과 부합하는 이름을 나열합니다. IE40, N 4.0 이상
• backgroungd="이미지 파일 경로"
-----셀 안에 배경이 될 이미지 파일의 경로를 지정 IE 3.0, N 4.0 이상
• bgcolor="값" (값 = 색이름 / SRGB)
-----셀의 배경 색상을 지정 IE 3.0, N 3.0 이상
• bordercolor="값" (값 = 색이름 / SRGB)
-----셀 경계선에 색상을 지정 IE 3.0 이상
• bordercolordark="값" (값 = 색이름 / SRGB)
-----셀 경계선을 3차원으로 만들때 사용되는 어두운 색을 지정 IE 3.0 이상
• bordercolorlight="값" (값 = 색이름 / SRGB)
-----셀 경계선을 3차원으로 만들 때 사용되는 밝은 색을 지정 IE 3.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• class="클래스 이름"
-----스타일 시트의 서식을 적용 IE 4.0, N 4.0 이상
• colspan="숫자"
-----두개 이상의 열의 공간을 하나의 열로 만들 때 사용 IE 3.0, N 3.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. IE 4.0, N 4.0 이상
• rowspan="숫자"
-----두개 이상의 행의 공간을 하나의 행으로 만들 때 사용 IE 3.0, N 3.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상
• nowrap
-----셀 안의 줄바꿈 기능을 해제합니다. IE 3.0, N 3.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----행에 들어가는 내용의 정렬 방식을 위아래를 기준으로 설정 IE 4.0, N 4.0 이상

예제:

결과를 보면 TH 태그는 진하고 굵게 표시되며 가운데 정렬이 되고, TD 태그는 디폴트를 형성합니다.

TH 태그와 TD 태그 비교
TH	TH	TH
TD	TD	TD
TD	TD	TD
TD	TD	TD

▣원어 : table CAPTION / 시작태그:필요 함 / 종료태그:필요 함
이 태그는 <TABLE>태그 내에서만 사용 되며, 테이블에 대한 제목이나 설명을 기재 할 때 사용합니다. HTML 3.2 표준이지만 Netscape에서는 Align 속성이 적용되지 않습니다.

▣속성
• align="값" (값 = top / bottom / left / right)
-----caption 태그의 내용의 정렬 방식을 지정 IE 3.0
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. IE 4.0, N 4.0 이상
• class="클래스 이름"
-----스타일 시트의 서식을 적용 IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상

예제:

<html>
<head>
<title>CAPTION 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1">
<caption align="top">CAPTION</caption>
<tr>
<td width="150">TOP</td>
<td width="150">caption 정렬 방식</td>
</tr>
</table><p>
<table border="1">
<caption align="bottom">CAPTION</caption>
<tr>
<td width="150">BOTTOM</td>
<td width="150">caption 정렬 방식</td>
</tr>
</table><p>
<table border="1">
<caption align="left">CAPTION</caption>
<tr>
<td width="150">LEFT</td>
<td width="150">caption 정렬 방식</td>
</tr>
</table><p>
<table border="1">
<caption align="right">CAPTION</caption>
<tr>
<td width="150">RIGHT</td>
<td width="150">caption 정렬 방식</td>
</tr>
</table>
</body>
</html>

결과는 caption 태그의 정렬 방식입니다.

CAPTION
TOP	caption 정렬 방식

CAPTION
BOTTOM	caption 정렬 방식

CAPTION
LEFT	caption 정렬 방식

CAPTION
RIGHT	caption 정렬 방식

▣원어 : table COLumn GROUP / 시작태그:필요 함 / 종료태그:필요 없음
테이블의 그룹에 대한 속성을 설정 하며, 시작 태그만 사용 합니다. HTML 3.2 표준이지만 Netscape에서는 Align 속성이 적용되지 않습니다.

▣속성
• align="값" (값 = top / bottom / left / right)
-----colgroup태그의 내용이 어느 쪽에 정렬할 것인지를 지정 IE 3.0
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. IE 4.0, N 4.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• span="열 개수"
-----열의 개수를 지정 IE 3.0,N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• width="픽셀"
-----열의 셀 너비를 설정 IE 4.0,N 4.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----열에 들어가는 내용들의 정렬 방식을 위아래 기준으로 설정 IE 4.0,N 4.0 이상

예제:

<html>
<head>
<title>COLGROUP 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1">
<caption align="TOP"> COLGROUP 태그 </caption>
<colgroup>
<col align="left">
<col align="center">
<colgroup span="2" align="right">
<tr>
<td width="200">Align="Left"</td>
<td width="200">Align="Center"</td>
<td width="200">Align="Right"</td>
</tr>
<tr>
<td width="200">a</td>
<td width="200">b</td>
<td width="200">c</td>
</tr>
<tr>
<td width="200">a</td>
<td width="200">b</td>
<td width="200">c</td>
</tr>
<tr>
<td width="200">a</td>
<td width="200">b</td>
<td width="200">c</td>
</tr>
</table>
</body>
</html>

결과:

COLGROUP 태그
Align="Left"	Align="Center"	Align="Right"
a	b	c
a	b	c
a	b	c

<COL>

▣원어 : table COLumn / 시작태그:필요 함 / 종료태그:사용 금지
각 열에 대한 속성을 설정 하며, 시작 태그만 사용 합니다. HTML 3.2 표준이지만 Netscape에서는 Align 속성이 적용되지 않습니다.

▣속성
• align="값" (값 = top / bottom / left / right)
-----col태그의 내용이 어느 쪽에 정렬할 것인지를 지정 IE 3.0
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. IE 4.0, N 4.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• span="열 개수"
-----열의 개수를 지정 IE 3.0,N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• width="픽셀"
-----열의 셀 너비를 설정 IE 4.0,N 4.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----열에 들어가는 내용들의 정렬 방식을 위아래 기준으로 설정 IE 4.0,N 4.0 이상

예제:

<html>
<head>
<title>COL 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border=1>
<caption align="top">COL 태그</caption>
<colgroup>
<col align="right">
<col align="center">
<tr>
<td width="300">ALIGN="RIGHT"</td>
<td width="300">ALIGN="CENTER"</td>
</tr>
</table>
</body>
</html>

결과를 보면 다음과 같습니다...^^

COL 태그
ALIGN="RIGHT"	ALIGN="CENTER"

표와 관련된 태그만 숙지해도 표현하고자 하는 레이아웃을 충분이 만들수 있습니다.
그만큼 가장 중요한 태그이기도 합니다.

목록과 관련있는 태그

<DD> <DT> <DIR> <DL> <OL> <UL> <LI>

<DD>

▣원어 : Definition Description / 시작태그:필요 함 / 종료태그:필요 없음
설명형 목록의 항목 추가시 사용되며, 목록에 대해서 들여쓰기 되고 <DL>태그와 함께 사용됩니다.

▣속성
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상

예제:

결과:

이 태그는 목록의 항목 추가시 사용하며, DL 태그와 함께 사용..

사랑 이란?: "창밖에 빗물 같아요~~~"

<DT>

▣원어 : Definition Term / 시작태그:필요 함 / 종료태그:필요 없음
이 태그도 또한 <DL>과 함께 사용되며, 목록의 제목이나 설명을 기재합니다.

▣속성
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상

예제:

결과:

이 태그는 목록의 제목이나 설명을 기재시 사용하며, DL 태그와 함께 사용....

사랑 이란?: "창밖에 빗물 같아요~~~"

<DIR>

▣원어 : DIRectory / 시작태그:필요 함 / 종료태그:필요 함
디렉토리형 목록을 설정하며, 목록에 항목을 추가할 때는 <LI>태그를 사용됩니다.

▣속성
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상
• compact
-----디렉토리 목록을 간단하게 보이게 보이게 합니다. IE 3.0,N 3.0 이상

예제:

결과는 이렇게 나오겠지요.

목록에 대한 태그는

UL, OL, LI
DL, DD, DT

<DL>

▣원어 : Definition List / 시작태그:필요 함 / 종료태그:필요 함
설명형 목록을 설정하며, 목록의 제목은 <DT> 태그를 사용하고, 항목의 추가는 <DD>태그를 사용합니다.

▣속성
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상
• compact
-----디렉토리 목록을 간단하게 보이게 보이게 합니다. IE 3.0,N 3.0 이상

예제:

결과:

이 태그는 설명형 목록을 설정

사랑 이란?: "창밖에 빗물 같아요~~~"

<OL>

▣원어 : Ordered List / 시작태그:필요 함 / 종료태그:필요 함
순서형 목록을 설정하며, 목록 앞에 Type속성을 줍니다.

▣속성
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상
• compact
-----디렉토리 목록을 간단하게 보이게 보이게 합니다. IE 3.0,N 3.0 이상
• start="시작 번호"
-----목록의 시작 번호를 지정 IE 3.0,N 3.0 이상
• type="값" (값 = 1 / A / i / I(대문자))
-----목록의 기호를 지정 IE 3.0,N 3.0 이상

예제:

<html>
<head>
<title>OL 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
태그를 알면 홈페이지를 만드는데 많은 도움이 되는가?
<OL Type=1>
<Li>매우 도움이 된다.
<Li>그렇다.
<Li>도움은 무슨 도움 몰라도 된다.
</OL>
태그를 알면 홈페이지를 만드는데 많은 도움이 되는가?
<OL Type=A>
<Li>매우 도움이 된다.
<Li>그렇다.
<Li>도움은 무슨 도움 몰라도 된다.
</OL>
태그를 알면 홈페이지를 만드는데 많은 도움이 되는가?
<OL Type=i>
<Li>매우 도움이 된다.
<Li>그렇다.
<Li>도움은 무슨 도움 몰라도 된다.
</OL>
태그를 알면 홈페이지를 만드는데 많은 도움이 되는가?
<OL Type=I>
<Li>매우 도움이 된다.
<Li>그렇다.
<Li>도움은 무슨 도움 몰라도 된다.
</OL>
</body>
</html>

결과를 보면 Type=1/숫자 A/알파벳 i,I/로마숫자

태그를 알면 홈페이지를 만드는데 많은 도움이 되는가?

매우 도움이 된다.
그렇다.
도움은 무슨 도움 몰라도 된다.

태그를 알면 홈페이지를 만드는데 많은 도움이 되는가?

매우 도움이 된다.
그렇다.
도움은 무슨 도움 몰라도 된다.

태그를 알면 홈페이지를 만드는데 많은 도움이 되는가?

매우 도움이 된다.
그렇다.
도움은 무슨 도움 몰라도 된다.

태그를 알면 홈페이지를 만드는데 많은 도움이 되는가?

매우 도움이 된다.
그렇다.
도움은 무슨 도움 몰라도 된다.

속성 중 start를 사용 하면 시작 번호를 지정 할 수 있습니다.(예제 start=3)

HTML
태그
레퍼런스
태그란?
글세 몰까?
음~~~~~~~~~
그건.....
강좌를 마칠때즈음 알 수 있을 것 같군요

<UL>

▣원어 : Unordered List / 시작태그:필요 함 / 종료태그:필요 함
비 순서형 목록을 설정하며, Type에서 지정한 기호가 목록 앞에 붙습니다.

▣속성
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상
• compact
-----디렉토리 목록을 간단하게 보이게 보이게 합니다. IE 3.0,N 3.0 이상
• src="urv"
-----기호로 사용될 이미지 파일을 지정 IE 3.0,N 3.0 이상
• type="값" (값 = disc / square / circle)
-----항목앞에 붙는 기호를 지정 하며, disk(●), square(■), circle(○)입니다. IE 3.0,N 3.0 이상

예제:

위의 결과는 다음과 같습니다.

국내 검색 엔진

네이버
야후
다음

여기에 있는 것들

자바 스크립트
스타일 시트
태그 레퍼런스

나의 보물

가족
국가
동대문(__ 보물 제1호:지금은 흥인지문)

<LI>

▣원어 : List Item / 시작태그:필요 함 / 종료태그:필요 없음
모든 목록들에 항목을 추가하는 태그 입니다.

▣속성
• class="클래스 이름"
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우져에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상
• type="값" (값 = disk / square / circle / 1 / A / i / I(대문자i))
-----항목들의 앞에 붙는 기호를 설정. IE 3.0,N 3.0 이상
• value="시작 번호"
-----순서형 목록에서 처음 시작하는 번호를 지정. <OL>태그의 start속성도 같은 기능. IE 3.0,N 3.0 이상

예제:

<html>
<head>
<title>LI 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
국내 검색 엔진
<OL Type=1>
<Li>야후
<Li>엠파스
<Li>다음
</OL>
다음으론
<OL Type=1>
<Li value=4>알타비스타
<Li>네이버
<Li>한미르
</OL>
</body>
</html>

결과에서 보면 순서형 목록에서 번호가 끊어지고 다시 시작할때 value=4로 다시 시작합니다.

국내 검색 엔진

야후
엠파스
다음

다음으론

알타비스타
네이버
한미르

양식과 관련있는 태그

<BUTTON> <FIELDSET> <FORM> <INPUT> <LABLE> <LEGEND> <OPTION> <SELECT> <TEXTAREA>

▣원어 : push BUTTON / 시작태그:필요 함 / 종료태그:필요 함
홈페이지에 단추를 만듭니다. 단추는 BUTTON, SUBMIT, RESET으로 용도에 따라 사용 합니다.

▣속성
• accesskey=알파벳
-----버튼에 키를 지정합니다. IE 4.0 이상
• class=클래스 이름
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0 이상
• disabled
-----버튼이 비활성화 됩니다. IE 4.0 이상
• id=id 이름
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0 이상
• name=이름
-----버튼에 이름을 붙이며, 입력 값은 양식 처리기에 의해 처리됩니다. IE 4.0 이상
• style=스타일 시트 입력
-----적용될 스타일 시트를 지정 IE 4.0 이상
• tabindex=숫자
-----탭 입력의 순서를 설정합니다. IE 4.0 이상
• title=제목
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시. IE 4.0 이상
• type=값 (값 = submit / reset / button)
-----submit(입력된 값을 CGI프로그램으로 전송), reset(입력된 값을 초기화), button(버튼에 스크립트의 이벤트를 연결)

예제:

<html>
<head>
<title>BUTTON 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor=white>
<form method=post action=ex.asp>
<table width="500" border="0" cellspacing="0" cellpadding="0" align="center">

<tr>
<td align="center" colspan=3>
<button type="submit" name="button1" value="Submit">서브밋</button>
<button type="reset" name="button2" value="Reset">리셋</button>
<button type="button" name="button3" value="Button">버튼</button></br>
<button type="button" name="button4" value="Button">버튼에 새겨지는 이름은 태그 사이에</button>
</td>
</tr>
</table>
</form>
</body>
</html>

button 태그는 value값에 의해서 버튼에 글이 새겨지는 것이 아니라 button태그 사이에 버튼에 들어갈 글을 설정합니다.

▣원어 : form control FIELDSET / 시작태그:필요 함 / 종료태그:필요 함
여러개의 양식을 하나의 그룹으로 묶는 기능을 합니다.

▣속성
• class=클래스 이름
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id=id 이름
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style=스타일 시트 입력
-----적용될 스타일 시트를 지정 IE 4.0, N 4.0 이상
• title=제목
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시. IE 4.0, N 4.0 이상

예제:

<html>
<head>
<title>FIELDSET 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor=white>
<form method=post action=ex.asp>
<FIELDSET>
<LEGEND>학 교</LEGEND>
<select name="search1">
<option>1학년
<option>2학년
<option>3학년
<option selected>초등학교
</select>
<select name="search2">
<option>1학년
<option>2학년
<option>3학년
<option selected>중학교
</select>
<select name="search3">
<option>1학년
<option>2학년
<option>3학년
<option selected>고등학교
</select>
</FIELDSET>
</form>
</body>
</html>

결과를 보시면 <FIELDSET>태그 안에서 그룹화 된 것을 알 수 있습니다.

학 교

<FORM>

▣원어 : interactive FORM / 시작태그:필요 함 / 종료태그:필요 함
양식을 설정하는 태그로서 단독으로 사용할 수 없습니다. <BUTTON> <INPUT> <TEXTAREA> <SELECT> 등의 태그가 <FORM> 태그 안에서 사용됩니다.

▣속성
• accept=mime형식
-----mime 형식을 컴마로 구분하여 설정합니다. IE 4.0, N 4.0 이상
• action=CGI 프로그램 이름
-----양식을 처리할 프로그램의 경로를 지정합니다. IE 3.0, N 3.0 이상
• class=클래스 이름
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• enctype=mime 형식
-----양식을 서버에 전송하는데 사용되는 mime형식을 설정하며, 기본적으로application/x-www-form-utlen-coded 입니다. IE 4.0, N 4.0 이상
• id=id 이름
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• method=값 (값 = post / get)
-----양식을 처리할 프로그램으로 전송될 방법을 설정합니다. post는 값을 히든으로 전송하며 get은 url뒤에 쿼리스트링 형식으로 전송 합니다. IE 3.0, N 3.0 이상
• name=이름
-----양식 폼에 이름을 지정 합니다. IE 3.0 이상
• style=스타일 시트 입력
-----적용될 스타일 시트를 지정 IE 4.0, N 4.0 이상
• target=프레임 이름
-----양식에서 전송한 결과를 타겟으로 지정된 곳에서 출력 합니다. IE 4.0, N 4.0 이상
• title=제목
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시. IE 4.0, N 4.0 이상

예제:

<html>
<head>
<title>FORM 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor=white>
<form method=post action=ex.asp>

<table width="500" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<div align="center">
<button type="submit" name="button1" value="Submit">Submit</button>
</div>
</td>
<td>
<div align="center">
<button type="reset" name="button2" value="Reset">Reset</button>
</div>
</td>
<td>
<div align="center">
<button type="button" name="button3" value="Button">Button</button>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>

<INPUT>

▣원어 : form control INPUT / 시작태그:필요 함 / 종료태그:사용 금지
양식을 만드는 태그입니다. 속성에 따라 여러 가지 모양의 양식을 나타낼 수 있습니다.

▣속성
• accept=mime형식
-----mime 형식을 컴마로 구분하여 설정합니다. IE 4.0, N 4.0 이상
• checked
-----type 속성이 radio, checkbox 일 경우, true로 지정합니다. IE 3.0, N 3.0 이상
• class=클래스 이름
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• datasrc=url
-----바인딩을 위한 데이터 소스를 지정 합니다. IE 4.0 이상
• datafld=열이름
-----datasrc 속성에서 지정한 데이터 소스의 표에서 열을 선택 IE 4.0 이상
• disabled
-----type 속성이 radio, checkbox 일 경우 비활성화 됩니다. IE 3.0, N 3.0 이상
• id=id 이름
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• maxlength=숫자
-----입력할 수 있는 최대 글자수를 설정 합니다. IE 3.0, N 3.0 이상
• name=이름
-----양식에 이름을 지정 합니다. IE 3.0, N 3.0 이상
• notab
-----탭 순서에서 해당 양식을 제외 IE 3.0 이상
• readonly
-----해당 양식을 읽을 수만 있고 입력이나 수정은 할 수 없습니다. IE 4.0, N 4.0 이상
• size=숫자 / 픽셀
-----text나 password의 경우에 설정된 크기에 따라 화면에 입력란의 크기가 결정됩니다. IE 3.0, N 3.0 이상
• src=image 파일 이름
-----type 속성이 image일 경우에 삽입될 이미지를 지정합니다. IE 3.0, N 3.0 이상
• style=스타일 시트 입력
-----적용될 스타일 시트를 지정 IE 4.0, N 4.0 이상
• title=제목
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시. IE 4.0, N 4.0 이상
• type=값 (값 = text / password / checkbox / radio / submit / reset / file / hidden / image / button)
-----양식의 형태를 결정합니다.

예제:

<html>
<head>
<title>INPUT 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor=white>
<form name=form>
<table width="600" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="100">Text</td>
<td><input type="text">텍스트 입력창</td>
</tr>
<tr><td width="100">Password</td>
<td><input type="password">패스워드 입력시 * 로 보이지 않게함</td>
</tr>
<tr><td width="100">Checkbox</td>
<td><input type="checkbox" name="checkbox" value="checkbox">다중체크기능</td>
</tr>
<tr>
<td width="100">Radio</td>
<td><input type="radio" name="radiobutton" value="radiobutton">체크를 하는 기능</td>
</tr>
<tr>
<td width="100">Submit</td>
<td><input type="submit" name="Submit" value="Submit"> 양식에 입력된 값을 .asp나 .jsp등 에 전송</td>
</tr>
<tr>
<td width="100">Reset</td>
<td><input type="reset" value="reset">양식에 입력된 값을 초기화</td>
</tr>
<tr>
<td width="100">File</td>
<td><input type="file"></td>
</tr>
<tr>
<td width="100">Hidden</td>
<td><input type="hidden">값이 보이지 않게함</td>
</tr>
<tr>
<td width="100">Image</td>
<td><input type="image" src="images/rangsred.gif" name="image">이미지로 버튼 사용시</td>
</tr>
<tr>
<td width="100">Button</td>
<td><input type="button" value="button">스크립트의 이벤트 사용시</td>
</tr>
</table>
</form>
</body>
</html>

태그가 안먹어서 결과는 메모장에다 복사해서 웹파일이로 만들어서 보세요...

<LABEL>

▣원어 : form field LABEL text / 시작태그:필요 함 / 종료태그:필요 함
양식의 한 부분에 자세한 정보를 나타내고자 할때 사용합니다.

▣속성
• accesskey=알파벳
-----해당 부분에 키를 지정합니다. IE 4.0, N 4.0 이상
• class=클래스 이름
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• for=속성값
-----id 속성의ㅡ 속성값을 지정 합니다. IE 4.0, N 4.0 이상
• id=id 이름
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style=스타일 시트 입력
-----적용될 스타일 시트를 지정 IE 4.0, N 4.0 이상
• tabindex=숫자
-----탭 입력의 순서를 지정 합니다. IE 4.0, N 4.0 이상
• title=제목
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시. IE 4.0, N 4.0 이상

예제:

<html>
<head>
<title>LABEL 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor=white>
<table width="500" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="100"><label for="name">이름</label></td>
<td><input type="text" name="u_name" id="name"></td>
</tr>
<tr>
<td width="100"><label for="id">아이디</label></td>
<td><input type="text" name="u_id" id="id"></td>
</tr>
<tr>
<td width="100"><label for="pwd">비밀번호</label></td>
<td><input type="password" name="password" id="pwd"></td>
</tr>
</table>
</body>
</html>

<FORM>태그가 안먹어서 결과는 메모장에다 복사해서 웹파일이로 만들어서 보세요...

▣원어 : fieldset LEGEND / 시작태그:필요 함 / 종료태그:필요 함
<FIELDSET>에서 그룹 지어진 곳에 이름을 붙이는 태그입니다.

▣속성
• align=값 (값 = top / bottom / left / right)
-----제목이 어느 부분에 올 것인지를 설정 합니다. IE 4.0, N 4.0 이상
• class=클래스 이름
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• id=id 이름
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• style=스타일 시트 입력
-----적용될 스타일 시트를 지정 IE 4.0, N 4.0 이상
• title=제목
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시. IE 4.0, N 4.0 이상

예제:

<html>
<head>
<title>LEGEND 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor=white>
<form method=post action=ex.asp>
<FIELDSET>
<LEGEND>개인신상</LEGEND>
<select name="search1">
<option>1학년
<option>2학년
<option>3학년
<option selected>초등학교
</select>
<select name="search2">
<option>1학년
<option>2학년
<option>3학년
<option selected>중학교
</select>
<select name="search3">
<option>1학년
<option>2학년
<option>3학년
<option selected>고등학교
</select>
</FIELDSET>
<FIELDSET>
<LEGEND align=center>학력(align=center)</LEGEND>
<select name="search1">
<option>1학년
<option>2학년
<option>3학년
<option selected>초등학교
</select>
<select name="search2">
<option>1학년
<option>2학년
<option>3학년
<option selected>중학교
</select>
<select name="search3">
<option>1학년
<option>2학년
<option>3학년
<option selected>고등학교
</select>
</FIELDSET>
</form>
</body>
</html>

결과를 보시면...

학 교

학 교(align=center)

▣원어 : OPTION / 시작태그:필요 함 / 종료태그:필요 없음
이태그는 <SELECT>태그에서 목록에 항목을 만드는 태그입니다.

▣속성
• class=클래스 이름
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• disabled
-----항목을 선택하지 못하게 합니다. IE 4.0, N 4.0 이상
• id=id 이름
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• selected
-----항목이 처음부터 선택되게 합니다. IE 3.0, N 3.0 이상
• title=제목
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시. IE 4.0, N 4.0 이상
• value=해당 데이터
-----항목을 선택할 경우 보내질 데이터를 설정합니다. IE 3.0, N 3.0 이상

예제:

<html>
<head>
<title>OPTION 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor=white>
<select name="search">
<option>HTML
<option>태그
<option>CSS
<option>자바 스크립트
<option selected>랑스의 웹 블로그
</select>
</body>
</html>

결과
option 에서 selected 되어 있다면 기본적으로 가장 먼저 선택되어있습니다.

▣원어 : SELECTor / 시작태그:필요 함 / 종료태그:필요 함
드롭다운 박스에 의한 선택형 메뉴를 만듭니다.

▣속성
• accesskey=알파벳
-----해당 부분에 키를 지정합니다. IE 4.0, N 4.0 이상
• class=클래스 이름
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• datasrc=url
-----바인딩을 위한 데이터 소스를 지정 합니다. IE 4.0 이상
• datafld=열 이름
-----datasrc 속성에서 지정한 데이터 소스의 표에서 열을 선택 IE 4.0 이상
• disabled
-----선택형 메뉴를 사용하지 못하게 합니다. IE 4.0, N 4.0 이상
• id=id 이름
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• multiple
-----선택형 메뉴의 항목을 여러개 선택할 수 있도록 합니다. IE 3.0, N 3.0 이상
• name=이름
-----선택형 메뉴에 이름을 지정 합니다. IE 3.0, N 3.0 이상
• size=개수
-----메뉴 내의 항목의 개수를 설정 합니다. IE 3.0, N 3.0 이상
• style=스타일 시트 입력
-----적용될 스타일 시트를 지정 IE 4.0, N 4.0 이상
• tabindex=숫자
-----탭 입력의 순서를 지정 합니다. IE 4.0, N 4.0 이상
• title=제목
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시. IE 4.0, N 4.0 이상

예제:

<html>
<head>
<title>SELECT 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor=white>
<select name="search" style=background:orange>
<option>HTML
<option>태그
<option>CSS
<option>자바 스크립트
<option selected>랑스의 웹 블로그
</select>
</body>
</html>

결과
option 에서 selected 되어 있다면 기본적으로 가장 먼저 선택되어있습니다.

▣원어 : multi-line text field(TEXTAREA) / 시작태그:필요 함 / 종료태그:필요 함
게시판이나 기타 여러 줄을 입력할 수 있는 양식 폼을 만드는 태그입니다.

▣속성
• accesskey=알파벳
-----해당 부분에 키를 지정합니다. IE 4.0, N 4.0 이상
• class=클래스 이름
-----스타일 시트에 의해 정의된 서식을 적용. 홈페이지 안에서 여러번 사용할 수 있습니다. IE 4.0, N 4.0 이상
• cols=숫자
-----텍스트 입력란의 한 행에 입력될 문자 수 IE 3.0, N 3.0 이상
• datasrc=url
-----바인딩을 위한 데이터 소스를 지정 합니다. IE 4.0 이상
• datafld=열이름
-----datasrc 속성에서 지정한 데이터 소스의 표에서 열을 선택 IE 4.0 이상
• disabled
-----텍스트 입력란을 사용하지 못하게 합니다. IE 4.0, N 4.0 이상
• id=id 이름
-----class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다. IE 4.0, N 4.0 이상
• name=이름
-----양식에 이름을 지정 합니다. IE 3.0, N 3.0 이상
• readonly
-----해당 양식을 읽을 수만 있고 입력이나 수정은 할 수 없습니다. IE 4.0, N 4.0 이상
• rows=숫자
-----입력란의 입력될 줄 수 IE 3.0, N 3.0 이상
• style=스타일 시트 입력
-----적용될 스타일 시트를 지정 IE 4.0, N 4.0 이상
• tabindex=숫자
-----탭 입력의 순서를 지정 합니다. IE 4.0, N 4.0 이상
• title=제목
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시. IE 4.0, N 4.0 이상

예제:

<html>
<head>
<title>TEXTAREA 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor=white>
<table width="500" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="250">
<div align="center">
<textarea rows=10 cols=30>글을 쓸 수 있는 양식을 만듭니다--지워 보세요--</textarea>
</div>
</td>
<td width="250">
<div align="center">
<textarea rows=10 cols=30 readonly>글 읽기만 가능 합니다--지워 보세요--</textarea>
</div>
</td>
</tr>
</table>
</body>
</html>

'수업 공지사항 > [2011-1]인터넷PGM' 카테고리의 다른 글

인터넷프로그래밍 수시평가 2 (0)	2011/06/03
인터넷프로그래밍 수시평가 1 (0)	2011/06/01
인터넷프로그래밍 Report 1 - Web Form (0)	2011/05/27
인터넷프로그래밍 강의자료 (0)	2011/05/04
HTML 기본 (0)	2011/04/13
인터넷프로그래밍 특허참고 (0)	2011/04/05

Posted by Columbus

HTML

Trackback 0 Comment 0

2011/04/05 01:19

인터넷프로그래밍 특허참고

2011/04/05 01:19 in 수업 공지사항/[2011-1]인터넷PGM

인터넷 프로그래밍 교과목 참고자료 : 국내 등록 특허

[등록특허]TV시청중 인터넷을 검색하는 장치 .pdf

[등록특허]인터넷 망을 이용한 장례 서비스 .pdf

[등록특허]인터넷을 이용한 수준별 다자간 .pdf

[등록특허]전자메일, 인터넷 타겟 직접마케.pdf

여기까지 중간고사

RFID와 통신망을 이용한 이동체 위치 확인 서.pdf

가로등 통신망을 이용한 자전거 관리 시스템.pdf

스마트 서버를 이용한 가전 기기의 제어 방.pdf

운세 정보를 이용한 사회 관계 관리 시스템 .pdf

음악칫솔.pdf

이기종 단말기간 동기화된 인터넷 페이지를 .pdf

전력선 통신망을 이용한 긴급호출 관리 시스.pdf

지피에스 및 전자지도를 이용한 관광 가이드.pdf

홈 네트워크를 이용한 스마트 세탁기의 제어.pdf

'수업 공지사항 > [2011-1]인터넷PGM' 카테고리의 다른 글

인터넷프로그래밍 수시평가 2 (0)	2011/06/03
인터넷프로그래밍 수시평가 1 (0)	2011/06/01
인터넷프로그래밍 Report 1 - Web Form (0)	2011/05/27
인터넷프로그래밍 강의자료 (0)	2011/05/04
HTML 기본 (0)	2011/04/13
인터넷프로그래밍 특허참고 (0)	2011/04/05

Posted by Columbus

ip, 인터넷프로그래밍, 특허

Trackback 0 Comment 0

Prev 1 Next next

태터데스크 관리자

태터데스크 메시지

Logistory

'수업 공지사항/[2011-1]인터넷PGM'에 해당되는 글 7건

인터넷프로그래밍 수시평가 3

'수업 공지사항 > [2011-1]인터넷PGM' 카테고리의 다른 글

Trackback : http://www.logistory.com/trackback/416

인터넷프로그래밍 수시평가 2

'수업 공지사항 > [2011-1]인터넷PGM' 카테고리의 다른 글

Trackback : http://www.logistory.com/trackback/414

인터넷프로그래밍 수시평가 1

'수업 공지사항 > [2011-1]인터넷PGM' 카테고리의 다른 글

Trackback : http://www.logistory.com/trackback/413

인터넷프로그래밍 Report 1 - Web Form

'수업 공지사항 > [2011-1]인터넷PGM' 카테고리의 다른 글

Trackback : http://www.logistory.com/trackback/410

인터넷프로그래밍 강의자료

'수업 공지사항 > [2011-1]인터넷PGM' 카테고리의 다른 글

Trackback : http://www.logistory.com/trackback/402

HTML 기본

H1 크기

H2 크기

H3 크기

H4 크기

H5 크기

H6 크기

'수업 공지사항 > [2011-1]인터넷PGM' 카테고리의 다른 글

Trackback : http://www.logistory.com/trackback/398

인터넷프로그래밍 특허참고

'수업 공지사항 > [2011-1]인터넷PGM' 카테고리의 다른 글

Trackback : http://www.logistory.com/trackback/391

Notice

Category

Recent Comment

Recent Article

Recent Trackback

My Link