HTML &JAVASCRIPT.

Slides:

Advertisements

Similar presentations

HTML.  Hyper Text Markup Language  Hyper Text : Link  Markup :  전용 브라우저 (IE, Netscape, Opera..)  프로그램 + 실행 환경 ( 실행기 )

Advertisements

홈페이지 만들기. Cyber 공간에서 자신이 갖고 있는 정보 나 관심사를 다른 사람들에게 체계적으 로 공개하거나, 시간과 장소에 구애 받지 않고 정보화 시대에 발맞춰 자신을 어필 할 수 있음.

HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기.

XHTML Basic 제 13 장 1. XHTML Basic의 개요 2. XHTML Basic 기본 문법 3. 표 만들기

일시 : 2002년 6월 18일 주관 : 한국 기독교 장로회 경기 노회 정보통신부 강사 : 한창희

홈페이지 제작 과정 강사: 정희영.

HTML 기초와 활용.

HTML5 웹 프로그래밍 입문 (개정판) 3장. 링크와 멀티미디어.

2002/3/20 HTML 2002/3/20

06장. <A> 태그로 하이퍼링크 설정하기

CHAPTER 4. CSS 스타일시트 기초.

HTML과 CSS HTML과 CSS 세미나에 오신 것을 환영합니다.

10장 동적 HTML (Dynamic HTML)

HTML & CSS 겉핥기 2012 SUMMER SPARCS.

HTML5 웹 프로그래밍 입문 (개정판) 4장. CSS3 스타일시트 기초.

HTML과 CGI 프로그래밍 PHP 웹 프로그래밍 (PHP Web Programming) 문양세

예방접종 정보 SITE.

MySQL 연동 PHP 프로그래밍 기초 순천향대학교 정보기술공학부 이상정.

1 HTML5 개요.

11장 방명록 한빛미디어(주).

UIT Series HTML + JavaScript [Chapter 1] Html을 이용한 웹 페이지 만들기.

2 서블릿의 기초.

9장. 요청 흐름제어와 모듈화 #1: <jsp:forward> 액션태그 사용

10장. 에러 처리 제10장.

JSP 내장 객체 개요 내장 객체 (참조 변수 이름) 자바 클래스 주요 역할

Web Server와 DB 연동.

이 름: 정홍도 (과장) 팀 명: 개발사업팀 일 자:

HTML 1 멀티미디어 저작 도구 I (드림 위버 CS3).

JavaScript 객체 전 혜 영.

CHAPTER 5. CSS 박스모델과 응용.

HTML5 웹 프로그래밍 입문(교수용) 2장.HTML5 문서의 기본.

3 웹 페이지를 디자인하는 CSS 다루기 CSS로 예쁜 웹 문서를 만들어보자!.

HTML과 TAG 편집 ※ 01/ 태이블 태그 소스 (태이블 편집)

학습목표 학습목차 Table 태그를 이용하여 표 만들기를 이해할 수 있습니다.

CSS – 개요 Cascading Style Sheets의 약자 “계단형 스타일시트”라고 한다.

HTML5 웹 프로그래밍 입문 (개정판) 5장. 고급 표현을 위한 CSS3 활용.

홈페이지 만들기 HTML HyperText Markup Language 홈페이지를 만들 때 사용하는 언어

07장. <TABLE> 태그로 표 디자인하기

5. JSP의 내장객체1.

6부 WML/WML2.0 언어배우기 6-1 WML에 대해서 6-2 WML 기본 태그 6-3 글과 그림 삽입에 관련된 태그

5부 mHTML/KUN언어 배우기 5-1 mHTML과 KUN에 대해서 5-2 mHTML 기본태그

HTML5+CSS3 실무 테크닉 김은기 저.

16장 설문조사 한빛미디어(주).

HTML5 웹 프로그래밍 입문 (개정판) 2장. HTML5 문서의 기본.

글꼴관련 태그 오산대학 컴퓨터정보과 김 영 권.

문단 관련 태그 위지윅과 특수문자 <BODY> 태그로 컬러 문서 만들기 글꼴 관련 태그 목록 관련 태그

학습목표 학습목차 홈페이지에 색상을 표현하는 방법 이해할 수 있습니다.

CSS Layout Chapter 6 Part 1

9장 웹 사이트 초기 화면 제작 한빛미디어(주).

HTML CSS 자바스크립트 무작정 따라하기

CGI (Common Gateway Interface)

Chapter07 CSS3 글꼴과 문자 HTML5 Programming.

HTML 문서 작성 PART 1 Chapter 2 Part 1

HTML CSS 자바스크립트 무작정 따라하기

HTML CSS 자바스크립트 무작정 따라하기

HTML 문서 작성 PART 2 Chapter 2 Part 2

폼 관련 태그 폼 양식 직접 만들어보기 회원가입 절차 4단계

CGI (Common Gateway Interface)

12장 자유게시판 한빛미디어(주).

17장 웹 사이트 제작 완성 한빛미디어(주).

문서작성에 사용되는 기본태그 MARQUEE, A.

ASP 수행 화면(1).

세션 (Session) Yang-Sae Moon Department of Computer Science

Chapter03 HTML 포토앨범 만들기

Chapter02 HTML 자기소개서 작성하기

문서 작성에 사용되는 기본태그 HR, PRE, B, I, U, S.

HTML HTML 기본 구조와 태그 다양한 태그 다루기

Web & Internet [10] 입문 – input 태그

Presentation transcript:

HTML &JAVASCRIPT

(1) HTML의 개념 - hypertext markup language의 약자 - 월드 와이드 웹에서 하이퍼텍스트 문서를 만들기 위한 기본언어 1) HTML의 특징 - HTML문서의 골격은 태그의 쌍으로 구성된다. <태그이름>문서의 내용</태그이름> - 태그 중에는 <BR>, <IMG>처럼 종료 태그가 없는 경우도 있다. - 태그는 대소문자를 구분하지 않는다. (2) HTML의 기본 구조 및 태그 1) 태그구조 : HTML의 기본 구조를 이루는 태그 <HTML> <HEAD> 문서정보 </HEAD> <BODY> 실제로 표시되는 문서의 내용 </BODY> </HTML> <HTML> ~ </HTML>: HTML로 작성된 것을 표시, HTML의 시작을 의미. <HEAD> ~ </HEAD> : 문서정보 기술, 문서 전체에 영향을 미치는 내용으로 화면에는 출력되지 않음. <BODY> ~ </BODY> : 실질적인 웹 페이지 내용 삽입, 이 태그 안의 내용은 모두 화면에 출력 됨. 2) <HEAD>내 태그 <TITLE> : 홈페이지의 제목을 설정하는 것으로 브라우저의 제목 표시줄에 표시된다. <STYLE> : 웹 페이지에 서식을 적용시키는 태그로 서식을 설정하는 스타일 시트를 정의한다. <SCRIPT> : Javascript나 Vbscript와 같은 스크립트 언어를 사용하고자 할 때 사용한다.

3) <BODY > 옵션 bgcolor : 배경색을 지정 background : 배경그림을 지정. 배경그림이 지정되면 스타일을 지정하지 않는 한 배경색은 나타나지 않는다. link : 하이퍼링크 된 문자나 그림 테두리의 색을 지정. 기본 색은 파란색 text : 기본 문자색을 지정한다. 기본 색은 검은색 vlink : 이미 본 페이지의 하이퍼링크 된 곳의 색을 지정. 기본 색은 보라색 alink : 마우스로 클릭동작을 행할 때의 색을 지정. 기본 색은 빨간색 topmargin : 전체 화면의 위쪽 여백을 설정 leftmargin : 전체 화면의 좌측 여백을 설정 onload : 문서가 다 로드 되었을 때 처리되는 스크립트를 지정 (3) 도큐먼트 1) <TITLE> 홈페이지의 제목을 설정하는 것으로 브라우저의 제목 표시줄에 표시된다. 브라우저의 즐겨 찾기에 추가 시 홈페이지의 제목으로 이름이 지정된다. Source 실행화면 <HTML> <HEAD> <TITLE> 홍길동의 홈페이지</TITLE> </HEAD> <BODY> Hello! </BODY> </HTML>

2) 코멘트(주석문) 홈페이지 소스가 복잡할 경우 설명이 필요한 부분에 주석을 삽입한다. 주석을 사용하면 홈페이지의 수정이 용이 하다. 로 끝난다. 주석처리 된 것은 홈페이지에 나타나지 않는다. Source 실행화면 <BODY>  홈페이지 강좌를 시작했습니다. </BODY>

