Microsoft PowerPoint - HTML-CSS3.pptx

Size: px

Start display at page:

Download "Microsoft PowerPoint - HTML-CSS3.pptx"

창욱 뇌
6 years ago
Views:

1 HTML & CSS3 고덕한 1

2 과정개요 HTML 에대한기초지식습득 HTML 구성요소파악 CSS 이해및활용 JavaScript 개요및사용법파악 DHTML을적용한페이지구성 2

3 HTML Structure 1. HTML 이해 2. CSS (Cascading Style Sheet) 3. JavaScript 4. 브라우저내장객체 5. 폼 (FORM) 관련객체 6. 레이어 (Layer) 와 DHTML 3

4 HTML 개요 HTML Hyper Text Markup Language 의약어 HTML 의기본구조 <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> 4

5 HTML 개요 태그의역할 <HTML> </HTML> 문서의시작과끝 <HEAD> </HEAD> 문서전체의정보를제공 <TITLE>, <META>, <SCRIPT>. <STYLE> 태그포함가능 <META> </META> 문서정보및사이트이동, 화면전환효과, 웹페이지검색기능 <TITLE> </TITLE> 브라우저의제목표시줄에나타날문서제목표시 <BODY> </BODY> 웹페이지몸체부의시작과끝을나타내는문서 5

6 HTML 개요 태그의역할 <HTML> </HTML> 문서의시작과끝 <HEAD> </HEAD> 문서전체의정보를제공 <TITLE>, <META>, <SCRIPT>. <STYLE> 태그포함가능 <META> </META> 문서정보및사이트이동, 화면전환효과, 웹페이지검색기능 <TITLE> </TITLE> 브라우저의제목표시줄에나타날문서제목표시 <BODY> </BODY> 웹페이지몸체부의시작과끝을나타내는문서 6

7 HTML 개요 태그의역할 HTML 소스와화면 HTML 에서태그와화면에보이도록처리하는부분 7

8 문서관련기본태그 배경관련태그 <BODY> 태그의 Element 로배경을처리 기능속성속성값사용예 배경색지정 bgcolor 색상 <body bgcolor = red > 배경이미지지정 background 이미지파일명 <body background= 이미지파일명 > 배경글자색지정 text 색상 <body text= white > 하이퍼링크글자색지정 link 색상 <body link= red > 클릭될하이퍼링크글자색지정 클릭후하이퍼링크글자색지정 alink 색상 <body link= blue > vlink 색상 <body vlink= black > 문서의윗여백지정 topmargin 픽셀 <body topmargin= 100 > 문서의왼쪽여백지정 leftmargin 픽셀 <body leftmargin= 50 > 배경이미지고정 bgproperties fixed <body bgproperties= fixed > 스크롤바비활성화 scroll no <body scroll= no > 8

9 문서관련기본태그 글꼴관련태그 <FONT> 태그의속성과속성값 기능 속성 속성값 사용예 글자색지정 color 색상 <font color = red > 글꼴지정 face 글자체 <font face = 굴림체 > 글자크기지정 size 숫자 <font size = 2 > 글꼴설정태그 기능 태그 기능 태그 기능 태그 굵은글자체 <b> 최소선표시 <strike> 아래첨자 <sub> 이탤릭체 <i> 타이핑체 <tt> 한단계크게 <big> 밑줄표시 <u> 윗첨자 <sup> 한단계작게 <small> 9

10 문서관련기본태그 글꼴관련태그 글꼴설정태그 ( 계속 ) 기능 태그 기능 태그 강조할부분이탤릭체로표시 <em> 키보드입력표시시고정폭글자체 <kbd> 강조할부분굵은문자로표시 <strong> 변수이름표기시이탤릭체로표시 <var> 코딩시고정폭글자체로표시 <code> 인용구를이탤릭체로표시 <cite> 샘플출력시고정폭글자체로표시 <samp> 이탤릭체로정의표시 <dfn> 특수문자표기법설명표기법설명 < 여는괄호 저작권표시 > 닫는괄호 상표표시 공백문자 등록상표표시 & & 기호표기 프랑표시 " 쌍따옴표 엔표시 10

11 문서관련기본태그 문단관련태그 기능속성속성값사용예 줄바꿈 <br> 내용 <br> 문단구분및줄바꿈 <p> align 내용 <p> // 내용후줄바꿈 <p align=center> 내용 </p> // 내용을중앙정렬 문단구분 <div> align <div align=left> 내용 </div> 제목출력 <h 숫자 > align <h2 align=center> 내용 </h2> //h2 크기로중앙정렬해서내용출력숫자는 1~6 까지사용가능 중앙정렬 <center> <center> 내용 </center> 수평선 <hr> align size width color Noshade <hr size= 굵기 width= 길이 align= 정렬방식 color= 색상 Noshade> 키보드로입력한형식유지 <pre> <pre> 내용 </pre> // 내용은그대로출력되므로공백을위한특수문자는사용하지않음 11

12 문서관련기본태그 문단관련태그 ( 계속 ) 기능속성속성값사용예 태그그대로출력 <xmp> <xmp> 내용 </xmp> // 내용에있는태그그대로출력되므로 html 태그강의록작성시유리함 주석문   width 문자열흘러가기 marquee height behavior direction loop scrolldelay scrollmount <marquee width= 너비 height= 높이 behavior=scroll/slide/alternate direction=left/right/up/down loop= 횟수 scrolldelay= 시간간격 scrollamount= 움직이는거리 bgcolor= 배경색 > 내용 </marquee> bgcolor 12

13 문서관련기본태그 목록관련태그 비순서목록 <ul type = 서블릿종류 > <lh> 목록의제목 <li> 목록 1 <li> 목록 2 </ul> 순서목록 <ol type = 서블릿종류 > <lh> 목록의제목 <li> 목록 1 <li> 목록 2 </ol> 13

14 문서관련기본태그 목록관련태그 목록태그속성 기능 속성 사용예 시작번호지정 start <ol start=10> //10 부터번호부여 해당목록의시작번호지정 목록번호스타일지정 value type <li value=10> //10부터목록번호를부여 <ol type=a> // 소문자로번호를부여 <li type=i> // 로마자소문자로해당목록의번호를부여 인용문 <blockquote> 인용문 </blockquote> 14

href=" 전체 URL" title=" 설명 " target=" 창이름 "> 화면에표시될글자 </a> mail

15 문서관련기본태그 하이퍼링크 (<a href>) 관련태그 동일도메인내의다른웹페이지연결 <a href=" 연결할파일명 " title=" 설명 " target=" 창이름 "> 화면에표시될글자 </a> 다른도메인내의다른웹페이지연결 <a href=" 전체 URL" title=" 설명 " target=" 창이름 "> 화면에표시될글자 </a> mail 주소와연결 <a href="mailto: 이메일주소 " title=" 설명 " target=" 창이름 "> 화면에표시될글자 </a> 15

