홈페이지

1

홈페이지

• 홈페이지 관련 프로그램들– 텍스트 편집기

• HTML 태그 이용– 웹저작도구

• 나모에디터 , 드림위버– 그래픽 프로그램

• 이미지제작 ( 포토샵 , 페인트샵 프로 )

– 애니메이션 그림 파일 작성• GIF Construction Set, WWW GIF Animator, 플래시

– 기타• 워드프로세서

– 웹문서 변환 기능

2

웹 프로그래밍 (1/3)

• 웹 프로그래밍– SGML (Standard Generalized Markup Language)

• 문서의 마크업 언어나 태그 셋을 어떻게 정의할 것인가에 대한 표준

– HTML (HyperText Markup Language)– 자바 스크립트와 자바 애플랫

• 자바 스클립트 (Java Script)– 클라이언트에서 독립적으로 실행되는 되는 스크립트 언어

• 자바 애플릿 (Java Applet)– 자바언어로 제작한 홈페이지 응용 프로그램

– DHTML (Dynamic HTML): 동적 웹페이지 제작– XML (eXtensible Markup Language)

• HTML 과 SGML 의 장점만을 모아놓은 표준안– XHTML : HTML 이 XML 로 가기 위한 가교 역할

3


• Server Side Script– HTML( 단방향식의 정보제공 ) 의 문제점을 보충하기 위해– CGI (Common Gateway Interface)

• 외부프로그램과 웹서버 (Web Server) 간의 연결 역할• 주로 C/C++ 나 PERL 혹은 UNIX Shell, Tcl/Tk 등을 사용하여

구현– ASP (Active Server Page)

• MS 사에서 제작한 IIS(Internet Information Server) 의 세번째 버전• 익히기가 가장 쉽지만 MS 윈도우에서만 구동

– JSP (Java Server Page)• 자바를 기반으로한 동적인 웹사이트 개발언어• 프로그래밍언어인 자바를 기본 언어로 채택하여 견고하고 ,

안정적– PHP (Professional Hypertext Preprocessor)

• 주로 Linux 계열에서 사용하는 동적 HTML 페이지 제작기술• 안정성이 보장되어 있지 않다는 문제점이 있지만 급속도로 발전

4


• Web3D– 웹 페이지 상에서 물체를 돌려보거나 , 현실과 같이 공간을

이동할 수 있게 해주는 기술– VRML (Virtual Reality Modeling Language)

• 인터넷에 3 차원 공간을 표현하는 그래픽스 데이터의 기술 언어 – X3D (Extensible 3D)

• 차세대 VRML 버전 (XML + VRML97)

• 다른 컨텐츠와의 호환성이 높으며 , 코드의 모듈화를 통하여 확장 가능하도록 정의

• www.web3d.org

5

웹 정책기획

설계구현

시험 및 검증운영 및 유지보수

계획수립

환경 및 시스템 분석

스토리보드 작성

페이지 구성

화면 구성

멀티미디어데이터 생성

코드

설치

보안 정책

백업 정책

장애 관리

사용 편의성 검사

시스템 속도 검사

인터넷의 이해와 활용

6

웹서버의 동작원리

7

HTML 문서의 특징

• 공백 , 줄바꿈 인식 못함 • 텍스트 문서의 형태 - 확장명 : .html, .htm • 인터넷 문서로 사용하기에 적합

– 컴퓨터 기종에 무관 – 파일크기 작음

• 대소문자를 구분하지 않음

8

HTML

• HTML (HyperText MarkUp Language)– 하이퍼텍스트 (Hypertext) 문서

• 1989) CERN 에 있던 팀 버너스리에 의해 개발

• HTML 의 구조– 헤더 (Header) 와 본문 (Body) 으로 구분– 태그 (tag) 를 사용

• 태그 : 특별한 표시를 할 수 있는 표시자

<HTML> // HTML 문서 시작 <HEAD> // 헤더의 시작 … 문성의 일반적인 정보나 제목기술 … </HEAD> // 헤더의 끝 <BODY> // 본문의 시작 … 본문의 내용 … </BODY> // 본문의 끝</HTML> // HTML 문서의 끝

9

HTML 기본 구조

머리부

몸체부

10

• 복합 태그< 태그명 > 내용 </ 태그명 >

• 속성을 가지는 태그< 태그명 속성명 = 값 > 내용 </ 태그명 >

• 단독 태그< 태그명 >

• 사용 예여러분을 <font size=5 color=blue> 진심으로 </font>

환영합니다 !

태그의 구성 요소

11

태그의 사용규칙