(1) 페이지 - 실질적인 홈페이지의 내용이 삽입되는 부분이다 (1) 페이지 - 실질적인 홈페이지의 내용이 삽입되는 부분이다. - <BODY>태그에서 사용되는 속성들은 본문 전체에 영향을 미친다. - <BODY>태그 옵션으로 배경이나 텍스트, 링크를 표시하는 부분의 색을 각각 지정할 수 있다. 1) 배경색 지정 <BODY BGCOLOR=”color”>~</BODY> color=#RRGGBB 또는 colorname <BODY>태그를 이용하여 페이지의 배경색을 지정한다. 색 지정에는 6자리 16진수 표기 앞에 #을 붙이거나 색 이름을 입력한다. 예) <body bgcolor=”#0000FF”> : 배경색이 파란색으로 지정된다. ※ 아래의 소스를 메모장에 입력하고 ‘파일이름.HTML’로 저장하여 익스플로러로 실행하여 보시기 바랍니다. Source 실행화면 <HTML> <HEAD> <TITLE>홍길동의 홈페이지</TITLE> </HEAD> <BODY bgcolor="#0000FF"> <font color="white"> 배경색을 파란색으로...</font> </BODY> </HTML>

2)<BODY>태그를 이용하여 페이지의 텍스트 색을 지정한다. <BODY TEXT=”color”>~</BODY> : 표준 텍스트 색 <BODY LINK=”color”>~</BODY> : 링크 부분의 색 <BODY ALINK=”color”>~</BODY> : 링크를 클릭한 순간부터 데이터를 읽어오고 있는 도중의 색 <BODY VLINK=”color”>~</BODY> : 이미 읽어온 페이지 링크 부분의 색(Visited Link) color=#RRGGBB 또는 colorname ① 텍스트나 링크를 표시하는 부분의 색을 지정하는 태그이다. 예) <body bgcolor="white" text="black" link="blue" vlink="gray" alink="red"> : 배경색은 흰색, 기본텍스트는 검정색, 링크된 텍스트는 파란색, 링크된 텍스트를 클릭했을 때의 색상은 빨강색, 방문한 링크 텍스트는 회색으로 지정 Source 실행화면 <html> <head><title>홍길동의 홈페이지</title></head> <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#808080" alink="#ff00ff"> <p>표준 텍스트는 검정색으로<br> <a href="link1.html">링크되어 있으며 방문하지 않은 페이지는 파란색으로</a><br> <a href="link2.html">링크되어 있으며 이미 방문한 페이지는 회색으로</a> </p> </body> </html>

3)<BODY>태그를 이용하여 페이지의 배경 이미지를 지정한다. <BODY BACKGROUND =”이미지 파일명”> <BODY BACKGROUND =”이미지 파일명” BGPROPERTIES=FIXED> : 배경패턴 고정 읽어온 이미지는 연속적으로 타일 모양으로 표시된다. 배경이미지로만 지정될 뿐 body내의 텍스트 입력이나 표 삽입등에는 전혀 영향을 주지 않는다. BGPROPERTIES=FIXED를 함께 써주면 화면을 위아래로 오른쪽으로 스크롤 해도 배경 이미지는 고정된 채 움직이지 않는다. 예) <body background="flower.jpg"> : 페이지에 배경이미지를 flower.jpg로 지정 Source 실행화면 <html> <head> <title>홍길동의 홈페이지</title> </head> <body background="flower.jpg"></body> </html>

4) <BODY>태그를 이용하여 페이지 여백을 설정 한다. <BODY LEFTMARGIN=”num”>~</BODY> <BODY TOPMARGIN=”num”>~</BODY> num=픽셀수 페이지 전체에 걸쳐 왼쪽 혹은 위의 여백 폭을 설정한다. ② 디폴트 마진은 무효가 되고, 0을 지정하면 왼쪽(위)끝에 정렬된다. 예) <BODY LEFTMARGIN=”60” TOPMARGIN=”10”></BODY> Source 실행화면 <html> <head><title>홍길동의 홈페이지</title></head> <body leftmargin="60" topmargin="10"> <p>이 페이지 여백은 왼쪽 60픽셀, 위 10픽셀입니다.</p> </body> </html> 5) 가로선을 지정 한다. <HR option> option SIZE=”X” 선의 굵기(픽셀수) WIDTH=”X" 선의 길이(픽셀수나 %) ALIGN=”left" 정렬 방식(LEFT,RIGHT,CENTER) NOSHADE 그림자 없음

<title>홍길동의 홈페이지</title> </head> <body> ①문서의 중간에 수평선을 그어 문단을 분리시킨다. Source 실행화면 <html> <head> <title>홍길동의 홈페이지</title> </head> <body> 1. 속성 없이 사용할 때 <hr><p> 2. 수평선의 두께가 12일때 <hr size="12"><p> 3.그림자가 없을 때 <hr noshade><p> 4. 수평선 두께가 15이고 폭이 브라우저 화면의 50%, 왼쪽 정렬일 때 <hr size="15" width="50%" align=left><p> 5. 수평선 두께가 30이고, 폭이 100픽셀, 그림자가 없을 때 <hr size=30 width=100px noshade><p> </body> </html>

(1) 텍스트 1) <BR> 본문 중 텍스트의 줄 바꾸기를 한다. 이 태그는 시작 태그만 사용한다. Source에서 줄을 바꾸(‘바꾸기’ 다음)어도 브라우저에는 영향을 주지 않는다. Source 실행화면 <HTML> <HEAD><TITLE><br>태그 사용하기</TITLE> </HEAD> <BODY> 여기서<br>줄 바꾸기 합니다. </BODY> </HTML> 2) <P> 문서의 단락을 나눌 때 사용한다. 텍스트의 줄이 바뀌면서 한 줄을 띄운다 Source 실행화면 <HTML> <HEAD> <TITLE><p>태그 사용하기</TITLE> </HEAD> <BODY> 단락을 나눠보자.<p>단락이 나눠질 뿐 아니라 한 줄 띄어진다. </BODY> </HTML>

3) 행 정렬 <P ALIGN=”option”>~</P> option=left, center, right 단락(행)을 정렬할 때 사용한다. 왼쪽정렬, 중간정렬, 오른쪽정렬을 하며, 왼쪽정렬이 표준이다. Source 실행화면 <HTML> <HEAD> <TITLE><p align>태그 사용하기</TITLE> </HEAD> <BODY> <P ALIGN="left">좌로 정렬 <P ALIGN="center">중간 정렬 <P ALIGN="right">우로 정렬 </BODY> </HTML> <Hnum ALIGN=”option”>~</Hnum> num=1~6, option=left, center, right 행 정렬 위치를 설정 할 때 사용한다. ② Num에 문자크기를, 옵션에 위치(좌,우,중간)를 입력한다

Source 실행화면 <HTML> <HEAD> <TITLE> <Hnum align>태그 사용하기 </TITLE> </HEAD> <BODY> <H4 ALIGN="left">문자크기 4, 좌로 정렬</H4> <H5 ALIGN="center"> 문자크기 5, 중간정렬</H5> <H6 ALIGN="right"> 문자크기 6, 우로 정렬</H6> </BODY> </HTML> <DIV ALIGN=”option”>~</DIV> option=left, center, right <DIV>는 특정한 부분을 하나의 그룹으로 정의하는 태그로 문서를 논리적으로 분할한다. 분할된 한 문단에 스타일을 적용할 수 있다. (ID, LANG, CLASS, CLEAR, NOWRAP) ③ <DIV ALIGN>은 정렬 위치를 설정할 때 사용하며, ALIGN 생략 시 left로 지정된다.

Source 실행화면 <HTML> <HEAD> <TITLE><div align>태그 사용하기</TITLE> </HEAD> <BODY> <DIV ALIGN="left">DIV태그를 이용한 행 정렬<br> 왼쪽 정렬</DIV> <p> <DIV ALIGN="center">DIV태그를 이용한 행 정렬<br>가운데 정렬</DIV> </BODY> </HTML> <CENTER> ~ </CENTER> 문단을 가운데 정렬한다. 브라우저 폭에 맞춰 중심에 텍스트나 이미지가 표시된다. 중간에 다른 태그를 넣을 수도 있다. 4) <PRE> ① 문서에 나타나 있는 그대로의(present 현재의) 형태로 문단을 보고자 할 때 사용한다.

Source 실행화면 <HTML> <HEAD><TITLE><pre>태그 사용하기</TITLE> </HEAD><BODY> <PRE> 사 랑 사 랑 사 랑 사 랑 사 랑 사 랑 사 랑 사랑 </PRE> </BODY></HTML> 5) <XMP> ① 문서에 나타나 있는 그대로의 형태로 보여줄 때 사용한다. ② <PRE>와 다른 점은 HTML 태그까지 보여준다는 것이다. Source 실행화면 <HTML> <HEAD><TITLE><xmp>태그 사용하기</TITLE> </HEAD> <BODY> <XMP> <center>가운데 정렬</center> <h2>글자크기 2로 지정</h2> </XMP> </BODY> </HTML>