16 문서관련기본태그 이미지 (<img>) 관련태그 이미지태그 <img src=" 그림파일명 " alt=" 설명문 " width=" 가로 height=" 세로 " border=" 테두리 " align=" 정렬방식 " vspace=" 상하여백 " hspace=" 좌우여백 "> 이미지맵태그 하나의이미지에여러개의링크를설정 <map> 태그사용 <img src=" 그림파일명 " usemap="# 맵이름 "> <map name=" 이름 "> <area shape=" 맵의종류 " coords=" 좌표값 " href=" 링크될주소 " alt=" 설명문 "> </map> 16

17 테이블 (<table>) 관련태그 테이블의속성 테이블태그의형식 <table> <caption> 표제목 </caption> <tr> --> 행구분 <th> 열의제목 </th> <td> 셀의내용 </td> </tr> </table> 17

18 테이블 (<table>) 관련태그 테이블의속성 테이블태그속성 기능속성사용예 전체너비지정 전체높이지정 배경색지정 배경이미지지정 정렬방식지정 셀안의여백지정 셀간의여백지정 테이블의테두리색지정 width height bgcolor background align cellpadding cellspacing bordercolor <table width= 600 > // 테이블전체너비를 600 픽셀로지정 <table height= 600 > // 테이블전체높이를 600 픽셀로지정 <table bgcolor= red > // 테이블전체색상을빨간색으로지정 <table background= bg.gif > // 테이블전체의이미지지정 <table align= center > // 테이블전체의정렬방식을중앙으로지정 <table cellpadding= 5 > // 셀안의내용과경계선사이여백을 5 픽셀로지정 <table cellspacing= 5 > // 셀간의여백을 5 픽셀로지정 <table bordercolor= red > // 테이블테두리를빨간색으로지정 18

19 테이블 (<table>) 관련태그 테이블의속성 테이블태그속성 ( 계속 ) 기능속성사용예 테이블의그림자 테두리선의유무지정 테이블안쪽경계선의유무지정 테이블과주변글들과의여백지정 bordercolordark frame rules hspace/vspace <table bordercolordark= red > // 테이블우측과아랫부분에그림자를빨간색으로지정 <table frame= voide/hside/vside/above/below/lhs/rhs/box > // 테이블선의유무를지정 <table rules= none/rows/cols/group/all > // 테이블안쪽경계선의지정 <table hspace/vspace= left/top > // 테이블내용은왼쪽정렬이고, 수직으로는위쪽정렬 19

20 테이블 (<table>) 관련태그 행과셀내용의속성 행의속성 기능속성사용예 전행너비지정 행높이지정 행의배경색지정 정렬방식지정 width height bgcolor align/valign <tr width= 600 > // 행너비를 600 픽셀로지정 <tr height= 600 > // 행높이를 600 픽셀로지정 <tr bgcolor= red > // 행전체색상을빨간색으로지정 <tr align= center valign= top > // 행의가로는중앙, 세로는상단으로정렬 20

21 테이블 (<table>) 관련태그 행과셀내용의속성 셀의속성 기능속성사용예 셀내용너비지정 셀내용높이지정 셀내용의배경색지정 셀내용의배경이미지지정 정렬방식지정 여러행에있는칸들을통합 여러열에있는행들을통합 width height bgcolor background align/valign rowspan colspan <td width= 600 > // 셀내용너비를 600 픽셀로지정 <td height= 600 > // 셀내용높이를 600 픽셀로지정 <td bgcolor= red > // 셀내용전체색상을빨간색으로지정 <td background= bg.gif > // 셀내용의이미지지정 <td align= center valign= top > // 셀내용의가로는중앙, 세로는상단으로정렬 <td rowspan= 2 > // 셀내용이담긴 2 행을 1 행으로합침 <td colspan= 2 > // 셀내용이담긴 2 열을 1 열로합침 21

22 테이블 (<table>) 관련태그 행과열의셀합치기 행합치기 (rowspan) 열합치기 (colspan) <table border> <caption> 성적표 </caption> <tr><td rowspan="2"> 국어 </td> <td>80 점 </td> </tr> <tr><td>90 점 </td> </tr> </table> <table border> <caption> 성적표 </caption> <tr><td colspan="2"> 국어 </td></tr> <tr> <td>80 점 </td> <td>90 점 </td> </tr> </table> 22

23 폼 (form) 관련태그 폼 (form) 태그 웹페이지에서사용자에게정보를입력받는형식 브라우저안에서사용자에게받은정보를서버에게전달하는동적인처리가능 <form> 태그종류 : 텍스트입력, 체크박스, 목록상자등 폼태그형식 <form name=" 폼이름 " action=" 연결될서버프로그램명 method=" 전송방식 "> <input type=... > <select>...</select> <textarea>...</textarea> </form> method : 전송방식지정 get, post 사용 action : 폼양식에입력된값을처리할서버프로그램명지정 ( 주로 URL) PHP, JSP, ASP, C 등 23

24 폼 (form) 관련태그 폼 (form) 태그 웹페이지에서사용자에게정보를입력받는형식 브라우저안에서사용자에게받은정보를서버에게전달하는동적인처리가능 <form> 태그종류 : 텍스트입력, 체크박스, 목록상자등 폼태그형식 <form name=" 폼이름 " action=" 연결될서버프로그램명 method=" 전송방식 "> <input type=... > <select>...</select> <textarea>...</textarea> </form> method : 전송방식지정 get, post 사용 action : 폼양식에입력된값을처리할서버프로그램명지정 ( 주로 URL) PHP, JSP, ASP, C 등 24

25 폼 (form) 관련태그 Input 형식 텍스트입력시사용하는형태 <form> <input type= " 입력종류 " name=" 이름 " size=" 길이 " value=" 기본문자열 "> </form> 입력종류속성 기능속성사용예 text password name size maxlength value title name size maxlength value title 이름화면에나타날크기최대입력글자수기본문자값설명문 이름화면에나타날크기최대입력글자수기본문자값설명문 <input type= text size= 10 value= 학생 > <input type= password size= 10 > 25

26 폼 (form) 관련태그 Input 형식 입력종류속성 ( 계속 ) 기능속성사용예 radio checkbox button submit reset file image hidden name value checked name value checked name value name value name value name value name value src name value 이름선택한값을서버에전달초기체크표시 이름선택한값을서버에전달초기체크표시 이름버튼위에표기할문자 이름버튼위에표기할문자 이름버튼위에표기할문자 이름버튼위에표기할문자 이름사용할이미지파일설정 이름초기값 <input type= radio checked> <input type= checkbox checked> <input type= button value= 전송 > <input type= submit value= 쿼리전송 > <input type= reset value= 원래대로 > <input type= file value= 찾아보기 > <input type= image value= 버튼 src= button.gif > <input type= hidden value= 홍길동 > // 보이지않는형식 26