• < 태그명 ></ 태그명 > 과 같이 여는 태그와 닫는 태그가 쌍으로 사용된다 . – 닫을 때는 태그명으로만 닫는다 .

• 태그명과 속성명 , 속성명과 속성명 사이는 한 칸씩 띄운다 . 그 외 공백을 두어서는 안 된다 .– 속성명과 값은 = 부호를 사용하여 표시한다 .– 값이 두 단어 이상일 경우는 “”로 묶어서 표시한다 .

• 속성이 있는 태그가 있고 없는 태그가 있다 .– 속성을 반드시 하나 이상 사용해야 하는 태그도 있고 생략해도

되는 태그가 있다 . – 여는 태그만 독립적으로 존재하는 태그도 있다 .

• 태그를 중첩해서 사용할 경우 먼저 열어준 태그를 나중에 닫아준다 .

12

■ HTML 태그의 구조사용 주의 사항 중첩 사용 시 마감 태그의 대응 위치

<tag1> <tag2> . . . <tag1> <tag2>

(x)

<tag1><tag2>...<tag2><tag1> (o)

태그의 사용규칙

13

■ HTML 문서의 예

<HTML>

<head>

<title> 테스트 문서 </title>

</head>

<body>

기본 구조 연습 문서</body>

</HTML>

인터넷 이해와 활용

14

■ 문자 관련 태그

글자 모양 : 논리적 형태 <cite> : 인용문 <code> : 소스코드 <dfn> : 정의 <em> : 강조 <strong> : 강한 강조 <samp> : 예제 <var> : 변수


15

■ 문자 관련 태그글자 모양 : 물리적 형태 <b> ... </b>

<I> ... </I>

<u> ... </u>

<tt> ... </tt>

<sub> ... </sub>

<sup> ... </sup>

<big> ... </big>

<small> ... </small>

<strike> … </strike>

<blink> ... </blink>


16

■ <INS>, <DEL> 태그

삽입 , 삭제 텍스트 표시 <INS> : 삽입 텍스트 표시 , 밑줄이 함께 표시 <DEL> : 삭제 텍스트표시 , 취소선이 함께 표시


17

■ <P> 태그문단 구분 줄을 바꿈과 동시에 한 줄 띄게 되는 효과 속성 align=“{ left|center|right }”


18

■ <BR> 태그• 줄바꿈 태그 • 단락구분은 하지 않음 • 종료태그 없음


19

■ <FONT> 태그

글자의 크기 , 색상 , 서체를 지정

속성 SIZE=“n“ : n=1~7, 기본 값은 n=3

COLOR=“{# 색상코드 | 색상이름 }“

FACE=" 글꼴체 "

<FONT SIZE=“4”> … </FONT>

<FONT COLOR=“red”> … </FONT>

<FONT FACE=“ 바탕체” > … </FONT>

<FONT SIZE=“4” COLOR=“#ff0000”>...</FONT>


20

■ 색상 코드표

RGB : 각각을 8 비트를 이용하여 16 진수로 표현R(red) 2 자리 , G(green) 2 자리 , B(blue) 2 자리 총 6 자리로 구성된다

11111111 00000000 00000000


21

■ 색상 표현 단어


칼라 영문명 16 진수 칼라 영문명 16 진수

Black #000000 Green #008000

Silver #C0C0C0 Lime #00FF00

Gray #808080 Olive #808000

White #FFFFFF Yellow #FFFF00

Maroon #800000 Navy #000080

Red #FF0000 Blue #0000FF

Purple #800080 Teal #008080

Fuchsia #FF00FF Aqua #00FFFF

22

■ <FONT> 태그 사용 예


23

■ <Hn> 태그

문서 내의 단계별 제목 문서에 논리적 의미 부여 <Hn> : n = 1 ~ 6 (n=1 이 가장 큰 제목 )

자동 줄바꿈

속성 ALIGN=“{left|center|right }”

<H1> … </H1> <H3 ALIGN=“center”> … </H3>


24

■ <Hn> 태그 사용 예

<h1>h1 tag</h1>

<h2>h2 tag</h2>

<h3>h3 tag</h3>

<h4>h4 tag</h4>

<h5>h5 tag</h5>

<h6>h6 tag</h6>

<h1 align="center"> h1 tag </h1>


25

■ <CENTER> 태그

태그 사이의 내용을 가운데 정렬


26

■ <HR> 태그

가로선 긋기 속성 ALIGN=“{left|center|right }” SIZE=“n” : 선의 두께 (pixel), 기본 값은 2 WIDTH=“n” : 선의 폭 (pixel,%) NOSHADE : 음영효과 사용 안 함 COLOR=“color” : 선의 색상

<hr align=“ ” size=“n” width=“n” color=“color“ [noshade]>


27

■ <HR> 태그 사용 예


28

■ <ADDRESS> 태그와 주석문

<ADDRESS> 문서 수정일 , 주소 , 저자 정보

주석문 


29

■ <DIV> 태그

특정부분과 구역으로 구분 논리적 블록요소 주로 스타일 시트와 함께 사용 앞뒤 줄바꿈 속성 ALIGN=“{ left|center|right }”


30

■ <MARQUEE> 태그

텍스트에 움직임 효과를 부여 속성 BEHAVIOR=”{alternate|scroll|slide}” 텍스트의 움직임 형태 DIRECTION=”{down|up|left|right}” 텍스트의 움직임 방향 LOOP=”{n|infinite}” 반복횟수 SCROLLAMOUNT=”n” 스크롤되는 픽셀 수SCROLLDELAY=”n” 메시지출력 시간간격 (msec)BGCOLOR=“color” : 스크롤되는 공간의 배경색 WIDTH, HEIGHT : 스크롤되는 공간의 크기 HSPACE, VSPACE : 스크롤되는 공간의 좌우 , 상하여백


31

예제 ) marquee 태그<HTML> <head>