6) <MARQUEE> <MARQUEE option> ~ </MARQUEE> Option은 아래와 같다. 1. 위치에 관한 것 ㆍALIGN=TOP,MIDDLE,BOTTOM(문자열의 위치) ㆍHEIGHT=픽셀수나 %(문자열의 크기) ㆍWIDTH=픽셀수나 % ㆍHSPACE=픽셀수(문자열의 바깥 여백) ㆍVSPACE=픽셀수 3. 횟수와 시간에 관한 것 ㆍLOOP=num, -1(무한루프), INFINITE ㆍSCROLLDELAY=num : 다시 MARQUEE시킬 때까지의 초수 지정 ㆍSCROLLAMOUNT=num : 텍스트를 다시 MARQUEE시킬 때까지의 픽셀수 지정 2. 움직임에 관한 것 ㆍBEHAVIOR : 텍스트의 흘러가는 형식 - SCROLL : 텍스트가 흘러가다 사라진다. - SLIDE : 텍스트가 흘러가다 마지막에 멈춘다. - ALTERNATE : 텍스트가 양쪽 방향으로 왕복을 한다. ㆍDIRECTION : 텍스트의 흘러갈 방향으로 LEFT, RIGHT가 있다. 4. 색에 관한 것 ㆍBGCOLOR=#RRGGBB, colorname 홈페이지 내에서 텍스트가 어느 한 방향에서 반대 방향으로 흘러가는 동작을 연출한다. ② 익스플로러 전용 태그이다. Source <BODY> <MARQUEE ALIGN=TOP BEHAVIOR=SCROLL DIRECTION=RIGHT SCROLLDELAY=10 SCROLLAMOUNT=10 LOOP=-1>IT POSCO에 오신걸 환영합니다.</MARQUEE> </BODY>

(1) 폰트 1) <Hnum> 문서의 제목에 해당하는 문자열을 나타낼 때 주로 사용한다. Head의 약자로 H1 ~ H6까지 있다. H1이 가장 큰 글자이고, H6이 가장 작은 글자이다. 볼드체가 되며, 태그의 앞뒤는 강제적으로 줄이 바뀌어 스페이스가 들어간다. Source 실행화면 <HTML> <HEAD><TITLE><Hn>태그 사용하기</TITLE> </HEAD> <BODY> <H1>안녕하세요!</H1> <H2>안녕하세요!</H2> <H3>안녕하세요!</H3> <H4>안녕하세요!</H4> <H5>안녕하세요!</H5> <H6>안녕하세요!</H6> </BODY> </HTML> 2) <Font> <FONT SIZE=num>~</font> <FONT COLOR=색상명 또는 #RRGGBB>~</font> <FONT FACE=글꼴 이름>~</font> <FONT SIZE=num COLOR=색상명 또는 #RRGGBB FACE=글꼴>~</font> num=1~7

① size : 문서 내의 해당 문자열의 크기를 지정할 수 있다. - Num 수치가 클수록 문자 크기가 커진다. ② Color : 글자의 색상을 나타낸다. 색상표에 따라 16진수나 색 이름을 입력한다. - 표준 색상 이름 : red, green, gray, white등 예)<font color=”blue”> - 16진수 : FF00FF, 000000, 808080등 예)<font color=”FF00FF”> - RGB%값 : RGB(R:Red, G:Green, B:Blue)라는 함수를 사용하여 백분율 값으로 지정. 예)<font color=RGB(100%, 10%, 20%)> - 0~255까지의 RGB 정수값 : RGB라는 함수를 사용하여 0~255값으로 지정. 예)<font color=RGB(155,127,0)> ③ Face : 글자의 글꼴을 지정한다. - arial, lucida, sans, 궁서, 돋움, 굴림 등 ④ size, color, face를 각각 지정할 수도 있고, 하나의 태그에 함께 사용할 수도 있다 Source 실행화면 <HTML><HEAD> <TITLE><font>태그 사용하기</TITLE></HEAD> <BODY> <font size=2>글자 크기 2입니다.</font><p> <font color=#FF0000>글자색 빨강 입니다.</font><p> <font face=arial>font face is arial.</font><p> <font size=3 color=green>크기, 색상 지정</font><p> <font color=RGB(255,0,0) face=굴림>색상, 글꼴 지정</font><p> <font size= 4 color=RGB(50%,50%,50%) face=궁서>크기, 색상, 글꼴 지정</font><p> </BODY> </HTML>

3) <BaseFont> 12, <BASEFONT SIZE=num COLOR=색상명 또는 #RRGGBB FACE=글꼴 이름> <FONT SIZE=±num COLOR=색상명 또는 #RRGGBB FACE=글꼴 이름> num=1~7 문서 내의 기본 글자의 크기, 색깔, 글꼴 등을 지정해 줌으로써 같은 태그를 반복하는 번거로움을 피할 수 있다. Font size에 ±값을 적용하면 Base font를 기준으로 하여 상대값이 적용되며, font size에 ±없이 값을 입력하면 절대값이 적용된다. Basefont를 지정하고 태그를 종료하지 않으면 지정부분부터 끝까지 basefont가 적용되며 구간을 정하여 지정하고자 한다면 </basefont>로 종료하면 된다. <font>에서와 마찬가지로 size, color, face를 각각 지정할 수도 있고, 하나의 태그에 함께 사용할 수도 있다. Source 실행화면 <HTML> <HEAD> <TITLE><basefont>태그 사용하기</TITLE> </HEAD><BODY> <basefont size=4 color=red face=궁서>기본폰트, 색상, 글꼴 지정<p> 기본폰트 적용되나?<p> <font size=-1 color=gray face=돋움>상대값 적용</font><p> <font size=3 color=green face=굴림>절대값 적용</font><p> 기본폰트 여기도 적용되나?<p> </BODY></HTML>

4) 이탤릭 스타일 태그 ① <I> : Italic을 의미하며 문자를 이탤릭체로 표시한다. ② <EM> : emphasize의 의미로 문서 내의 강조할 부분을 이탤릭체로 보여준다. ③ <CITE> : 책이나 문서에서의 인용문을 나타낼 때 사용한다. ④ <ADDRESS> : 문서를 제작한 회사나 제작사에 대한 정보를 나타낼 때 사용하는 것으로 전화번호, 팩스번호, E-mail주소 등을 나타낸다. ⑤ <VAR> : 컴퓨터 프로그램의 변수 이름을 문서의 중간에 삽입할 때 사용한다. ⑥ <DFN> : Definition을 의미하며, 문자를 정의할 때 사용한다 Source 실행화면 <HTML><HEAD><TITLE> 이탤릭 스타일</TITLE> </HEAD><BODY> <i>이탤릭체를 사용할 때 가장 편리하게 쓸 수 있다</i><p> <em>Emphasize(강조)의 의미가 있다.</em><p> <cite>인용된 경우에 사용한다.</cite><p> <address>E-mail주소, 전화, 팩스번호등을 나타낼 때 쓴다.</address></p> <var>프로그램 변수등에 사용한다.</var><p> <dfn>문자를 정의할 떄 사용한다.</dfn><p> </BODY></HTML> 5) 강조 스타일 태그 ① <B> : 특별히 강조하고 싶은 부분을 진하게 Bold체로 나타낸다. ② <BIG> : 주위의 글자보다 조금 크게 나타낸다. ③ <SMALL> : 주위의 글자보다 조금 작게 나타낸다. ④ <BLINK> : 글자가 깜박인다. ⑤ <S> : 주로 잘못된 글자를 지우지 않고 가운데 줄을 긋는 효과를 주어 표시한다. ⑥ <STRIKE> : <S>와 같은 효과로 글자 중간에 줄을 긋는 효과를 준다. ⑦ <U> : Underline으로 글자 아래에 밑줄을 긋는다. ⑧ <STRONG> : <B>와 같은 효과로 특별히 강조하고 싶은 부분을 진하게 나타낸다

Source 실행화면 <HTML><HEAD><TITLE>강조 스타일</TITLE> </HEAD><BODY> <b>문자를 진하게 강조</b><p> <big>주위 문자보다 조금 크게</big><p> <small>주위 문자보다 조금 작게</small><p> <blink>문자가 깜박인다.(네스케이프에서만 보인다)</blink><p> <s>문자 가운데 줄긋기</s><p> <strike>문자 가운데 줄긋기</strike><p> <u>글자 아래에 밑줄을 긋는다.</u><p> <strong>문자를 진하게 표시</strong> </BODY></HTML> 6) 첨자 스타일 태그 <SUP> : 복잡한 수식이나 원소기호를 나타낼 때 사용하는 것으로 위 첨자를 나타낸다. <SUB> : 복잡한 수식이나 원소기로를 나타낼 때 사용하는 것으로 아래 첨자를 나타낸다. Source 실행화면 <HTML> <HEAD> <TITLE>첨자 스타일</TITLE> </HEAD> <BODY> 물은 H<sub>2</sub>O 이다<p> 방정식 X<sup>2</sup> + Y<sup>2</sup> = Z<sup>2</sup>의 값은? </BODY> </HTML>