27 폼 (form) 관련태그 Select 형식 목록상자입력형식에사용되는태그 <option> 태그로하위목록리스트표현 사용가능한속성 <form> <select name=" 이름 "> <option value=" 해당목록선택시전송될값 "> 화면에표시할내용... </select> </form> name : 이름 value : 목록선택시전송될값 selected : 최초에설정된기본값 size : 목록상자의크기지정 multiple : 동시에 2개이상의기본값을지정할수있음 27

28 폼 (form) 관련태그 Textarea 형식 여러줄의입력을가능하게하는형식 <form> <textarea name=" 이름 " rows=" 행의수 " cols=" 열의수 ">... </textarea> </form> name : 이름 rows : 입력가능한전체행의수 cols : 입력가능한전체열의수 wrap : 자동줄바꿈사용 physical : 화면상의줄바꿈상태그대로서버에전송 virtual : 화면상에서는줄바꿈되지만, 서버로전송될때는한줄로이어서전송 28

29 프레임 (frame) 프레임형식 브라우저화면을여러개로나누어서이용하는것을의미 분할방식 : 좌 / 우, 여러개의영역으로분할가능 <frameset rows=" 각프레임크기 " cols =" 각프레임크기 "> <frame src=" 보여줄파일명 " name=" 프레임명 ">... </frame> </frameset> <Frameset> </frameset> : 프레임분할 <frame> </frame> : 분할영역의내용 rows : 상하분할 cols : 좌우분할 프레임크기 : 픽셀, %, 상대적크기지정가능 29

30 프레임 (frame) 프레임형식 프레임나누기예 <frameset rows=" 50, 30, * "> 화면을상하로 3 등분하는데크기는 50 픽셀, 30 픽셀, 나머지로분할한다. </frameset> <frameset rows=" 50%, 50% "> 화면을상하로 50% 씩분할한다. </frameset> <frameset rows=" *, 2* "> 화면을상하 2 개로분할하는데아래가위의 2 배가되도록분할한다. </frameset> 30

31 프레임 (frame) 프레임형식 <frameset> 태그속성속성 cols 프레임을수직분할 내용 rows border rows 프레임을수평분할 border 분할프레임의경계선에대한설정을하고, 0 일경우선이보이지않음 <frame> 태그속성속성 src name 해당프레임에출력될내용을지정 프레임의이름을지정 내용 noresize scrolling marginheight marginwidth 프레임의크기를조절하지못하도록지정해당프레임에서스크롤사용여부지정 (YES NO AUTO) 해당프레임의상하여백을픽셀단위로지정해당프레임의좌우여백을픽셀단위로지정 31

32 프레임 (frame) iframe 프레임을나누지않고문서안에서여러개의문서를보여줄때사용 <iframe> 태그속성 속성 내용 src name width height frameborder align scrolling marginheight marginwidth 내부프레임안에출력될문서지정내부프레임의이름을지정내부프레임의너비를지정내부프레임의높이를지정내부프레임의경계선표시유무지정내부프레임에서정렬방식지정내부프레임에서스크롤사용여부지정 (YES NO AUTO) 내부프레임의상하여백을픽셀단위로지정내부프레임의좌우여백을픽셀단위로지정 32

33 스타일쉬트 (Cascading Style Sheet) 1. HTML 이해 2. CSS 3. JavaScript 4. Event 33

34 HTML 에대한기초지식 1. HTML 이해 2. CSS (Cascading Style Sheet) 3. JavaScript 4. 브라우저내장객체 5. 폼 (FORM) 관련객체 6. 레이어 (Layer) 와 DHTML 34

35 스타일 (Cascade Style Sheet:CSS) 스타일시트의종류 내부스타일시트 <head> <style type="text/css" 또는 type="text/javascript">  </style> </head> 외부스타일시트 <link rel="stylesheet" type="text/css" 또는 type="text/javascript" href=" 파일명.css"> 행스타일시트 < 태그 style = " 속성 : 속성값 ">... </ 태그 > 35

36 스타일 (Cascade Style Sheet:CSS) 스타일시트정의방법 기본사용형식 스타일을정의하기위한기본요소는속성과속성값으로구성 스타일을적용할대상을선택자 (selector) 라함 선택자 1,..., { 속성 1 : 속성값 1; 속성 2: 속성값 2;... 속성 n: 속성값 n} 36

37 스타일 (Cascade Style Sheet:CSS) 다양한스타일시트적용예제 기본으로적용 <HTML> <HEAD> <TITLE> 스타일시트기본사용법 </TITLE> <STYLE type="text/css">  </STYLE> </HEAD> <BODY> <H1> 스타일적용된제목 H1 </H1> <P> 첫번재스타일시트 <br> 색은파란색배경색은빨간색 </P> </BODY> </HTML> 37

38 스타일 (Cascade Style Sheet:CSS) 다양한스타일시트적용예제 class 이용 <HTML> <HEAD> <TITLE> 클래스이용 - 스타일시트 </TITLE> <STYLE type="text/css">  </STYLE> </HEAD> <BODY><center> <p CLASS="content1"> p 태그에 class 속성을부여한경우 </p> <h1 CLASS="content2"> class 속성을부여한경우 </p> </BODY> </HTML> 38

39 스타일 (Cascade Style Sheet:CSS) 다양한스타일시트적용예제 id 이용 <HTML> <HEAD> <TITLE> ID 이용 - 스타일시트 </TITLE> <STYLE type="text/css">  </STYLE> </HEAD> <BODY><center> <p id="con1"> p 태그에 id 속성을부여한경우 </p> <h3 id="con2"> id 속성을부여한경우 </p> </BODY> </HTML> 39

40 스타일 (Cascade Style Sheet:CSS) 스타일시트적용속성 border backgroup 40

41 스타일 (Cascade Style Sheet:CSS) 스타일시트적용속성 font margin padding text 41

42 스타일 (Cascade Style Sheet:CSS) 스타일시트적용속성 42

43 HTML 에대한기초지식 1. HTML 이해 2. CSS (Cascading Style Sheet) 3. JavaScript 4. 브라우저내장객체 5. 폼 (FORM) 관련객체 6. 레이어 (Layer) 와 DHTML 43

44 자바스크립트 (Javascript) 개요 자바스크립트의개요 자바스크립트는웹브라우저에서사용할수있는스크립트언어 HTML 문서내에함께존재 자바스크립트의특징 브라우저해석기에서실행하므로별도프로그램필요없음 HTML로는표현이불가능했던프로그램적인활용이나동적인표현이가능해좀더역동적인홈페이지를만들수있음 서버로전송될자료의검증을웹프로그램이실행되기전인클라이언트단계에서실행 AJAX 기술을사용한비동기통신가능 44