<title>테스트 문서 </title> </head> <body>

<Marquee BEHAVIOR=alternate> 인터넷 입문 </Marquee><Marquee BEHAVIOR=scroll> 인터넷 입문 </Marquee><Marquee BEHAVIOR=slide> 인터넷 입문 </Marquee><Marquee Direction=down BGCOLOR="red"> 인터넷 입문 </Marquee><Marquee Direction=up BGCOLOR="green"> 인터넷 입문 </Marquee><Marquee Direction=left BGCOLOR="blue"> 인터넷 입문 </Marquee><Marquee Direction=right BGCOLOR="yellow"> 인터넷 입문 </Marquee><Marquee ScrollAmount=1> 인터넷 입문 </Marquee><Marquee ScrollAmount=10> 인터넷 입문 </Marquee><Marquee ScrollAmount=100> 인터넷 입문 </Marquee><Marquee ScrollDelay=10> 인터넷 입문 </Marquee><Marquee ScrollDelay=100> 인터넷 입문 </Marquee><Marquee ScrollDelay=1000> 인터넷 입문 </Marquee>

</body></HTML>

32

■ <PRE> 태그

입력한 형태 그대로 출력 공백 , 줄바꿈 인식 내부의 태그 인식


33

■ <XMP> 태그

입력한 형태 그대로 출력 공백 , 줄바꿈 인식 내부의 태그 무시


34

■ Character Entity

HTML 내에서의 특수 문자 표시 방법


35

■ Character Entity 사용 예


36

■ 순서 리스트순서 글머리 번호에 순서 번호가 있는 리스트

<OL> : 리스트의 시작과 종료 (Ordered List) 속성 TYPE=“{ A|a|I|i|1 }” : 글머리 번호의 종류 START=“n” : 글머리 번호의 시작 번호

<LI> : 리스트 항목을 기술 속성 TYPE=“{ A|a|I|i|1 }” : 해당 항목의 글머리 번호의 종류 VALUE=“n”

<OL> <LI> … </LI>

<LI> … </LI>

</OL>


37

■ 순서 리스트 사용 예

<ol> <li> 서울 </li> <li> 경기 </li> <li> 제주 </li> </ol>

<ol type=I> <li> 서울 <li> 경기 <li value=5> 제주 </ol>

<ol type=a start=3> <li> 서울 <li> 경기 <li> 제주 </ol>


38

■ 무순서 리스트

순서 글머리 번호에 순서 번호가 없는 리스트

<UL> : 리스트의 시작과 종료 (Unordered List)

속성 TYPE=“{ disc|circle|square }” : 글머리의 모양

<LI> : 리스트 항목을 기술 속성 TYPE=“{ disc|circle|square }” : 글머리의 모양

<UL> <LI> … </LI> <LI> … </LI> </UL>


39

■ 무순서 리스트 사용 예<ul> <li> 서울 <li> 경기 <li> 제주 </ul>

<ul type=square><li> 서울 <li> 경기 <li> 제주 </ul>


40

■ 정의 리스트

<DL> : 정의 리스트의 시작과 종료 <DT> : 정의 제목 <DD> : 설명 , 항목 , DT 에 대해 들여쓰기 효과 <DL compact>


41