7) 그 외 스타일 태그 <TT> : TeleType체로 구식 타자기형의 글꼴을 보여준다. <KBD> : 홈페이지 내에서 특정 키 입력을 설명하고자 할 때 사용한다. ③ <KEB> 태그가 적용되면 글꼴 크기가 2포인트 커진다. ④ <CODE> : 문서 중간에 컴퓨터 프로그램 소스를 삽입할 때 사용한다. Source 실행화면 <HTML><HEAD> <TITLE>그 외 스타일</TITLE> </HEAD><BODY> <tt>타자체의 글자</tt><p> <kbd>그만하려면 Q나 X를 누르세요</kbd><p> 프로그램 코드를 표시한다.<br><code>비주얼 베이직 코드 private a, b as integer</code><p> </BODY></HTML> 8)특수 문자 &키워드, &아스키코드 태그 표기에 사용되는 기호(<,>,&등)나 키보드에서는 입력할 수 없는 문자를 특수폰트라고 부른다. 특수 폰트를 표시하고 싶을 때는 Name Entity라고 불리는 서식을 사용한다. 키워드에는 특정폰트를 표시하는 문자, 아스키코드에는 문자의 아스키코드를 입력. " Quotation mark(“) NoneBreak Space(공백) & Ampersand(&) © Copyright(ⓒ) < Less Than(<) ® Registered trademark(ⓡ) > Greater Than(>)

Source 실행화면 <HTML><HEAD><TITLE>특수폰트</TITLE> </HEAD><BODY> Quotation mark(") : "<p> Ampersand(&) : &<p> Less Than<<) : <<p> Greater Than(>) : ><p> NoneBreak Space(공백) : <p> Copyright(ⓒ) : ©<p> Registered trademark(®) : ®<p> </BODY></HTML>

(1) 리스트 1) <UL> Unordered List로 비순서형 목록을 설정한다. <UL>태그를 사용하고 그 사이의 문장 맨 앞에 <LI>를 열거한다. 위 아래에 스페이스가 들어가고 각 항목에 마크가 붙여진다. 각 항목은 자동적으로 줄 바뀜이 된다. Source 실행화면 <HTML> <HEAD><TITLE><UL>태그 사용하기</TITLE> </HEAD><BODY> <UL> <LI>빨간 장미 <LI>노란 장미 <LI>흰 장미 </UL> </BODY></HTML> ⑤ 리스트의 마크를 변경할 수 있다. <UL TYPE=”OPTION”><LI>~</UL> 또는 <UL><LI TYPE=”OPTION”>~</UL> OPTION=disk(검은색 동그라미), circle(흰색 동그라미), square(검색은 사각형)

Source 실행화면 <UL type="circle"> <LI>html 강좌 <LI>javascript 강좌 <LI>css 강좌 </UL> <UL> <LI type="circle">속이 빈 원형 <LI type="disk">속이 검은 원형 <LI type="square">속이 검은 사각형 </UL> 2) <OL> 11, ①Ordered List로 순서형 목록을 설정한다. ②순서형 목록이라는 것을 제외하고는 <UL>과 같다. Source 실행화면 <BODY> <OL> <LI>windows 98 따라하기 <LI>linux 따라하기 <LI>unix 따라하기 </OL> </BODY> ③목록의 번호 형식을 변경 할 수 있다. <OL TYPE=”option”><LI>~</OL> 또는 <OL><LI TYPE=” option”>~</OL> option =1(계산용 숫자, 표준), a(영문 소문자), A(영문 대문자), i(소문자 로마자), I(대문자 로마자)

Source 실행화면 <OL type=i> <LI>windows 98 따라하기 <LI>linux 따라하기 <LI>unix 따라하기 </OL> <OL> <LI type=a>windows 98 따라하기 <LI type=I>linux 따라하기 <LI type=A>unix 따라하기 ④ 목록의 번호 순서를 변경할 수 있다. <OL start=”시작번호”> ~ </OL> <LI value=”시작번호”> ~ </LI> Source 실행화면 <OL start=4> <LI>항목 A</LI> <LI>항목 B</LI> <LI value=1>항목 C</LI> <LI>항목 D</LI> <LI>항목 F</LI> </OL>

⑤ 목록의 번호 형식과 시작번호를 함께 변경할 수 있다. <OL start=”시작번호”><LI type=option> ~ </OL> <OL start=”시작번호” type=option><LI> ~ </OL> Source 실행화면 <OL start=4> <LI type=A>빨간 장미 <LI type=A>노란 장미 <LI type=A>흰장미 </OL> <OL start=4 type=A> <LI>빨간 장미 <LI>노란 장미 <LI>흰장미 3) <DIR>와 <MENU> <DIR> : 디렉토리 리스트 - 디렉토리형 목록을 설정한다. - 목록 내 항목을 추가할 때는 <LI>를 사용한다. <MENU> : 메뉴 리스트 - 메뉴형 목록을 설정한다. - 목록 내 항목을 추가할 때는 <LI>를 사용한다

Source 실행화면 <DIR>매체의 속성 <LI>상징적 속성 <LI>내용적 속성 </DIR> <MENU>매체의 연구 <LI>매체 비교 연구 <LI>매체 소성 연구 </MENU> 4) <DL> : 정의형 리스트 13, - Definition List로 설명(정의)형 목록을 설정한다. - <DL>로 정의된 목록은 <DT>와 <DD>로 나누어 진다 ① <DT> : 정의되는 말 - 반드시 <DL>안에서 사용되며 목록에 대한 제목이나 설명을 기재한다. ② <DD> : 정의된 말의 의미 - 자동적으로 줄을 바꾸어 주며, 설명목록 안에서 항목을 추가할 때 사용한다. Source 실행화면 <DL> <DT>HTML이란 <DD>HyperText Markup Language의 약자 <DT>VRML이란 <DD>Virtual Reality Markup Language의 약자 </DL>

5) <LI> - 모든 목록들에 세부 항목을 지정할 때 사용한다. Type : 각 항목 앞에 붙이는 기호나 숫자 스타일 Value : 순서형 목록에서 처음 시작하는 번호를 지정하며 끊어진 항목을 다시 시작할 때 유용하다. 6) <BLOCKQUOTE> 외부 문서의 일부를 인용할 때 사용하며 인용된 부분은 들여쓰기가 된다. 많은 양의 텍스트인 경우 더 적절하며 페이지의 좌, 우측으로 여백을 설정하여 준다. Source 실행화면 디지털 컨버전스 (Digital convergence) <blockquote> 디지털 기술을 매개로 컴퓨터, 가전, 통신 등의 여러가지 기기와 기반 기술이 서로 유기적으로 융합되는 현상을 말한다. 디지털 컨버전스는 PC, AV 가전, 휴대폰 등 단말 기기 뿐만 아니라 디지털 정보가 생성, 유통, 재가공, 재생되는 컨텐츠, 네트워크, 서비스 등 다양한 과정에서 일어나고 있다. </blockquote>

(1) 링크 - 문서 연결은 홈페이지의 큰 특징인 하이퍼링크 기능을 수행하는 것이다 (1) 링크 - 문서 연결은 홈페이지의 큰 특징인 하이퍼링크 기능을 수행하는 것이다. - HTML문서뿐만 아니라 다른 웹 소스(이미지, 비디오 클립, 사운드, 프로그램)를 연결 할 수 있다. - HTML문서가 아닌 경우는 지정한 파일을 다운로드할 수 있도록 안내 메시지가 나타난다. 1) <A> - Anchor로 홈페이지 내에 링크를 설정한다. - href와 같이 사용하여 하이퍼링크를 설정한다. 다른 문서로 링크 <A href=”URL”>~</A> - 문자열이나 그림을 다른 HTML문서나 웹 사이트로 링크 시킨다. - URL은 상대경로나 절대경로로 지정 할 수 있다. - 문서가 아닌 웹 소스(이미지, 비디오 클립, 사운드, 프로그램)를 연결 할 수 있다. ※ 상대경로와 절대경로 ▷ 상대경로 : 현재 파일이 있는 위치에서부터 상대적인 위치를 지정하는 것이다. 예를 들면 c:/test/a.htm파일이 있고 c:/e-test/z.htm이 있을 때 a.htm에서 z.htm을 가리키려면 ../e-test/z.htm와 같이 쓸 수 있다. ▷ 절대경로 : 현재 위치가 어디에 있든 상관없이 전체 경로를 지정하는 것이다. 위의 예를 절대 경로로 표시하면 file:///c:/e-test/z.htm과 같이 쓸 수 있다.

Source 실행화면 <HTML><HEAD> 11, <TITLE><A> : 문서연결</TITLE></HEAD> <BODY> <a href="html_ex1.htm">같은 웹사이트 내 다른 문서로 이동</a><p> <a href="http://www.e-test.co.kr/">다른 웹 사이트로의 이동</a><p> <a href="http://www.e-test.co.kr/"><img src="it_posco.jpg" border=0></a><p> <a href="mr.postman.mp3">음악파일</a> </BODY></HTML> ② NAME : 현재 HTML문서의 특정 위치로 링크 9, 14, 15, 10, <A href=”#키워드”>~</A> (링크 거는 지점 지정) <A name=”키워드”>~</A> (링크 되는 지점 지정) - 같은 문서내 특정 위치로 이동한다. - 하나의 문서가 길어 스크롤 해서 보기 힘들 때 사용하면 유용하다. 책갈피를 꽂아 두는 것과 같다. - 링크할 곳(name)에서 같은 키워드를 하나 이상 사용해서는 안 된다. ※ 소스를 다운 로드 받아 확인시 브라우저 창을 작게 줄여 세로 스크롤이 생기도록 하여 확인하도록 하세요!