45 자바스크립트 (Javascript) 사용법 자바스크립트의기본구조 <HEAD> 태그내에서선언하고 <BODY> 태그내에서실행 <SCRIPT>..... </SCRIPT> 태그내에서구성 <SCRIPT> 자바스크립트내용 </SCRIPT> <SCRIPT src= 자바스크립트파일명 > </SCRIPT> 주석문 - 프로그램내용설명 /* */ => 여러줄주석 // => 한줄주석 45

46 자바스크립트 (Javascript) 사용법 자바스크립트의실행 자바스크립트함수를호출하여실행 <HTML> <HEAD><TITLE> 자바스크립트 </TITLE> <SCRIPT LANGUAGE="JavaScript"> function 함수명 ( ) { alert(" 함수를클릭하였습니다!!!"); } </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> 함수명 () </SCRIPT> </BODY> </HTML> 46

47 자바스크립트 (Javascript) 사용법 자바스크립트의실행 이벤트가발생할때자바스크립트함수를호출하여실행 <HTML> <HEAD><TITLE> 자바스크립트 </TITLE> <SCRIPT LANGUAGE="JavaScript"> function 함수명 ( ) { alert(" 함수를클릭하였습니다!!!"); } </SCRIPT> </HEAD> <BODY> <a href="javascript: 함수명 ();"> 클릭 </a> </BODY> </HTML> 47

48 자바스크립트 (Javascript) 사용법 자바스크립트사용시주의사항 한줄에한개이상의항과기호로구성 새로운줄은새로운문장으로시작 한줄에서두문장이상을작성할때세미콜론 (;) 사용 동일한실행문들은 { } 로둘러싼다. 명령문이길어서한줄을넘어갈때 _ 로연결 따옴표가중복되는경우외부에는큰따옴표, 내부에는작은따옴표사용 48

49 자바스크립트 (Javascript) 기본문법 변수개요 var kim // 변수선언변수명은 kim var i, j, k // 동시에여러개의변수선언 var i=1 // 변수선언과동시에기본값할당 대소문자를구별하며, 반드시첫자는영문자로시작 문자와숫자만으로구성, 한글과밑줄 (_) 를제외한특수문자와공백은사용불가 예약어, 함수명, 객체명, 속성등은변수로사용불가 변수의종류 전역변수와지역변수 전역변수 : 스크립트어디에서나사용가능 지역변수 : 해당함수내에서만사용 49

50 자바스크립트 (Javascript) 기본문법 연산자 산술연산자 : 수치계산에사용 +, -, *, / 관계연산자 : 값을비교하는연산자 <, >, <=, >=, ==,!= 조건연산자 : 조건에따라참과거짓으로나타내는연산 조건식? 표현문 1 : 표현문 2 비트연산자 : 두수의비트사이에일어나는연산 A B, A & B, A ^ B 50

51 자바스크립트 (Javascript) 기본문법 연산자 대입연산자 : 변수에값을대입할때사용하는연산자 =, +=, -=, 논리연산자 : 조건의참, 거짓을판단 &&(AND), (OR),!(NOT) 문자열연산자 : 문자들을연결시키는역할, + 51

52 자바스크립트 (Javascript) 기본문법 조건문 조건이참인경우에만처리 조건에만족하는경우와그렇지않은경우의처리 52

53 자바스크립트 (Javascript) 기본문법 조건문 조건이참인경우와조건이거짓인경우 n 개일때의처리 53

54 자바스크립트 (Javascript) 기본문법 반복문 for 문 : 초기값에의해시작되고, 조건을만족할때까지실행 while 문 : 조건이참인동안문장을수행 while ( 조건 ) { 문장 ; } 54

55 자바스크립트 (Javascript) 기본문법 반복문 do..while 문 : while 문과다르게반드시문장을한번은수행 break( 블럭종료 ) 와 continue( 조건문으로분기 ) 문 55

56 함수의개요 함수의형식 자바스크립트내장함수 alert() : 경고창을띄워주는내장함수 prompt() : 사용자입력창을띄워입력한값을리턴 confirm() : 다이얼로그박스를띄워확인 / 취소에따라결과값을리턴 eval() : 문자열로입력된수식을계산해주는내장함수 사용자정의함수 내장함수이외의기능을사용하고할때, 사용자정의함수를사용 <HTML> <HEAD><TITLE> 함수의형식 </TITLE> <SCRIPT LANGUAGE="JavaScript" > function 함수명 ( 매개변수 1, 매개변수 2,...) { 함수처리내용 ; } </SCRIPT> </HEAD> 56

57 함수의개요 매개변수가없는함수 가장단순한형태로호출하고처리를종료하는경우사용 function 함수명 () { 함수처리내용 ; } 매개변수가있는함수 함수에사용자가값을주는형태로여러값을가지고호출 function 함수명 ( 매개변수 1, 매개변수 2,...) { 함수처리내용 ; } 57

58 함수의개요 매개변수가없는함수 가장단순한형태로호출하고처리를종료하는경우사용 function 함수명 () { 함수처리내용 ; } 매개변수가있는함수 함수에사용자가값을주는형태로여러값을가지고호출 function 함수명 ( 매개변수 1, 매개변수 2,...) { 함수처리내용 ; } 결과를돌려주는사용자정의함수 함수에서처리한결과를다시호출부분에서처리 return을사용해서함수호출부에결과를돌려주는역할 function 함수명 ( 매개변수 1, 매개변수 2,...) { return 결과값 ; } 58

59 자바스크립트내장함수 내장함수 alert() : 경고창을띄워주는내장함수 <HTML> <HEAD><TITLE> 자바스크립트 </TITLE> <SCRIPT LANGUAGE="JavaScript"> function 함수명 () { alert(" 경고창을띄워준다."); } </SCRIPT> </HEAD> <BODY> <a href="javascript: 함수명 ();"> 클릭 </a> </BODY> </HTML> 59