■ 정의 리스트 사용 예

<dl> <dt>HTML <dd>Hyper Text Markup Language <dt>DHTML <dd>Dynamic HTML </dl>

<dl compact> <dt>[1] <dd>Hyper Text Markup Language <dt>[2] <dd>Dynamic HTML </dl>


42

■ 중첩 리스트

시작 태그 , 마감 태그 사용 주의 ( 대칭 )

<ol> <li> 서울 <ul type=disc>

<li> 종로 <li>

동대문 </ul>

<li> 경기 <li> 제주

</ol>


43

■ <A> 태그

Anchor 정의 속성 HREF=“url” : 연결 문서 지정 TARGET : 연결 문서를 출력할 대상 _blank : 새로운 창을 열어서 문서 연결 _top : 현재 창의 최상위에 문서 연결 _parent : 현재 문서 창을 연 문서 창에서 연결

_self : 자기 자신의 창에서 연결 Frame_name : 지정한 프레임에서 연결

TITLE : 링크에 대한 설명을 기술 <A HREF=“ 연결할 문서” TARGET=“ 대상” > 내용 </A>


44

• 웹 브라우저 안에서 보이는 파일들– htm, html, gif, jpg, txt

• 플러그인 프로그램이 자동 연결되는 파일들– wav, mid, mp3, asf, avi, swf, wmv

• 플러그인 프로그램이 자동 연결되지 않아 해당 프로그램을 설치해야만 실행 가능한 파일들– ra, rm, ram, mov

• 실행되지 않고 저장되는 파일들– exe, zip, hwp, doc, xls, ppt, psd

<A> 태그로 하이퍼링크 설정하기 – 하이퍼링크 설정

[ 하이퍼링크 가능한 파일의 종류 ]

45

속성 설명 기본 값

text 일반 문자색 black

link 한 번도 방문하지 않은 링크 문자색 blue

vlink 한 번이라도 방문한 링크 문자색 purple

alink 누르는 순간에 변하는 링크 문자색 red

<A> 태그로 하이퍼링크 설정하기 – 하이퍼링크 설정

[<body> 태그의 문자색 관련 속성 ]

46

• 절대경로<a href=”http://www.hanbitbook.co.kr/book_search.htm”> 한빛

미디어 도서검색 </a>• 상대경로

– 작업 폴더<a href=”samp.htm”> 예제 </a>

– 상위 폴더<a href=”../../samp.htm”> 예제 </a>

– 하위 폴더<a href=”sample/chap1/samp.htm”> 예제 </a>

<A> 태그로 하이퍼링크 설정하기 – 절대경로와 상대경로

47

■ <A> 태그 사용 예

하이퍼링크 연습 문서입니다 . <a href="2.htm"> HTML </a> 이란 무엇인가 ?

하이퍼링크연습문서입니다 . <a href="2.htm“ target=“_blank”> HTML </a> 이란 무엇인가 ?

새 창

기존 창


48

■ <A> 태그 TITLE 속성

<a href="http://www.hs.ac.kr" title=“hs 홈페이지로 "> hs 가기 </a>


49

■ 책갈피 사용하기

NAME 속성을 이용하여 문서 내의 특정 부분으로의 연결 설정대상 문서에 책갈피 위치 설정 후 하이퍼링크 지정 시 책갈피이름을 지정

책갈피 위치 설정 : <A NAME=“name”>..</A>

책갈피 위치로 링크 생성 :<A HREF=“ 문서 #name”> .. </A>

동일 문서 내에서는 문서 이름 생략 가능


50

■ NAME 속성

클릭하면 문서 내의 WWW 로 이동

<a href=“NAME”> 해당문자열 </a>

<a name=“NAME”> 해당문자열 </a>


51

■ 동일 문서 내에서 책갈피 사용

<html> <head> <title> 링크연습 </title> </head> <body> <a href=“#서론” name=“ 위” >1.서론 </a> <a href=“#본론” >2.본론 </a> <a href=“#결론” >3.결론 </a>

<a name=“ 서론” > 1.서론 </a> 이 부분은 서론이… .

<a href=“#위” >위로가기 </a>

<a name=“ 본론” > 2. 본론 </a> 이 부분은 본론입니다… ..

<a name=“ 결론” > 3. 결론 </a> 이 부분은 결론입니다 .………….. ………...


52

■ 다른 사이트로 연결

웹 문서로 연결 : http://www.ocu.ac.kr

FTP 서버로 연결 : ftp://ftp.shareware.co.kr


53

■ 이메일 연결하기

‘편지쓰기’ 클릭하면 이메일 보내는 창 뜸