Source <a name=top><a href="#list1">출제 형식 및 문제 접근 방법</a>/<a href="#list2">검색문제 예제</a></a> <p><a name="#list1">1. 출제형식 및 문제 접근방법</a></p> --- 중 략 --- 6) 6단계 : 정답을 확인하고 문제의 요구에 맞게 저장한다.<a href=#top>▲ TOP</a> <p><a name="#list2">2. 검색문제 예제</a><br> 왜구의 토벌이 한창 진행되던 우왕 말기에 고려와 명나라 사이에 영토 분쟁이 일어났다. - 시기가 장마철이라 활이 휘고 군사가 병이 들기 쉬워 불가하다.<a href=#top>▲ TOP</a> ③ 다른 HTML 문서의 특정 위치로 링크 <A href=”URL#키워드”>~</A> (링크 거는 지점 지정) <A name=”키워드”>~</A> (링크 되는 지정 지정) - 다른 HTML문서로 이동해서 이동한 문서내의 특정 위치로 이동하도록 지정한다. ※ 아래의 예는 예제 2의 특정 위치로 이동하도록 설정 한 것입니다. Source <HTML> <HEAD><TITLE><Name> : 다른 문서의 특정 위치 링크</TITLE></HEAD> <BODY> <a href="7-2ex.htm#list1">예제 2의 출제 형식 및 문제 접근 방법</a><p> <a href="7-2ex.htm#list2">예제 2의 검색문제 예제</a> </BODY> </HTML>

④ TARGET <A href=”URL” target=”창 이름”>~</A> 링크된 소스가 보여지게 될 곳을 정의한다. - 프레임이 있는 HTML문서에서 사용한다. 프레임이 없는 HTML문서에서도 새로운 창을 열기 위해 ‘_blank’를 사용하기도 한다. - 속성 값은 프레임 이름, _blank, _self, _parent, _top등이 있다. (이 부분에 대한 자세한 내용은 프레임 단원에서 소개할 것임) Source <HTML> <HEAD><TITLE>target : 새로운 창에서 열기</TITLE></HEAD> <BODY> <a href="7-2ex.htm" target=”_blank">예제 2를 새창으로 열기</a><p> <a href="7-2ex.htm#list2" target=”_blank">새창으로 열어 예제 2의 검색문제 부분으로 이동</a> </BODY> </HTML> ⑤ 전자 메일 링크 <A href=”mailto:전자 메일 주소”>~</A> - 문자열에 링크 연결시 ‘mailto:’와 전자 메일 주소를 입력하면 전자 메일을 보낼 수 있다. - 링크된 부분을 클릭하면 기본적으로 설정되어 있는 메일 클라이언트 프로그램 (대부분은 아웃룩 익스프레스가 지정)이 실행된다. - 메일 클라이언트 프로그램의 받는 사람(수신처) 입력란에 자동적으로 지정된 전자 메일 주소가 입력된다.

Source 실행화면 <HTML> <HEAD> <TITLE>mailto : 전자 메일 링크</TITLE> </HEAD> <BODY> <a href="mailto:pd0a3956@posco.co.kr">IT P OSCO 문의처</a><p> IT POSCO 문의처 <a href="mailto:pd0a3956@ posco.co.kr">pd0a3956@posco.co.kr</a> </BODY> </HTML>

(1) 테이블 이용 - 홈페이지 내에서 테이블은 다양한 용도로 사용된다. - 내용을 표 안에 잘 정돈하여 넣어줄 수 있다 (1) 테이블 이용 - 홈페이지 내에서 테이블은 다양한 용도로 사용된다. - 내용을 표 안에 잘 정돈하여 넣어줄 수 있다. - 홈페이지의 화면 디자인을 표 형식으로 하여 고정시킬 수 있다. - 용량이 큰 이미지를 작은 이미지로 잘라 만든 다음 표에 넣어 큰 이미지를 표시할 수 있다. 1) 테이블의 기본형식 <TABLE border=”외곽선 굵기(픽셀)”>~</TABLE> <TR>~</TR> <TH>~</TH> <TD>~</TD> ← 표 전체 ← 가로 1열 ← 제목용 셀 ← 데이터용 셀 - 종료 태그를 반드시 사용하여야 한다. - 제목용 셀(TH) 안의 문자는 굵은 글씨로, 가운데 정렬되어 나타난다. Source 실행화면 <table border="2"> <tr> <tH>이름</tH><tH>나이</tH><tH>성별</tH> </tr> <td>홍길동</td><td>35</td><td>남</td> <td>김영희</td><td>26</td><td>여</td> </table>

2) <CAPTION> : 표 제목 <CAPTION>~</CAPTION> <CAPTION align=”표시 위치”>~</CAPTION> 표시 위치 : top, bottom, (left, right) - 테이블에 대한 설명이나 제목 등을 기재할 때 사용된다. - <TABLE>태그 내에서만 사용된다. - align 속성을 이용하여 위치를 지정하지 않으면 표의 위쪽 가운데에 나타난다. Source 실행화면 <table border="2"> <caption align="left">출석부</caption> <tr> <tH>이름</tH><tH>나이</tH><tH>성별</tH> </tr> <td>홍길동</td><td>35</td><td>남</td> <td>김영희</td><td>26</td><td>여</td> </table>

3) 표의 크기와 여백 지정 <TABLE width=“폭” height=”높이”>~</TABLE> <TABLE cellspacing=”셀 안의 간격” cellpadding=”셀 사이의 간격”>~</TABLE> - width : 표 전체의 너비를 지정하며 입력은 픽셀 단위 또는 전체 브라우저 화면에 대한 비율 퍼센트로 표시한다. - height : 표 전체의 높이값을 입력하며 입력은 픽셀 단위로 한다. - cellspacing : 한 셀의 경계와 인접 셀 사이의 간격을 설정한다. - cellpadding : 셀 경계와 셀 안에 있는 내용 사이의 간격을 설정한다. Source 실행화면 <table border="2" width="100%" height="100"> <tr> --- 중략 --- </tr> </table> <p> <table border="8" cellspacing="4" cellpadding="10">

4) 표 외곽선 색과 형식 지정 <TABLE bordercolor=”16진수/색이름”>~</TABLE> <TABLE frame=”외곽선 형식”>~</TABLE> ※ 외곽선 형식 - void : 없다(기본), above : 위, below : 아래, lhs : 좌, rhs : 우, hside : 위아래, vside : 좌우, box : 상하좌우, border : 상하좌우만 보인다. - bordercolor : 표 외곽선의 색상을 지정한다. - frame : 표 외곽선의 형태를 지정한다. Border속성이 1이상이 되어야 한다. Source 실행화면 <table border="8" bordercolor="#0000ff"> <tr> --- 중략 --- </tr> </table> <p> <table border="6" frame="hsides"> 5) 셀 구분선의 형식 지정 <TABLE rules=”셀 구분선 형식”>~</TABLE> ※ 셀 구분선 형식 - none : 없다, rows : 가로열 경계선, cols : 세로열 경계선, group : THEAD, TBODY, TFOOT, COLGROUP, COL의 경계선, all : 모든 경계선

- 표 내의 셀들 사이의 경계선을 설정한다. Source 실행화면 <table border="6" rules="cols"> <tr> <tH>이름</tH> <tH>나이</tH> <tH>성별</tH> </tr> --- 중략 --- </table> 6) 표의 배경색과 배경 그림 지정 <TABLE bgcolor=”색”>~</TABLE> <TR bgcolor=”색”>~</TR> <TH bgcolor=”색”>~</TH> <TD bgcolor=”색”>~</TD> <TABLE background=”이미지 URL”>~</TABLE> <TR background=”이미지 URL”>~</TR> <TH background=”이미지 URL”>~</TH> <TD background=”이미지 URL”>~</TD> ← 표 전체 배경색 ← 가로 한 열 배경색 ← 표 제목 셀 배경색 ← 데이터용 셀 배경색 ← 표 전체 이미지 ← 가로 한 열 이미지 ← 제목 셀 이미지 ← 데이터용 셀 이미지 - bgcolor : 표의 배경색을 설정한다. - background : 표의 배경이미지로 사용할 이미지 파일을 지정한다.

Source 실행화면 <table bgcolor="#996688" border="2> <tr> --- 중략 --- </tr> </table> <p> <table background="orangecheck.gif" border="2" cellpadding="10"> 7) 텍스트와 표의 배열과 표와의 간격 지정 <TABLE align=”위치”>~</TABLE> <TABLE vspace=”세로 간격” hspace=”가로 간격”>~</TABLE> - align : 표의 위치를 설정하며, 위치는 left, right, center로 지정할 수 있다. - vspace : 표 아래위 간격을 지정한다. - hspace : 표 좌우 간격을 지정한다. - vspace, hspace는 네스케이프에서만 지원되는 속성이다. - 표를 왼쪽이나 오른쪽으로 정렬한 경우에 텍스트가 표 옆에 나타나지 않게 하려면 <br clear=”left 또는 right”>를 사용한다.