자바스크립트내장함수 내장함수 conform() : True/False 값으로확인하는창을띄워주는내장함수 <HTML> <HEAD><TITLE> 자바스크립트 </TITLE> <SCRIPT LANGUAGE="JavaScript"> function 함수명 () { var result = confirm("

60 자바스크립트내장함수 내장함수 conform() : True/False 값으로확인하는창을띄워주는내장함수 <HTML> <HEAD><TITLE> 자바스크립트 </TITLE> <SCRIPT LANGUAGE="JavaScript"> function 함수명 () { var result = confirm(" 확인하는창을띄워준다."); if(result) { alert(" 확인 (True) 를선택하였습니다."); } else { alert(" 취소 (False) 를선택하였습니다."); } } </SCRIPT> </HEAD> <BODY> <a href="javascript: 함수명 ();"> 클릭 </a> </BODY> </HTML> 60

61 자바스크립트내장함수 내장함수 prompt() : 입력창을띄워주는내장함수 <HTML> <HEAD><TITLE> 자바스크립트 </TITLE> <SCRIPT LANGUAGE="JavaScript"> function 함수명 () { var result = prompt(" 입력할내용을적어주세요!!"); alert(" 입력한값 : " + result); } </SCRIPT> </HEAD> <BODY> <a href="javascript: 함수명 ();"> 클릭 </a> </BODY> </HTML> 61

62 자바스크립트내장함수 내장함수 eval() : 문자열려입력된수식을계산해주는내장함수 입력양식을통해입력된값을계산할때유용 <HTML> <HEAD><TITLE> 자바스크립트 </TITLE> <SCRIPT LANGUAGE="JavaScript"> function 함수명 () { var input = prompt(" 입력할내용을적어주세요!!"); var result = eval(input) alert(" 입력한값 : " + result); } </SCRIPT> </HEAD> <BODY> <a href="javascript: 함수명 ();"> 클릭 </a> </BODY> </HTML> 62

63 자바스크립트내장함수 다른유용한내장함수 parseint( ) 함수 문자열을정수로반환 parsefloat( ) 함수 문자열을실수로반환 parseint( 문자열, 변환진법 ) parsefloat( 문자열 ) isnan( ) 함수 문자판단. 숫자면 false 문자면 true 반환 isnan(" 판별할내용 ") escape( )/unescape( ) 함수 ASCII 코드와문자교환 escape( 문자 ) unescape( 문자열 ) 63

64 자바스크립트객체 객체란 다른프로그래밍언어와같이자바스크립트도객체를정의 자바스크립트에서객체는생성자함수를이용해서생성 생성자함수는객체의속성과메소드를정의하기위해서사용되는함수 function 객체이름 ([ 전달인수리스트 ]) { 속성을위한변수 [= 초기값 ];... 메소드를위한함수 = 함수이름 ;... } Member = function(id, name, address) { this.id = id; this.name = name; this.address = address; } 64

65 자바스크립트객체 객체란 객체에함수를정의 두가지방법으로함수정의가능 클래스명.prototype = { 함수이름 :function( 파라미터 ) { 함수내용 ;... } // 함수와함수는콤마 (,) 로구분 } Member.prototype = { show:function() { return this.id + ":" + this.name + ":" + this.address; }, home:function(address) { return " 집주소 : " + address; } } 클래스명.prototype. 함수명 = function( 파라미터 ) { 함수내용 ;... } Member.prototype.setName = function(name) { this.name = name; } 65

66 자바스크립트객체 객체란 객체사용 new 연산자를사용하여객체를생성 var 변수명 = new 클래스명 ( 파라미터 ); var member1 = new Member("java", " 홍길동 ", " 서울시강남구 "); 66

67 자바스크립트객체 객체란 객체사용 : 예제 new 연산자를사용하여객체를생성 <HTML> <HEAD><TITLE> 자바스크립트 </TITLE> <SCRIPT LANGUAGE="JavaScript"> Member = function(id, name, address) { this.id = id; this.name = name; this.address = address; } Member.prototype = { show:function() { return this.id + ":" + this.name + ":" + this.address; }, home:function(address) { return " 집주소 : " + address; } } Member.prototype.setName = function(name) { this.name = name; } 67

68 자바스크립트객체 객체란 객체사용 : 예제 new 연산자를사용하여객체를생성 function 함수명 () { var member1 = new Member("java", " 홍길동 ", " 서울시강남구 "); alert(member1.show()); alert(member1.home(" 서울시서초구 ")); member1.setname(" 이순신 "); alert(member1.show()); } </SCRIPT> </HEAD> <BODY> <a href="javascript: 함수명 ();"> 클릭 </a> </BODY> </HTML> 68

69 자바스크립트객체 내장객체 Date 객체 프로그램에서날짜와시간에대한정보제공 객체명 = new Date(); 객체명 = new Date( 년, 월, 일 ); 객체명 = new Date( 년, 월, 일, 시, 분, 초 ); Date 객체의속성과메소드 69

70 자바스크립트객체 내장객체 Date 객체 Date 객체의속성과메소드 ( 계속 ) 70

71 자바스크립트객체 내장객체 String 객체 를통해서 String 객체선언 변수 = " 문자열 "; " 문자열 ". 속성 [ 메소드 ()]; String 개체의속성과메소드 71

72 자바스크립트객체 내장객체 String 객체 String 개체의속성과메소드 ( 계속 ) 72

73 자바스크립트객체 내장객체 Math 객체 삼각, 지수, 로그함수와같은연산을위한속성과메소드제공 Math. 속성 [ 메소드 ()]; Math 객체의속성과메소드 73

74 자바스크립트객체 내장객체 Array 객체 Array() 는길이가정해지지않은배열생성 변수명 = new Array( 첨자 ); 변수명 = new Array(); Array 객체의속성과메소드 74

75 자바스크립트객체 내장객체 Function 객체 함수명 = new Function( 매개변수 1, 매개변수 2,..., 함수처리내용 ) Function 객체의속성 75

76 자바스크립트객체 내장객체 Screen 객체 컴퓨터의해상도나색상에관한정보를제공 SCREEN. 속성 ; Screen 객체의속성 Number 객체 입력된값을숫자로바꾸어주는객체 76

77 이벤트와이벤트핸들러 이벤트란? 특별한사건이일어났을때발생하는일종의신호 ( 행위자체 ) 이벤트핸들러 이벤트를통해설정된일정한작업을수행 ( 행위전달시점 ) 사용형식 <~~ on 이벤트이름 =" 이벤트핸들러 "...> 이벤트와이벤트핸들러 77

78 이벤트와이벤트핸들러 이벤트핸들러 이벤트와이벤트핸들러 ( 계속 ) 78

79 이벤트와이벤트핸들러 이벤트핸들러 객체별이벤트핸들러 79

80 이벤트와이벤트핸들러 이벤트핸들러 마우스이벤트예제 <HTML> <HEAD><TITLE> 자바스크립트 </TITLE> <SCRIPT LANGUAGE="JavaScript"> function mover() { alert("onmouseover 가동작!!!"); } function mout() { alert("onmouseout 가동작!!!"); } </SCRIPT> </HEAD> <BODY> <a href="javascript: 함수명 ();" onmouseover="javascript:mover();" onmouseout="javascript:mout();"> 클릭 </a> </BODY> </HTML> 80

81 HTML 에대한기초지식 1. HTML 이해 2. CSS (Cascading Style Sheet) 3. JavaScript 4. 브라우저내장객체 5. 폼 (FORM) 관련객체 6. 레이어 (Layer) 와 DHTML 81

82 브라우저내장객체 브라우저내장객체란? 브라우저에서지원되는여러가지객체로써, 브라우저에서표현되는컨텐츠를제어 window 객체는최상위객체 여러개의객체를나타낼때는점 (.) 연산자로구분 내장객체계층구조도 82

83 Window 객체 Window 객체 브라우저내장객체중에서최상위에있는객체 window 하위에있는객체를가리킬때 window 생략가능 window. 속성 window. 속성 = 값 window. 메소드 () window. 메소드 ( 값 ) Window 객체의속성, 메소드, 이벤트핸들러 83

84 Window 객체 Window 객체 Window 객체의속성, 메소드, 이벤트핸들러 ( 계속 ) 84

85 Window 객체 Window 객체 Window 객체의속성, 메소드, 이벤트핸들러 ( 계속 ) 85

86 Window 객체 Window 객체의메소드 새로운창열기 (Window.open( )) 창의특성 open("url", " 창이름 ", " 창의특성 ") ; 86

87 Window 객체 Window 객체의메소드 새로운창열기 (Window.open( )) 예제 <HTML> <HEAD><TITLE> 자바스크립트 </TITLE> <SCRIPT LANGUAGE="JavaScript"> function wingen(){ window.open("","win1","width=300, height=200, toolbar=no, location=no, toolbar=no, location=no, menubar=no, scrollbars=no, resizable=no"); } </SCRIPT> </HEAD> <BODY> <a href="javascript:wingen();" > 팝업창열기 </a> </BODY> </HTML> 87

Window 객체 Window 객체의메소드 새로운창열기 (Window.open( )) 예제 : 새로운창에컨텐츠추가 <HTML> <HEAD><TITLE> 자바스크립트 </TITLE> <SCRIPT LANGUAGE="JavaScript"> function wingen(){ var newwin1 = window.

88 Window 객체 Window 객체의메소드 새로운창열기 (Window.open( )) 예제 : 새로운창에컨텐츠추가 <HTML> <HEAD><TITLE> 자바스크립트 </TITLE> <SCRIPT LANGUAGE="JavaScript"> function wingen(){ var newwin1 = window.open("","win1","width=300, height=200, toolbar=no, location=no, toolbar=no, location=no, menubar=no, scrollbars=no, resizable=no"); var contents = " 새로운창이실행되었습니다.<br>"; contents = contents + " 새로운창에컨텐츠를추가합니다."; newwin1.document.write(contents); } </SCRIPT> </HEAD> <BODY> <a href="javascript:wingen();" > 새로운창열기 </a> </BODY> </HTML> 88

89 Window 객체 Window 객체의메소드 새로운창닫기 (Window.close( )) window.close() self.close() this.close() 특정창열고닫기 객체명 =window.open("","","") // 열기객체명.close() // 닫기 89

Window 객체 Window 객체의메소드 새로운창닫기 (Window.close( )) : 예제 <HTML><HEAD> <TITLE> 윈도우열기 / 닫기연습 </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var newwin = null function Winopen() { newwin = window.

90 Window 객체 Window 객체의메소드 새로운창닫기 (Window.close( )) : 예제 <HTML><HEAD> <TITLE> 윈도우열기 / 닫기연습 </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var newwin = null function Winopen() { newwin = window.open("", "", "width=300, height=200,menubar=yes") } function Winclose() { if(newwin!= null) newwin.close() } </SCRIPT> </HEAD> <BODY> <H3> 창을열고닫기위해서는버튼을누르세요.</H3> <FORM> <INPUT TYPE="button" VALUE=" 창열기 " onclick="winopen()"> <INPUT TYPE="button" VALUE=" 창닫기 " onclick="winclose()"> </FORM> </BODY></HTML> 90

91 Window 객체 Window 객체의메소드 새로운창닫기 (Window.close( )) : 예제 <HTML><HEAD> <TITLE> 윈도우열기 / 닫기연습 </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var newwin = null function Winopen() { newwin = window.open("", "", "width=300,height=200, menubar=yes"); var m = " 새창에서 window.close() 를호출하여 <br>"; m = m + " 창을닫는예제입니다.</br>"; newwin.document.write(m); newwin.document.write("<input type='button' value=' 창닫기 ' onclick='javascript:window.close()'>"); } </SCRIPT> </HEAD> <BODY> <H3> 창을열고닫기위해서는버튼을누르세요.</H3> <FORM><INPUT TYPE="button" VALUE=" 창열기 " onclick="winopen()"> <INPUT TYPE="button" VALUE=" 창닫기 " onclick="winclose()"> </FORM> </BODY></HTML> 91

92 Location 객체 Location 객체의기본사용법 현재열려진윈도우의 URL 주소에관한정보를제공하는객체 frame 으로나누ㅜ어져있다면최상위에있는문서의 URL 주소를갖게됨 Location 객체형식 속성 href : 문서의 URL 주소 port : 포트번호 host : URL 주소의호스티이름과포트번호 hostname : URL 주소의호스트이름 메소드 windows.location. 속성 location. 속성 = 값 location. 메소드 () reload() : 브라우저의현재문서를다시읽도록하는메소드 replace() : 현재브라우저의특정 URL 에있는문서로바꾸어주는메소드 92

Location 객체 Location 객체의기본사용법 Location 객체형식 windows.location. 속성 location. 속성 = 값 location. 메소드 () <HTML><HEAD> <TITLE>Location</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!

93 Location 객체 Location 객체의기본사용법 Location 객체형식 windows.location. 속성 location. 속성 = 값 location. 메소드 () <HTML><HEAD> <TITLE>Location</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function changelocation() { window.location.href=" } </SCRIPT> </HEAD> <BODY> <H3> 버튼을클릭하여 URL 을변경합니다.</H3> <FORM><INPUT TYPE="button" VALUE=" 다른 URL 로변경 " onclick="changelocation()"> </FORM> </BODY></HTML> 93

94 History 객체 History 객체의기본사용법 브라우저의히스토리리스트정보를저장해두는곳 히스토리정보는브라우저가최근방문했던 url 주소를의미 history 객체형식 속성 length : 히스토리리스트에포함되어있는 URL 주소의개수 메소드 windows.history. 속성 history. 메소드 () history. 메소드 ( 값 ) back() : 히스토리리스트에서한단계뒤로이동 forward() : 히스토리리스트에서한단계앞으로이동 go() : 히스토리리스트에서임의의위치로이동 94

95 Document 객체 Document 객체의기본사용법 브라우저내장객체중에서 window 객체아래에위치 html 문서의 body 태그안에있는내용을지정하고있음 Document 객체는이미선언되어있으므로따로선언하지않고사용 document. 속성 document. 메소드 () Document 주요속성 location : 문서의 URL 위치 title : 문서의제목 layers : 문서에있는레이어들의배열 embeds : 문서에있는플러그인들의배열 applets : 문서에있는자바애플릿의배열 images : 문서에있는이미지들의배열 95

96 Document 객체 Document 주요속성 ( 계속 ) cookie : 클라이언트 PC 에저장한정보 links : 문서에있는링크들의배열 forms : 문서에있는입력양식의배열 anchors : 문서에있는표식들의배열 vlinkcolor : 이전에방문했던링크를표시하는색 alinkcolor : 링크를클릭했을때나타내는색 linkcolor : 링크를표시하는색 fgcolor : 문서의전경색 bgcolor : 문서의배경색 referer : 링크로현재문서에왔을때이전문서의 URL 위치정보 lastmodified : 문서를마지막으로수정한날짜 96

97 Document 객체 Image 객체 이미지에대한정보를제공하는객체 Image 주요속성 name : 이름 src : 이미지파일위치 lowsrc : 이미지파일위치 height : 이미지의높이크기 width : 이미지의너비크기 border : 이미지테두리크기 hspace : 이미지가로여백 vspace : 이미지세로여백 97

98 Image 객체 Document 주요메소드 open() : 문서에데이터를출력시키기위한준비 close() : 문서에데이터를출력시키는것을마무리 write() : 문서에데이터를출력 writeln() : 문서에데이터를출력한후줄을바꿈 clear() : 브라우저에서문서지우기 getselection() : 현재선택된문자열을리턴 98

99 Links 객체 Links 객체 HTML 문서에들어있는모든링크에대한정보를제공하는객체 document 객체의하위객체 Links 주요속성 target : 정보를보여줄윈도우나프레임 href : 문서의 URL 주소 port : 포트번호 host : URL 주소의호스트이름과포트번호 hostname : URL 주소의호스트이름 protocol : 프로토콜종류 pathname : 디렉토리위치 99

100 HTML 에대한기초지식 1. HTML 이해 2. CSS (Cascading Style Sheet) 3. JavaScript 4. 브라우저내장객체 5. 폼 (FORM) 관련객체 6. 레이어 (Layer) 와 DHTML 100

101 Form 객체의입력양식 Form( 폼 ) 객체 사용자의입력사항을입력받는객체 Form 의하위객체의값을서버로전송하기위해서사용 Form 객체의형식 <FORM [NAME = " 양식이름 "] [TARGET=" 출력창 "] [ACTION="CGI_URL"] [METHOD= GET POST] [ENCTYPE="MIME_TYPE"] [onsubmit=" 처리할이벤트핸들러 "]> </FORM> 101

102 Form 객체의입력양식 Form 객체의속성 target : 데이터를서버로보낸후받아보는결과를어느윈도우에서받아볼것인지를지정 action : 입력한데이터를처리할서버의 URL 지정 method : 데이터를어떤 HTTP 프로토콜로보낼것인지를지정 (GET/POST) encoding : 서버로보내질데이터이의인코딩을지정 elements : Form 태그안에있는모든입력양식을배열로저장하고있는속성 Form 객체의메소드 submit() : 입력된데이터를서버로전송하는메소드 reset() : 입력된데이터를리셋시키는메소드 Form 객체의이벤트핸들러 onsubmit : 데이터를서버로보내는명령이내려졌을때실행되는이벤트핸들러 onreset : 리셋버튼을눌렀을때실행되는이벤트핸들러 102

$");} else{ tt = " 양식은 " + document.mm.elements.length + " 개 \n"; tt += " 이름은 " + document.mm.elements[0].value + " 입니다.$

103 Form 객체의입력양식 폼객체의속성 Form 을활용한간단한예제 <HTML><HEAD><TITLE> 폼양식연습 </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function view(){ var name = document.mm.elements[0].value; if(name == ""){ alert(" 값을입력하세요.");} else{ tt = " 양식은 " + document.mm.elements.length + " 개 \n"; tt += " 이름은 " + document.mm.elements[0].value + " 입니다."; alert(tt);} } </SCRIPT></HEAD> <BODY><H3> 폼객체예제 </H3> <FORM NAME="mm"> 값입력 <INPUT TYPE="text"><br><br> <INPUT TYPE="button" VALUE=" 속성정보확인 " onclick="view();"> </FORM></BODY></HTML> 103

104 Input 객체 Input 객체 사용자의입력값을처리하기위한다양한형식을포함한객체 <INPUT> 태그형식 <INPUT [TYPE="Input-type"] [NAME="Input-name"]> </INPUT> <Input> 태그의 type 종류 104

105 Input 객체 Text 객체 한줄짜리문자열을입력받기위한형식 <INPUT TYPE="text" NAME=" 텍스트입력양식의이름 " [VALUE=" 텍스트입력양식에기본문자열 "] [SIZE=" 텍스트입력양식의크기기본은 20"] [MAXLENGTH=" 사용자가최대로입력한글자수 "] [onchange=" 이벤트핸들러 "] [onblur=" 이벤트핸들러 "] [onfocus=" 이벤트핸들러 "] [onselect=" 이벤트핸들러 "] > text type 주요속성 name : 이름 value : 입력양식에입력한값 defaultvalue : 처음디폴트로 value 에입력된값 size : 입력창의크기 105

106 Input 객체 Password 객체 글내용을 ** 표시로나타내는한줄짜리문자열을입력받기위한형식 <INPUT TYPE="password" NAME=" 패스워드입력양식이름 " [VALUE =" 패스워드입력양식에지정하고싶은문자열 "] [SIZE = " 패스워드입력양식의크기 "]> password type 주요속성 name : 이름 value : 암호입력양식에입력한값 size : 입력창의크기 106

107 Input 객체 Radio 객체 여러개의항목중에서하나를선택하기위한형식 <INPUT TYPE="radio" NAME=" 라디오버튼그룹이름 " VALUE=" 라디오버튼에할당할값 " [CHECKED] [onclick=" 선택할경우이벤트핸들러 "]> 라디오버튼에나타나는문자열 radio type 주요속성 name : 이름 value : Radio 에지정된값 checked : 해당항목이선택되었는지를판단 107

108 Input 객체 Checkbox 객체 여러개의항목중에서여러개를선택하기위한형식 <INPUT TYPE="checkbox" NAME=" 체크박스양식의이름 " VALUE=" 체크박스에할당할값 " [CHECKED] [onclick=" 선택할경우이벤트핸들러 "]> 체크박스에나타나는문자열 checkbox type 주요속성 name : 이름 value : checkbox에지정된값 checked : 해당항목이선택되었는지를판단 108

109 Input 객체 Button 객체 여러개의항목중에서여러개를선택하기위한형식 <INPUT TYPE="button" NAME=" 버튼양식의이름 " VALUE=" 버튼위에쓰여질문자열 " [onclick=" 버튼을선택할경우이벤트핸들러 "]> button type 주요속성 name : 이름 value : 버튼에쓰여질문자열 109

110 Input 객체 File 객체 파일을전송하기위해서파일을선택하는창을보여준다 <INPUT TYPE="file" NAME=" 파일업로드양식의이름지정 "> 110

111 Input 객체 Hidden 객체 브라우저에화면으로나타내지않고, 값을서버로전송하기위해사용하는형식 <INPUT TYPE="hidden" NAME=" 이름 " VALUE=" 값 "> 111

112 Input 객체 Reset 객체 브라우저에화면으로나타내지않고, 값을서버로전송하기위해사용하는형식 <INPUT TYPE="reset" NAME=" 리셋버튼이름 " VALUE=" 리셋버튼위에찍히는문자값 " [onclick=" 선택할경우이벤트핸들러 "]> reset 객체주요속성 name : 이름 112

113 Input 객체 Submit 객체 <form> 태그에포함된입력값들을서버로전송하는객체 <INPUT TYPE="submit" NAME=" 보내기양식의이름 " VALUE=" 보내기버튼위에찍히는문자열 " onclick=" 클릭하면수행되는이벤트핸들러 "> submit 객체주요속성 name : 이름 113

114 Select 객체 Select 객체 여러항목을목록으로나열하여선택하기위한형식 Select 객체의기본사용법 option : 목록열거 <SELECT NAME="SELECT 입력양식이름 " [SIZE=" 양식크기 "] [MULTIPLE] [onfocus=" 이벤트핸들러 "] [onblur=" 이벤트핸들러 "] [onchange=" 이벤트핸들러 "] <OPTION [SELECTED] [VALUE=" 목록에설정할값 "]> 목록... </SELECT> selected목록이선택된상태로만듦 multiple : 목록을중복선택여부를지정 size : 보여지는목록개수 114

$selected == true){ m += form.food.options[i].text+ " 선택!\n" } } alert(m) } </SCRIPT></HEAD> <BODY><H3> 좋아하는음식을선택하세요.$

115 Select 객체 Select 객체 예제 <HTML><HEAD><TITLE>Select 연습 </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function resultmus(form) { var m = " " for(i = 0; i < form.food.length; i++) { if(form.food.options[i].selected == true){ m += form.food.options[i].text+ " 선택!\n" } } alert(m) } </SCRIPT></HEAD> <BODY><H3> 좋아하는음식을선택하세요.</H3><P> <FORM><SELECT name="food" size=5 multiple> <option value=" 김치찌게 "> 김치찌게 <option value=" 된장찌게 " selected> 된장찌게 <option value=" 볶음밥 "> 볶음밥 <option value=" 짜장면 " selected> 짜장면 <option value=" 짬뽕 "> 짬뽕 <option value=" 냉면 "> 냉명 <option value=" 칼국수 "> 칼국수 </SELECT><p> <INPUT TYPE="button" VALUE=" 선택결과 " onclick="resultmus(this.form);"> </FORM></BODY></HTML> 115

116 Textarea 객체 Textarea 객체 여러줄의텍스트를입력하기위한객체 <TEXTAREA NAME=" 텍스트영역입력양식의이름 " [ROWS=" 텍스트영역입력양식의가로 "] [COLS=" 텍스트영역입력양식의세로 "] [WRAP="off" "virtual" "physical"] [onchange=" 이벤트핸들러 "] [onblur=" 이벤트핸들러 "] [onfocus=" 이벤트핸들러 "] [onselect=" 이벤트핸들러 "] > 텍스트영역에쓰일기본문자열 </TEXTAREA> 116

117 Textarea 객체 Textarea 객체 예제 <HTML><HEAD><TITLE>Select 연습 </TITLE> </HEAD> <BODY><H3> 내용을적어주세요 </H3><P> <FORM> <TEXTAREA rows="10" cols="40"></textarea><p> <input type="reset" value=" 재입력 "> </FORM> </FORM></BODY></HTML> 117

118 HTML 에대한기초지식 1. HTML 이해 2. CSS (Cascading Style Sheet) 3. JavaScript 4. 브라우저내장객체 5. 폼 (FORM) 관련객체 6. 레이어 (Layer) 와 DHTML 118

119 DHTML 개요 Dynamic HTML HTML 을동적으로처리 DHTML = HTML + CSS + JavaScript 문서객체모델 (DOM) 웹페이지구성요소를처리하기위하여내장객체와브라우저에표현 스크립트언어 (JavaScript) 스크립트는명령어만사용해서편리하지만복잡한응용프로그램을만들기어려움 스타일시트 (CSS) 웹페이지의통일감과일관성을유지하고제작시간과문서의용량이줄어듬 레이어 (Layer) 문자, 그림, 테이블을원하는위치에겹치게함 119

120 레이어 (Layer) 객체 레이어객체선언 레이어객체는 <div> 와 <span> 태그를사용 레이어사용좌표 레이어사용형식 <style> # 레이어이름 {position:absolute;... : } </style> <div id=" 레이어이름 "> 텍스트또는이미지 </div> 120

121 레이어 (Layer) 객체 레이어객체의속성과메소드 121

122 레이어 (Layer) 객체 레이어객체의속성과메소드 122

123 레이어 (Layer) 객체 레이어객체 간단한예제 <HTML><HEAD><TITLE> 레이어연습 </TITLE> <SCRIPT LANGUAGE="javascript"> function R() { var loc=parseint(document.all["mylay"].style.left); document.all["mylay"].style.left=loc+150; } function L() { var loc=parseint(document.all["mylay"].style.left); document.all["mylay"].style.left=loc-150; } </SCRIPT></HEAD> <BODY><FORM> <INPUT type=button value=" 오른쪽으로이동 " onclick="r()"> <INPUT type=button value=" 왼쪽으로이동 " onclick="l()"><br> </FORM> <DIV id="mylay" style="position:absolute;top:100px; left:100px; background-color: #ff1493;"> 기본레이어영역 </DIV> </BODY></HTML> 123

124 레이어 (Layer) 객체 레이어와스타일시트활용 레이어는고유한기름으로구별 레이어사용형식 <STYLE> #ID 이름 {position : 속성값 (absolute, relative); 위치속성 (left, top) : 속성값 (pt, px, in, cm) 크기속성 (width, height) : 속성값 (pt, px, in, cm) } </STYLE> absolute : 레이어의문서전체에대한절대적위치지정 relative : 레이어의현재위치를기준으로지정 124

125 레이어 (Layer) 객체 레이어를활용한웹페이지작성 자바스크립트를이용하여레이어보기와감추기와위치이동이가능 레이어감추고보이기형식 ( 레이어이름 ).style.visibility="visible" ( 레이어이름 ).style.visibility="hidden" 125

126 실전예제프로그램작성 1. 예제프로그램작성 126

127 실습예제 아래그림과같이 HTML 을디자인 127

PowerPoint Template

PowerPoint Template JavaScript 회원정보 입력양식만들기 HTML & JavaScript Contents 1. Form 객체 2. 일반적인입력양식 3. 선택입력양식 4. 회원정보입력양식만들기 2 Form 객체 Form 객체 입력양식의틀이되는 태그에접근할수있도록지원 Document 객체의하위에위치 속성들은모두 태그의속성들의정보에관련된것