54


■ <BODY> 태그의 속성

BACKGROUND : 문서의 배경 그림 BGPROPERTIES="fixed“ : 배경 그림 고정BGCOLOR=“color” : 문서의 배경 색상 TEXT=“color” : 기본 글자 색상 LINK=“color” : 링크 색상 VLINK=“color” : 방문한 링크 색상 ALINK=“color” : 클릭한 순간부터 링크 연결 중 색상LEFTMARGIN=“n” : 문서의 왼쪽 여백 TOPMARGIN=“n” : 문서의 위쪽 여백 marginheight, marginwidth : NETSCAPE

55

■ 문서의 배경 이미지

<BODY BACKGROUND=“image_url” >


<HTML><head>

<title> 기본 구조 </title>

</head><body background=" 인

형 .jpg">

</body></HTML>

56

■ 문서의 배경색 지정


57

■ 링크 관련 글자색 변경


<body text="#0000ff" link="red" vlink="green“ alink=“black”> 하이퍼링크연습문서입니다 .<br> <a href="http://www.ocu.ac.kr"> OCU 로 가기 </a><br> <a href="http://mail.ocu.ac.kr"> OCU 메일 </a>

58

• GIF– Graphic Interchange Format 의 약어– 256컬러만 지원하므로 주로 홈페이지용 버튼 , 메인 , 문자 처럼 단순한

그림에 사용된다 .

• JPG– 1980년 , Joint Photographic Experts Group(JPEG) 에서 개발– 16 만 컬러를 지원하므로 인물사진 , 배경사진과 같이 고해상도 그림에

주로 사용된다 .

• PNG• BMP

<IMG> 태그로 그림 삽입하기 – 홈페이지용 그림 파일

[ 형식 ]

59

• 홈페이지 제작과 관련된 이미지 제공– http://supericon.superboard.com – http://koreacartoon.hihome.com– http://cherrynara.dreamwiz.com

• 검색엔진을 이용한 이미지 검색 사이트– http://imagebingo.naver.com– http://imagesearch.yahoo.co.kr– http://imagesearch.nate.com

<IMG> 태그로 그림 삽입하기 – 홈페이지용 그림 파일

[ 이미지 모음 사이트 ]

60

■ 그림 삽입

<IMG> : 그림 삽입

속성 SRC = “image_url” : 그림의 위치 지정 WIDTH, HEIGHT : 그림의 크기 지정 ALIGN = “{left|right|top|middle|bottom}” : 정렬 BORDER = “n” : 테두리 두께 ALT =“설명” : 마우스 오버 시 표시할 설명 VSPACE, HSPACE : 그림 주위의 글자와의 간격


61

■ 그림 삽입 예

<img src=“http://www.ocu.ac.kr/images/img_01.gif”>

<img src=“images/abc.gif”> Homepage and ...


하이퍼링크연습문서입니다 . <img src="http://www.ocu.ac.kr/images/img_01.gif"> OCU 그림 삽입

62

■ 이미지와 텍스트 정렬글자의 위치를 이미지와 연관시켜 배치

이미지를 중심으로 텍스트를 배치할 경우

ALIGN= top, middle, bottom - top : 글자를 이미지의 가장 윗 부분에 정렬 - middle : 글자를 이미지의 중앙선에 정렬 - bottom : 글자를 이미지의 가장 밑부분에 정렬 ALIGN=bottom 옵션은 기본 값

문장이 긴 경우 , 창의 크기를 줄이면 자동적으로 이미지밑으로 위치하게 된다는 것에 주의


63

■ 이미지 정렬 예

<img src=“...” align=top|middle|bottom|right|left>

<p align=left|center|right><img src=“...“> </p>


하이퍼링크연습문서입니다 .<br>

<img src="pic.jpg" > 그림삽입 <br>

<img src="pic.jpg" align=top> 그림삽입 <br>

<img src="pic.jpg" align=middle> 그림삽입 <br> <img src="pic.jpg" align=right>

64

■ 이미지 제목 넣기

<img src=“img_url” alt=“title” >

이미지 위치에 이미지 대신 제목 보여 줌 텍스트 베이스 브라우저에서 사용 로딩 시간 동안 이미지 위치에 보여 줌


<img src="http://www.ocu.ac.kr/images/img_01.gif" alt="OCU 로고 "> OCU 그림 삽입

65

■ 여백 및 테두리 조정

<IMG SRC=” 그림 파일 " VSPACE=n HSPACE=n>

이미지를 부동 이미지로 판별하게 해서 글자가 그 주위에 오지 못하게 함