Source 실행화면 <table border="2" align="left" vspace="10" hspace="30"> <tr> --- 중략 --- </tr> </table> <p>오른쪽 표에서 알 수 있듯이 홍길동씨는 현재 35 세의 남성입니다. 최근의 취미는 낚시라고 하며, 회사 동료들과 매주 바다를 찾는다고 합니다. 8) 셀 병합 <TH rowspan=”세로 방향으로 합칠 셀의 개수”>~</TH> <TH colspan=”가로 방향으로 합칠 셀의 개수”>~</TH> <TD rowspan=”세로 방향으로 합칠 셀의 개수”>~</TD> <TD colspan=”가로 방향으로 합칠 셀의 개수”>~</TD> - rowspan은 현재 셀에서 아래 방향으로, colspan은 현재 셀에서 오른쪽 방향으로 2개 이상의 셀을 하나의 셀로 만든다. Source 실행화면 <table border="2"> <tr><tH colspan="2">회원</tH> <tH>지역</tH></tr> <tr><td>홍길동</td> <td>남자</td> <td rowspan="3">서울</td></tr> <tr><td>김영희</td><td>여자</td></tr> <tr><td>박철수</td><td>남자</td></tr> </table>

9) 셀 크기 지정 <TH width=”셀 너비” height=”셀 높이”>~</TH> <TD width=”셀 너비” height=”셀 높이”>~</TD> - 셀의 크기를 특정한 너비오 높이로 설정할 때 사용한다. 10) 셀 안의 텍스트 위치 지정 <TR align=”가로 위치” valign=”세로 위치”>~</TR> <TH align=”가로 위치” valign=”세로 위치”>~</TH> <TD align=”가로 위치” valign=”세로 위치”>~</TD> <THEAD align=”가로 위치” valign=”세로 위치”>~</THEAD> <TBODY align=”가로 위치” valign=”세로 위치”>~</TBODY> <TFOOT align=”가로 위치” valign=”세로 위치”>~</TFOOT> <COL align=”가로 위치” valign=”세로 위치”>~</COL> <COLGROUP align=”가로 위치” valign=”세로 위치”>~</COLGROUP> - align : 셀 안에서 가로 위치를 지정한다. - valign : 셀 안에서 세로 위치를 지정한다. 가로 위치 세로 위치 left 왼쪽 정렬(TD의 기본값) Top 위 Right 오른쪽 정렬 Middle 가운데 Center 가운데 정렬 Bottom 아래 Justify 양끝 정렬 baseline 가로 열에서 첫 번째 행이 기준선 char 특수 문자 위치(소수점 등)

11) 셀 안에서 줄 바꾸기 금지 <TH nowrap>~</TH> <TD nowrap>~</TD> - 셀의 width속성이 지정되지 않으면 웹 브라우저의 너비에 따라 자동적으로 설정되기 때문에 텍스트가 긴 경우에 자동적으로 줄 바꾸기가 된다. 이 자동적으로 줄이 바뀌는 기능을 해제하는 것이다. Source 실행화면 <p>일반적인 경우 <table border="2"> <tr><tH>이름</tH><tH>주소</tH></tr> <tr><td>홍길동</td><td>서울시 강남구 대치 4동 892 포스코센타</td></tr> </table> <p> 줄바꾸기를 금지시킨 경우 <tr><td nowrap>홍길동</td><td nowrap>서울시 강남구 대치 4동 892 포스코센타</td> </tr></table> 12) 가로 방향 셀 그룹화 <THEAD>~</THEAD> <TFOOT>~</TFOOT > <TBODY>~</TBODY > ← 표의 머리말 부분 ← 표의 꼬리말 부분 ← 표의 본문 부분

표의 가로 방향을 머리말, 본문, 꼬리말 세 부분으로 나누어 그룹화 하는 경우에 이용한다 표의 가로 방향을 머리말, 본문, 꼬리말 세 부분으로 나누어 그룹화 하는 경우에 이용한다. - 태그 적용 범위 전체에 대한 속성이나 스타일 시트를 지정할 수 있다. - 머리말과 꼬리말을 고정시킨 상태에서 본문 부분을 스크롤하거나, 인쇄할 때 각 페이지에 머리말과 꼬리말을 인쇄할 수 있다. ① <THEAD> - 머리말에 해당하는 내용을 기재한다. - 반드시 <TFOOT>앞에 사용하여야 하며 한번만 사용 가능하다. - 종료 태그는 생략할 수 있다. ② <TFOOT> - 꼬리말에 해당하는 내용을 기재한다. - <TBODY>뒤에 사용하며 <TFOOT>는 한 번만 사용하여야 한다. - 종료 태그는 생략 할 수 있다. ③ <TBODY> - 본문에 해당하는 내용을 기재한다. - <TFOOT>와 반드시 함께 사용하며 <TBODY>는 여러 번 사용하여도 된다. - 종료 태그는 생략할 수 있다. 13) 세로 방향 셀 그룹화 <COLGROUP span=”세로열의 개수”>~</COLGROUP> <COLGROUP span=”세로열의 개수” width=”셀 너비”>~</COLGROUP> - 표의 세로 방향을 그룹화 할 경우에 사용한다. - 여러 개의 세로 열에 대해 한꺼번에 너비와 정렬 등, 속성이나 스타일을 지정할 수 있다. - 세로열 개수는 그룹화할 세로열의 개수로 생략하면 1이다. - 너비는 픽셀, %, *을 사용한다. - <COLGROUP>은 시작 태그만 사용한다. - 표에 <CAPTION>이 있는 경우에는 바로 다음에 삽입해야 하며, <THEAD>가 있는 경우에는 그 앞에 삽입해야 한다.

14) 열에 대한 속성 <COL span=”세로열의 개수”> <COL span=”세로열의 개수” width=”셀 너비”> - 표의 세로 방향 셀을 그룹화하지 않으면서 셀 너비나 정렬 방식 등의 속성이나 스타일 시트를 한꺼번에 지정 할 수 있다. - 시작 태그만 사용하며, 일반적으로 <COLGROUP>태그 하에서 사용한다. - <COLGROUP>의 속성을 그대로 사용한다. - <CAPTION>이 있는 경우에는 바로 다음에 삽입해야 하며, <THEAD>가 있는 경우에는 그 앞에 삽입해야 한다. Source 실행화면 <table border="2"> <col width="120"> <col span="2" align="right"> <col align="center"> <tr><th>이름</th><th>나이</th><th>성별</th> </tr> <tr><td>홍길동</td><td>35</td><td>남자</td> </tr> <tr><td>김영희</td><td>29</td><td>여자</td> </table>

(1) <FORM> - 폼은 서버와 사용자 간의 상호작용을 할 수 있는 대화형 HTML 문서를 만들 수 있다 (1) <FORM> - 폼은 서버와 사용자 간의 상호작용을 할 수 있는 대화형 HTML 문서를 만들 수 있다. - 폼은 클라이언트 쪽에서 버튼, 텍스트 박스, 라디오 버튼 등의 입력 양식을 가지고 사용자의 입력을 받아 서버쪽으로 연결시키는 역할을 한다. - 그러나 폼 자체가 서버쪽으로 데이터를 전송하는 것이 아니라 그에 알맞은 양식을 만들어 준다. 1) <FORM> <FORM action=”URL” method=”HTTP 방법” enctype=”MIME형식” target=프레임 이름>~</FORM> 홈페이지 내 양식 폼을 설정한다. <FORM>자체로는 큰 의미가 없지만 양식 관련 태그들은 모두 <FORM>태그 안에서 사용해야 한다. Name : 여러 개의 폼을 사용할 경우 이를 구분할 수 있는 폼의 이름이다. Action : 폼의 데이터가 보내어졌을 때 웹 서버상의 CGI프로그램을 지정한다. 폼에 입력된 데이터를 전달받아 웹 서버에서 준비된 동작을 하고 결과를 만들어줄 URL을 지정한다. Target : 폼의 데이터가 서버에 전송되고 action에서 정의되어 있는 CGI의 결과가 다시 사용자의 클라이언트로 돌아올 때 사용될 프레임의 이름을 지정한다. Method : 폼의 데이터를 전달하는 방식으로 get과 post가 있다. Get은 환경 변수의 형태로 전송하고 post는 프로그램 표준 입력 방식으로 전송한다. Enctype : 양식을 서버에 전송할 때 사용되는 MIME(Multipurpose Internet Mail Extention)형식을 설정한다. 기본값은 ‘application/x-www-form-urlencoded’이다. Accept : 서버에 쉼표로 구분된 다양한 MIME형식의 데이터를 올려보낼 때 서버가 올바른 동작을 할 수 있게끔 지정할 때 사용한다. 2) 한 줄로 입력할 수 있는 글상자 <INPUT type=”text” name=”이름” value=”기본문자” size=”너비” maxlength=”최대문자 수”> - 한 줄을 입력할 수 있는 글상자를 삽입한다. 이름 : 입력 필드 이름 기본문자 : 글상자에 미리 입력되어 있는 문자 너비 : 입력 필드의 너비(문자수) 최대 문자 수 : 글상자에 입력할 수 있는 최대 문자 수