HSPACE 속성 : 이미지의 양 옆으로 ( 가로측 ) 여백을 지정VSPACE 속성 : 이미지의 위 , 아래 여백을 지정 BORDER 속성 : 이미지의 테두리를 지정 , 강조 색깔 : BLACK


66


■ 멀티미디어 삽입 방법1. 하이퍼 사운드 / 비디오

– <A HREF=“멀티미디어 파일이름” > ….. </A>

– 링크로 연결해서 마우스를 클릭하면 새로운 화면에서 작동

2. 외부 프로그램을 작동시키는 방법– <EMBED SRC =“ 멀티미디어 파일이름”

Autostart=FALSE/TURE Width = 숫자 HEIGHT=숫자 >– 외부프로그램을 웹브라우저에 삽입하여 작동

67


■ 멀티미디어 삽입

파일 재생 방식 다운로드 : wav, mid, au, mp3 스트리밍 : ra, wmv, wma, asf

<EMBED> : 플러그인으로 작동하는 요소를 삽입 속성 - align=”{left;right;top;bottom;middle}” 텍스트와의 정렬 - border=”n” 테두리 두께 height, width=”n” 객체의 높이와 두께 - hidden=”{true;false}” : 화면상에 표시 유무 - loop=”{n;infinite}” : 반복 유무 - pluginspace=”url” 사용자가 플러그인이 없을 경우 해당 플러그인을 다운로드받을 수 있는 주소 - src=”url” 객체의 url - autostart=”{true;false}” 문서 로딩 후 자동으로 재생

68

■ 멀티미디어 삽입 예


69

■ <TABLE> 태그

표의 시작과 끝

속성 BORDER=“n” : 외부테두리 두께 , 기본 값은 0

CELLSPACING=“n” : 셀 간격 CELLPADDING=“n” : 셀 내부 여백 WIDTH=“n”, HEIGHT=“n” : 표의 너비 , 높이BGCOLOR=“color” : 표의 배경색 BORDERCOLOR=“color” : 표의 테두리 색


70

■ 표 만들기 예

<TR>..</TR> : 행 단위 지정 <TH>..</TH> : 셀 헤더 지정 <TD>..</TD> : 셀 데이터 지정


71

■ <TR>, <TD>, <TH> 에 사용되는 속성

ALIGN=“{ left|center|right }”(tr,th,td)

VALIGN=“{ top|middle|bottom }”(tr,th,td)

BGCOLOR=“color” : 셀의 배경색 (tr,th,td)

COLSPAN=“n” : 열 합병 (th,td)

ROWSPAN=“n” : 행 합병 (th,td)

NOWRAP : 문장의 줄바꿈 방지 (th,td)

WIDTH=“n”, HEIGHT=“n” : 셀의 폭 , 높이 (th,td)


72

■ 셀 합병 연습


73

■ <CAPTION> 태그

표 제목 속성 ALIGN=“{ top|bottom }” : 제목의 위치


74

프레임 나누기 – 프레임 개요

[ 프레임 분할 예 ]

상단 프레임

우측 프레임좌측 프레임

75

• 장점– 한 화면에 문서 여러 개를 동시에 보여줄 수 있다 .

– 문서가 독립적이어서 서로 다른 창의 변화는 영향을 받지 않는다 .

– 내용을 체계적으로 관리할 수 있고 , 작업 효율도 높일 수 있다 .

– 집안에서 편하게 정보를 찾아보는 것과 같은 안정감을 준다– 메뉴를 찾아 헤매는 시간을 절약해 주므로 쉽게 원하는 정보를 찾아볼 수 있다 .

• 단점– 프레임 안에서 내용을 보여주어야 하므로 답답한 느낌을 준다 .

– CGI 프로그램 사용 시 프레임 때문에 제한을 받으므로 가급적 사용하지 않는다 .

프레임 나누기 – 프레임 개요

76

■ 프레임 문서

하나의 창을 여러 개의 화면으로 분할 프레임마다 독립적인 URL 가짐 <BODY> 대신 <FRAMESET> 태그 사용

프레임 문서 제작 방법 - <FRAMESET> 태그를 이용하여 창 나누기 - <FRAMESET> 태그 내에 <FRAME> 태그를 이용하여 각 프레임에 나타낼 문서 지정


77

■ 프레임 문서


78

■ <FRAMESET> 태그프레임 정의의 시작과 끝 , 프레임 설정 속성 ROWS, COLS : 행 또는 열 방향으로의 프레임구분ROWS=“ 프레임 1 크기 , 프레임 2 크기 , … ”ROWS=“200, 600” COLS=“30%, 70%” ROWS=“100, *, 100”FRAMEBORDER=“{ yes|no }” : 경계선 표시 유무 FRAMESPACING : 경계선의 두께 BORDERCOLOR : 경계선 색상


79

■ <FRAME> 태그

각각의 프레임에 표시할 문서 지정

속성 SRC=“url” : 프레임에 보여질 HTML 문서의 URL

NAME=“name” : 프레임의 이름SCROLLING=“{ yes|no|auto }” : 스크롤 바 생성유무NORESIZE : 프레임크기 고정

프레임 설정 순서 : 왼쪽 -> 오른쪽 , 위 -> 아래


80

■ <FRAME> 이름 (1)

Target 지정

<a href=“….” target=“……”>

_top, _blank, _self, 프레임 이름

기본 Target 설정 <base target=“…... “> : <HEAD> 태그 내에 선언


81

■ <NOFRAMES> 태그

<FRAME> 태그를 지원하지 않는 브라우저를 위해 설정

<html>

<head> </head>

<frameset cols=“200,*”>

<frame src=“1.htm”>

<frame src=“2.htm” name=“main”>

</frameset>

<noframes>

<body>

이 페이지를 보려면 프레임을 지원하는 브라우저가 필요합니다 .

</body>

</noframes>

</html>


82

■ 다중 프레임 문서

<frameset cols="50,*"> <frame> <frameset rows="60,*">

<frame> <frame> </frameset>

</frameset>


83

■ 플로팅 프레임 문서

<IFRAME> : 플로팅 프레임 src=“url” 로드할 문서의 URL

width, height = “n” 프레임의 크기 지정 align : iframe 위치 지정 주위에 글자가 배치될 수 있게 할 수 있는 박스형 프레임 생성 태그


84

■ 플로팅 프레임 문서 예


85

• _blank– 무조건 새 창에 띄운다 .

• _self– 기본 값으로 자기자신의 창 ( 현재 창 ) 에 띄운다 .

• _top– 프레임을 모두 제거하고 하나의 창에 띄운다 .

• _parent– 프레임이 주종관계를 이룰 때 종속 프레임을 제거하고 하나의 창에

보여주므로 프레임의 형태는 주 ( 상위 ) 프레임 상태가 된다 .

프레임 나누기 – 원하는 프레임에 문서 보여주기

[target 속성의 예약어 ]

86

■ 입력 폼

사용자로부터 정보를 입력 받을 수 있는 형식

속성 NAME : 폼 이름 ACTION : 폼에서 입력된 데이터를 보내서 처리하는 프로그램의 URL 을 지정 METHOD : 데이터 전송 방법


87

태그명 결과 설명<form></form> 안 보임 폼 양식의 시작과 끝<input type=text> 한 줄 입력 상자<input type=password>

* 로 표시되는 암호 입력상자<input type=radio> 라디오 버튼<input type=checkbox>

체크상자<input type=button> 일반 버튼

폼 양식으로 회원전용 공간 만들기 – 폼 관련 태그

[ 폼 관련 태그 (1)]

88

폼 양식으로 회원전용 공간 만들기 – 폼 관련 태그

<input type=submit> 전송확인 버튼<input type=reset> 초기화 버튼<input type=image> 이미지 버튼<input type=file> 파일 업로드<input type=hidden> 안 보임 숨겨진 필드<textarea></textarea> 여러 줄 입력상자<select></select> 목록 상자의 시작과 끝<option> 목록 상자에 포함될 항목 지정

태그명 결과 설명

[ 폼 관련 태그 (2)]

89

■ 텍스트 입력 양식

<INPUT>

속성 TYPE=“text” : 텍스트 입력상자 NAME = “field_name” : 입력상자 이름 SIZE = “n” : 입력상자 크기 ( 디폴트 :20)

MAXLENGTH = “n” : 최대 입력가능 글자 수 VALUE = “value” : 입력상자 초기 값 TITLE : 마우스 오버 시 표시 문자 READONLY : 입력 불가


90

■ 패스워드 입력 양식

<INPUT>

속성 TYPE=“password” : 패스워드 입력상자 NAME = “field_name” : 입력상자 이름 SIZE = “n” : 입력상자 크기 ( 디폴트 :20)

MAXLENGTH = “n” : 최대 입력가능 글자 수 VALUE = “value” : 입력상자 초기 값


<HTML> <head> <title>테스트 문서 </title> </head> <body> <form> 이름 <input type=text size=30 value=“ 이곳에 이름을 입력하세요” > <br> 비밀번호 <input type=password> <br> </form> </body></HTML>