Source 실행화면 <BODY> <form action="/cgi-bin/formmail.cgi" method="post"> <p>이름 : <input type="text" name="user_name" size="20"></p> </form> </BODY> 3) 여러 줄을 입력할 수 있는 글상자 <TEXTAREA name=”이름” rows=”행 수” cols=”너비”>~</TEXTAREA> <TEXTAREA wrap=”줄 바꾸기 방법”>~</TEXTAREA> - 여러 줄을 입력할 수 있는 글상자를 삽입한다. Readonly : 읽을 수만 있고 입력하지는 못하게 설정한다. Rows : 텍스트 입력란의 행수를 지정한다. Cols : 텍스트 입력란이 한 행 문자수를 지정한다. Wrap : cols를 지정했을 때 지정한 cols의 크기를 넘어선 입력에 대해 처리하는 방식을 지정한다. - off : 줄 바꿈 없음, soft : 줄 바꿈 나타남, hard : 줄 바꿈 송신 - soft는 화면상에서만 줄 바꿈 되고 송신되는 데이터는 줄 바꿈 되지 않지만, hard는 실제로 송신되는 데이터도 줄 바꿈이 된다. .

Source 실행화면 <BODY> <form action="/cgi-bin/formmail.cgi" method="post"> <p><font size="2">readonly가 지정되지 않은 경우</font> <textarea name="sample" rows="3" cols="25"></textarea></p> <p><font size="2">readonly를 지정했을 때</font> <textarea name="sample" rows="3" cols="25" readonly>글 입력이 안되죠?!</textarea></p> </form> </BODY> 4) 암호 글 상자 <INPUT type=”password” name=”이름” value=”기본문자” size=”너비” maxlength=”최대 문자 수”> - 암호 입력에 사용되는 한 줄 글상자를 만들 때 사용한다. - 암호 글상자로 설정되면 입력되는 모든 문자는 ‘*’로 나타난다. value : 글상자에 미리 입력되어 있는 문자 size : 입력 필드의 너비 maxlength : 글상자에 입력할 수 있는 최대 문자 수

Source 실행화면 <BODY> <form action="/cgi-bin/formmail.cgi" method="post"> <p><font size="2">비밀번호1 : </font> <input type="password" name="pswd1" size="10"></p> <p><font size="2">비밀번호2 : </font> <input type="password" name="pswd2" size="10" value="itposco"></p> </form> </BODY> 5) 숨겨진 필드 작성 <INPUT type=”hidden” name=”이름” value=”송신문자”> 화면에 나타나지 않는 필드를 만들 때 사용 - 일반적으로 사용자에게 보일 필요가 없는 특정한 CGI 프로그램으로 송신하고 싶은 경우 사용하며 value속성에서 지정한 내용이 고정값으로 송신된다. Source <form action="/cgi-bin/formmail.cgi" method="post"> <input type="hidden" name="recitpient" value="runt@posco.co.kr"> <input type="hidden" name="subject" value="사용자등록"> <p><font size="2">비밀번호1 : </font> <input type="password" name="pswd1" size="10"></p> <p><font size="2">비밀번호2 : </font> <input type="password" name="pswd2" size="10" value="itposco"></p> </form> ※ hidden 값으로 지정한 것은 화면에 보이지 않으므로 4)암호글상자와 똑같이 화면에 출력된다.

6) 전송, 내용 최소 버튼 <INPUT type=”submit” name=”이름” value=”송신문자”> <INPUT type=”reset” value=”송신문자”> - 양식에 사용되는 단추는 일반적으로 전송 버튼과 취소 버튼을 같이 사용한다. - submit은 양식에 입력된 내용을 송신하는 기능을 담당하며, reset은 양식 전체의 입력 필드를 초기화한다. - value속성에서 지정한 값은 버튼의 레이블을 지정하며, 레이블을 지정하지 않을 경우 웹 브라우저의 기본 레이블로 나타난다. - name속성에서 지정한 이름은 각각 다른 기능을 하는 여러 개의 송신 버튼을 배치할 경우, 수신자 측에서 어떤 송신 버튼이 눌러졌는지를 가려낼 때 사용된다. Source 실행화면 <BODY> <form action="/cgi-bin/formmail.cgi" method="post"> <p><font size="2">기본적인 버튼<br> <input type="submit"> <input type="reset"> <p><font size="2">레이블 지정한 버튼</font><br> <input type="submit" value="전송"> <input type="reset" value="취소"> </p></form> </BODY>

7) 이미지로 된 전송 버튼과 스크립트에서 사용하는 버튼 <INPUT type=”image” src=”URL” name=”이름” alt=”대체용 설명” align=”정렬방법”> <INPUT type=”button” name=”이름” value=”레이블”> - image : 이미지를 이용하여 버튼을 만드는 것이며, 정렬 방법은 ‘top, middle, bottom, left, right’등이 있다. - button : 양식에 사용되지 앟는 일반 단추를 만들 때 사용하며, 일반적으로 자바 스크립트와 같은 이벤트 핸들러와 연결시킨다. Source 실행화면 <form action="/cgi-bin/formmail.cgi" method="post"><input type="image" src="button1.jpg" name="submit" alt="전송"> <input type="button" name="prev" value="돌아가기" onClick="javascript:history.back();"> </form> 8) <BUTTON> <BUTTON type=”버튼 형식” name=”이름” value=”레이블”>~</BUTTON> - 단추만을 전문적으로 만들기 위한 태그로 버튼 형식은 submit, reset, button으로 구분된다. - <BUTTON>~</BUTTON>사이의 내용을 버튼 레이블로 나타낼 수 있다.

Source 실행화면 <form action="/cgi-bin/formmail.cgi" method="post"><p> <button type="submit"><font size="3"><b>전송</b></font></button> <button type="reset"><font size="3"><b>취소</b></font></button> <button type="button"><font size="3"><b>일반단추</b></font></button><p> <button type="submit"><img src="button1.jpg"><p>전송</button> </form> 9) 라디오버튼과 체크박스 <INPUT type=”radio” name=”이름” value=”전송문자” checked> <INPUT type=”checkbox” name=”이름” value=”전송문자” checked> - radio : 라디오 버튼은 여러 개의 선택 항목 중에서 단일 항목만 선택할 수 있는 형식 - checkbox : 여러 개의 선택 항목에서 하나 이상의 항목을 선택할 수 있는 형식 - 한 항목에 포함된 라디오 버튼은 모두 같은 이름을 가지고 있어야 하며, 어떤 항목이 선택되었는지 구별하기 위해 value속성을 반드시 지정해야 한다. - 미리 선택된 상태로 지정할 경우 사용되며, checked가 되면 값이 ‘true’로 설정된다.

Source 실행화면 <form action="/cgi-bin/formmail.cgi" method="post"> <p>당신이 좋아하는 과일은 무엇입니까?</p> <input type="radio" name="fruit" value="사과">사과 <input type="radio" name="fruit" value="포도">포도 <input type="radio" name="fruit" value="바나나">바나나 <input type="radio" name="fruit" value="오렌지">오렌지 <p>당신이 좋아하는 색상은 무엇입니까?</p> <input type="checkbox" name="color" value="노랑" checked>노랑 <input type="checkbox" name="color" value="파랑">파랑 <input type="checkbox" name="color" value="빨강">빨강 <input type="checkbox" name="color" value="녹색">녹색 10) 펼침 메뉴 및 펼침 메뉴 항목 그룹 지정 <SELECT size=”항목 수” name=”이름”>~</SELECT> <OPTION value=”송신문자”>~</OPTION> <OPTION selected>~</OPTION> - 드롭다운 형태의 선택형 메뉴를 만든다. - 메뉴 전체를 <SELECT>~</SELECT>로 둘러싸고, 선택항목은 <OPTION>~</OPTON>태그로 지정한다.

<OPTGROUP label=”그룹 이름”>~</OPTGROUP> <OPTION label=”생략된 이름”>~</OPTION> - <SELECT>로 설정한 펼침 메뉴의 선택 항목을 그룹으로 만든다. Source 실행화면 <form action="/cgi-bin/formmail.cgi" method="post"> <p>당신의 이상형은?</p> <SELECT name="type"> <option> 김희선 </option> <option> 이영애 </option> <option> 한채영 </option> </SELECT> <p>가장 많이 이용하는 브라우저는?</p> <SELECT name="browser"> <optgroup label="인터넷 익스플로러"> <option label="6.x">인터넷 익스플로러 6.x</option> <option label="5.x">인터넷 익스플로러 5.x</option> </optgroup> <optgroup label="넷스케이프 네비케이터"> <option label="6.x">넷스케이프 네비케이터 6.x</option> <option label="5.x">넷스케이프 네비케이터 5.x</option> </form>