91

■ 체크상자 양식

<INPUT>

속성 TYPE=“checkbox” : 체크박스 NAME = “field_name” : 체크박스 이름 VALUE = “value” : 선택 시 넘겨줄 데이터 CHECKED : 체크된 상태로 로딩


<HTML> <head> <title>테스트 문서 </title> </head> <body> 좋아하는 프로그램 언어를 선택하시오 <form> <input type=checkbox name=prolang value=0 checked> 비주얼 베이직 <br> <input type=checkbox name=prolang value=1> 델파이 <br> <input type=checkbox name=prolang value=2> 비주얼 C++ <br> <input type=checkbox name=prolang value=3> 자바 <br> </form> </body></HTML>

92

■ 라디오 버튼 양식

<INPUT>

속성 TYPE=“radio” : 옵션 버튼 NAME = “field_name” : 옵션 버튼 이름 같은 이름으로 그룹화 VALUE = “value” : 선택 시 넘겨줄 데이터


<HTML> <head> <title>테스트 문서 </title> </head> <body> 좋아하는 프로그램 언어를 하나만 선택하시오 <form> <input type=radio name=prolang value=0 checked> 비주얼 베이직 <br> <input type=radio name=prolang value=1> 델파이 <br> <input type=radio name=prolang value=2> 비주얼 C++ <br> <input type=radio name=prolang value=3> 자바 <br> </form> </body></HTML>

93

■ 일반 버튼 양식

<INPUT>

속성 TYPE=“button” : 일반 버튼 NAME = “button_name” : 버튼 이름 VALUE = “value” : 버튼에 표시할 글자


<input type=button value=“ 버튼이름 " >

94

■ 확인 버튼 양식

<INPUT>

속성 TYPE=“submit” : 확인 버튼 NAME = “button_name” : 확인 버튼 이름 VALUE = “value” : 버튼에 표시할 글자


<input type=submit value=“ 버튼이름 " >

95

■ 취소 버튼 양식

<INPUT>

속성 TYPE=“reset” : 취소 버튼 NAME = “button_name” : 취소 버튼 이름 VALUE = “value” : 버튼에 표시할 글자


<input type=reset value=“ 버튼이름 " >

96

■ 파일선택 버튼 양식

<INPUT>

속성 TYPE=“file” : 파일 선택 버튼 NAME = “button_name” : 버튼 이름 파일 입력상자와 버튼이 자동 생성


<input type=file >

97

■ 기타

그림 버튼 속성 TYPE=“image” : 그림 버튼 NAME = “button_name” : 버튼 이름 SRC = “url” : 그림 파일 위치 숨김 양식 속성 TYPE=“hidden” : 숨김 양식 NAME = “name” : 양식 이름


98

■ 리스트박스 양식

<SELECT> : 리스트박스의 시작과 끝 속성 SIZE=“n” : 리스트박스 크기 NAME = “listbox_name” : 박스 이름

MULTIPLE : 복수 항목 선택 가능

<OPTION> : 각 항목을 설정 속성 SELECTED : 초기 선택 상태 VALUE = “value” : 선택 시 할당 값


99

■ 콤보박스 양식

<SELECT> : 콤보박스의 시작과 끝 속성 NAME = “listbox_name” : 박스 이름

<OPTION> : 각 항목을 설정 속성 SELECTED : 초기 선택상태 VALUE = “value” : 선택 시 할당 값


100

■ 리스트박스 예제 (1)


101

■ 리스트박스 예제 (2)


102

■ 메모 입력상자 양식

<TEXTAREA>

속성 ROWS, COLS : 행과 열의 개수NAME = “name” : 상자 이름


103

<HTML><head> <title>테스트 문서 </title> </head><body>

<form> 아이디 <input type=text> <br> 암호 <input type=password> <br>

<input type=radio>남자 <br> <input type=radio> 여자 <br> <input type=checkbox> 영화감상 <br> <input type=button value=" 버튼 "> <br> <input type=submit> <br> <input type=reset> <br> <input type=image> <br> <input type=file> <br> <input type=hidden> <br> <textarea rols=12 cols=70> 여기에 쓰세요 </textarea> <br> <select size=3>

<option>1 </option> <option>2 </option><option>3 </option> <option>4 </option><option>5 </option>

</select> <br> <select>

<option>011 </option> <option> 016 </option><option>017 </option> <option> 018 </option><option> 019 </option>

</select> <br></form>

</body></HTML>

Documents

홈페이지