11) 목록 상자 <SELECT size=”항목 수” name=”이름” multiple> <OPTION value=”송신문자”>~</OPTION> <OPTION selected>~>/OPTION> - 펼침 메뉴 작성법과 유사하며 드롭다운 형태가 아닌 목록 상자 형태로 작성된다. - 항목 수는 목록 상자에 선택 항목을 나타낼 행수이며, multiple은 ctrl, shift키를 이용하여 여러 개의 항목을 선택할 수 있도록 지정한다. - <option>에서 지정한 항목 수가 size속성에서 지정한 항목 수보다 많으면 목록 상자에 자동으로 스크롤 바가 생성된다. Source 실행화면 <form action="/cgi-bin/formmail.cgi" method="post"> <p>당신의 이상형은?</p> <SELECT size="3" name="type" multiple> <option> 김희선 </option> <option> 이영애 </option> <option> 한채영 </option> <option> 이미연 </option> </SELECT> </form> 12) 파일 선택 상자 <INPUT type=”file” name=”이름” value=”파일 이름” accept=”MIME형식”> - 파일을 선택할 수 있는 상자를 만들 때 사용한다. - accept 속성에서 수신 프로그램이 받아 들일 수 있는 파일의 종류를 MIME형식으로 지정하며, 여러 종류를 수신 할 수 있는 경우는 [,]로 구분하여 지정할 수 있다. - 이 기능을 이용할 경우 <FORM>의 enctype속성에는 [multipart/form-data]를 사용하고 method 속성에는 ‘post’를 지정해야 한다

Source 실행화면 <form action="/cgi-bin/formmail.cgi" enctype="multipart/form-data" method="post"> <p>파일을 선택하세요!</p> <input type="file" name="imagefile" accept="image/jpeg,image/gif"> <p><input type="submit" value="전송"></p> </SELECT> </form> 13) 양식 필드의 레이블 및 그룹화 <LABEL for=”참조ID”>~</LABEL> - 양식 중 value 속성에 의해 레이블을 붙일 수 없는 경우에 사용한다. - <LABEL>사이에 레이블이 될 텍스트만 배치하고 입력 및 선택 항목으로 지정한 ID와 똑같이 for속성에서 지정한다. 이때 레이블과 입력 및 선택 항목이 반드시 1:1이 되어야 한다. <FIELDSET>~</FIELDSET> <LEGEND align=”정렬 방법”>~</LEGEND> - 양식의 일부분을 그룹으로 지정한다. - <LEGEND>는 그룹의 제목을 지정한다. - 정렬방법은 top, bottom, left, right로 제목의 위치를 지정한다.

Source 실행화면 <form action="/cgi-bin/formmail.cgi" method="post"> <label for="nm">이름 : </label> <input type="text" name="name" id="nm"><br> <label for="em">메일 : </label> <input type="text" name="email" id="em"> <fieldset> <legend>개인정보</legend> 이름 : <input type="text" name="uname"> 주소 : <input type="text" name="uaddrs" size="20"><br> 전화 : <input type="text" name="uphone"> </form>

(1) 프레임 - 하나의 창을 가로, 세로로 구분해서 그 안에 각각 다른 HTML문서를 나타낼 수 있다 (1) 프레임 - 하나의 창을 가로, 세로로 구분해서 그 안에 각각 다른 HTML문서를 나타낼 수 있다. - 프레임을 지정한 틀은 고정되고 각 프레임에 각기 다른 HTML문서를 불러들일 수 있으므로 특정 부분에 반복적으로 새로운 내용의 페이지가 필요할 때 유용하다. 1) 프레임 전체 구성 <FRAMESET rows=”분할 높이”>~</FRAMESET> <FRAMESET cols=”분할 너비”>~</FRAMESET> <FRAME src=”URL” name=”프레임 이름”> - 분할 높이(너비) : 가로(세로) 분할했을 때의 각 높이를 ,(쉼표)로 구분해서 지정(픽셀,%.*) - FRAMESET : 창을 어떻게 구분할지 지정하는 태그이며 이 태그안에는 BODY태그를 사용할 수 없다. - FRAME : 분할된 각 프레임에 나타낼 내용을 지정하는 태그이다.

※ 프레임 구성에 따른 프레임 셋 소스 예제

Source 실행화면 <frameset rows="70, *"> <frame src="title.htm" name="title"> <frameset cols="150, *"> <frame src="menu.htm" name="menu"> <frame src="content.htm" name="contents"> </frameset> <noframes> <body> <p>이 페이지를 보려면, 프레임을 볼 수 있는 브라우저가 필요합니다.</p> </body> </noframes> 2) 프레임 세부 항목 지정 <FRAME scrolling=”auto, yes, no” noresize> <FRAME marginwidth=”픽셀” marginheight=” 픽셀”> <FRAME frameborder=”0,1” border=”픽셀” bordercolor=”#color” > - scrolling : 스크롤 생성을 제어하는 것으로 auto, yes, no가 있다. auto는 필요에 따라 스크롤이 자동으로 생성되는 것이며, yes는 항상 스크롤이 나타나며, no는 항상 스크롤 바가 나타나지 않는 것이다. - marginwidth[marginheight] : 프레임 안의 좌우[상하] 여백을 지정하는 것이다. - noresize : 프레임 구분선을 고정하여 프레임의 크기를 변경할 수 없도록 하는 것이다. 일반적으로 프레임 구분선은 마우스로 드랙하면 움직이게 되어 프레임의 크기를 변경시킬 수 있다. - frameborder : 프레임 구분선의 표시를 지정하는 것으로 1은 표시, 0은 구분선이 나타나지 않는다. - border : 프레임의 구분선의 두께를 설정한다. 0으로 지정하면 프레임의 구분선이 나타나지 않는다. - bordercolor : 프레임의 구분선의 색상을 지정한다. - frameborder, border, bodercolor속성은 <FRAMESET>태그 속성에도 적용되어 프레임 셋 내의 모든 프레임을 제어한다. 또한 프레임 셋에서는 framespacing 속성으로 프레임들 간의 간격을 설정한다.

Source 실행화면 <frameset rows="70,*" frameborder="0" framespacing="0"> <frame src="title.htm" scrolling="no" norsize> <frameset cols="150,*"> <frame src="menu.htm" scrolling="yes"> <frame src="content.htm" marginwidth="20" marginheight="60"> </frameset> <noframes> <body> <p>이 페이지를 보려면, 프레임을 볼 수 있는 브라우저가 필요합니다.</p> </body> </noframes> 3) <NOFRAMES> - 프레임을 지원하지 않는 브라우저가 있을 시 프레임대신 대체되는 내용을 지정한다. - <NOFRAMES>~</NOFRAMES>형태로 정의되며, 이 태그안에 <body>를 삽입하여 내용을 입력한다. 프레임이 지원되는 브라우저에서는 <body>의 내용이 보이지 않지만 프레임을 지원하지 않는 브라우저에서는 프레임대신 <body>의 내용이 나타난다. 4) 하이퍼링크의 대상 프레임 지정하기 <A href=”URL” target=”프레임 명”>~</A> - 프레임에서 하이퍼링크는 링크된 문서가 나타날 프레임을 지정해 주어야 한다. 미지정시 하이퍼링크된 프레임에 나타나게 된다. - <FRAME name=”프레임명”>에서 지정한 프레임명은 하이퍼링크할 때 target의 속성이 되어 해당 프레임에 하이퍼링크된 문서가 나타나게 된다.

- 시스템에서 사용하는 4가지 예약어 _top 프레임을 해제하고 링크될 문서를 창 전체로 불러온다. _parent 링크될 문서를 링크 전 원래의 프레임인 부모 프레임에 나타낸다. 부모 프레임이 없는 경우는 [_self]와 같다. _self 링크될 문서를 원래 위치와 같은 프레임으로 불러온다. _blank 이름이 없는 새로운 창을 열고 링크될 문서를 그 창으로 불러온다. Source 실행화면 ※ menu 소스 <body bgcolor="#FAFFF8" text="black" link="blue" vlink="purple" alink="red"> <a href="document.htm" target="contents">문서 1</A> </body> ※ 프레임셋 소스 <frame src="title.htm" name="title"> <frameset cols="150,*"> <frame src="menu1.htm" name="menu"> <frame src="content.htm" name="contents"> </frameset>

5) <IFRAME> <IFRAME src=”URL” name=”프레임 이름”>~<IFRAME> - HTML 문서 안에 다른 HTML문서를 창 형식으로 삽입한다. - 익스플로러에서만 지원되는 기능이다. - src, name외에 다음과 같은 속성을 지정 할 수 있다. ① Width : 프레임 너비(픽셀 또는 %)를 지정 ② Height : 프레임 높이(픽셀 또는 %)를 지정 ③ Marginwidth : 프레임 안의 좌우 여백(픽셀)을 지정 ④ Marginheight : 프레임 안의 상하 여백(픽셀)을 지정 ⑤ Scrolling : 스크롤(auto : 자동, yes : 있음, no : 없음) 설정 ⑥ Frameborder : 프레임 구분선을 표시하거나 숨김(1 : 표시, 0 : 숨김) ⑦ Align : 프레임의 정렬 상태(left, right, center)를 지정 Source 실행화면 <P>iframe창을 만들자 <iframe src="iframe.htm" name="win" widht="100" height="80" align="right"> </iframe>