web2.0기술

Size: px

Start display at page:

Download "web2.0기술"

창준 고
5 years ago
Views:

1 HTML/CSS/Java Script 1

2 HTML 2

3 HTML 1. HTML 문서의기본적인형식 HTML 문서는태그를이용하여문서의모양을지정하는텍스트파일이다. HTML 문서안에서는대소문자나공백문자는무시된다. 파일이름은.html 또는.htm 확장자를사용한다. HTML 문서는헤더부분과바디부분으로나뉜다. <html> <head> <title> 브라우저제목 </title> 헤더정보 </head> <body> 본문내용 </body> </html> 3

4 HTML 2. <meta> </meta> 태그 Meta 태그는웹브라우저의행동을제어하거나검색엔진이 HTML 문서의키워드를저장하도록하는기능을제공한다. Meta 태그는반드시 HTML 문서의 head 태그내에기술하여야한다. http-equiv 와 name 속성에는 HTTP 헤더이름이나다른이름을기술하고, content 에는값을기술한다. Meta 태그는다음과같은속성을가진다. http-equiv : HTTP 헤더의이름을기술하여웹브라우저의행동을제어할수있다. 다음과같은값을가질수있다. content-type : MIME 타입을기술한다. content-disposition : 응용프로그램의핸들러를기술한다. pragma : HTTP/1.0 에서 Caching 을제어한다. no-cache 와같은값을사용한다. cache-control : HTTP/1.1 에서 cache agent 행동을기술한다. no-cache 와같은값을사용한다. refresh : HTML 문서를리로드하기전에걸리는시간을기술한다. URL 을추가하여다른문서를로드시킬수있다. set-cookie : 쿠키를설정한다. name : HTTP 헤더에포함되지않은다른타입을기술하기위해사용된다. keywords : 현재 HTML 페이지를검색엔진이 indexing 할수있도록키워드를기술한다. author : HTML 페이지작성자를기술한다. generator : HTML 페이지작성도구를기술한다. 4

5 HTML <meta> 태그사용예 content-type 설정예 <meta http-equiv= content-type content= text/html;charset=euc-kr > refresh 를사용하여페이지이동 <meta http-equiv= refresh content= 2;url=test.html > 2 초후에 test.html 페이지로이동한다. refresh 를사용하여파일다운로드 <meta http-equiv= refresh content= 2;url=test.zip > 2 초후에 test.zip 파일을다운로드하는창이화면에나타난다. 키워드설정예 <meta name= keywords conetent= servlet,jsp > 5

6 HTML 3. HTML 로문서모양만들기 글자크기지정 <hn> </hn> (n 은 1 에서 6 까지숫자 ) 문단지정 <p>... </p> 줄바꾸기 <br> 또는 <br/> 수평선그리기 <hr> <hr size= n width= n align= center noshade> (noshade 는음영효과없애기 ) 가운데정렬 <center>... </center> 주석  6

7 HTML 4. HTML 문자모양만들기 문자의논리적스타일 태그 이름 용도 <dfn>... </dfn> Definition 용어정의 <em>... </em> Emphasis 부분강조 <cite>... </cite> Citation 부분인용 <code>... </code> Code 타이핑된코드 <kbd>... </kbd> Keyboard 사용자키보드입력 <samp>... </samp> Sample 예제 <strong>... </strong> Strong 강한강조 <var>... </var> Variable 변수이름 7

8 HTML 5. HTML 문자모양만들기 문자의물리적스타일 태그 이름 용도 <b>... </b> Boldface 볼드체 <i>... </i> Italic 이탤릭체 <u>... </u> Underlined 밑줄문자 <tt>... </tt> Typewriter 타지기체 <blink>... </blink> Blinking 문자깜빡임 <sub>... </sub> Subscript 아래첨자 <sup>... </sup> Superscript 위첨자 스페셜태그 <pre>... </pre> 태그 용도 에디터에서편집되어있는모양그대로브라우저에보여준다 <blockquote>... </blockquote> 인용문단을다른문단과구별해서보여준다. <address>... </address> HTML 을만든사람이누구인지알리기위해사용된다. 8

9 HTML 6. HTML 로목록과표만들기 문자의논리적스타일 설명예제코드화면결과 순서있는목록순서없는목록메뉴목록디렉토리목록 <ol> <li> 사과 </li> <li> 바나나 </li> <li> 키위 </li> </ol> <ul> <li> 사과 </li> <li> 바나나 </li> <li> 키위 </li> </ul> <menu> <li> 사과 </li> <li> 바나나 </li> <li> 키위 </li> </menu> <dir> <li> 사과 </li> <li> 바나나 </li> <li> 키위 </li> </dir> 1. 사과 2. 바나나 3. 키위 사과 바나나 키위 사과 바나나 키위 사과 바나나 키위 9

10 HTML 7. HTML 문서의표 <table> 태그의속성 align= 정렬 bgcolor= 색 속성 표의정렬방식지정 (left,center,right) 표의배경색 의미 border= n 표테두리두께지정 (0 값을사용하면테두리를그리지않는다 ) cellspacing= n cellpadding= n width= px height= px 셀과셀간의간격지정셀내부와테두리와내용간의간격지정표의너비표의높이 <table> 태그안에들어가는태그들 <caption> : 표에대한설명을넣기위한태그 <th> : 표의헤더를지정하기위한태그 <td> : 표의셀을지정하기위한태그 <tr> : 표의한행을지정하기위한태그 10

11 HTML 7. HTML 문서의표 <th> 태그의속성 <th> 태그의속성 align rowspan colspan 속성의역할헤더의정렬방식을지정하는속성. left,,center,right중한가지사용헤더의셀이몇개의행을병합한것인지에대한속성헤더의셀이몇개의열을병합한것이지에대한속성 11

12 HTML 8. HTML 문서의링크와이미지사용 <a> 태그 하이퍼텍스트연결을위해사용하는것으로같은문서의특정위치나다른문서, 다른웹사이트문서를연결하기위해사용된다. 다른사이트로연결 <a href= 썬스쿨바로가기 </a> 문서내에서연결 <a href= #test > 테스트문으로이동 </a> <a name= test > 여기는테스트문입니다.</a> 같은사이트내에서이동 <a href= spring/hello.htm > 인사화면으로이동합니다.</a> <img> 태그 HTML문서에서그림을삽입하기위해사용한다. <img src= screen.jpg align= top > 글자의위치가그림의위쪽에정렬 <br/> <img src= screen.jpg align= middle > 글자의위치가그림의가운데정렬 <br/> <img src= screen.jpg align= bottom > 글자의위치가그림의아래쪽에정렬 <br/> 이미지를통한문서연결 <a href= ><img src= sun.jpg ></a> 12

13 HTML 9. HTML 에서입력양식 (form) 만들기 <form> 태그 입력양식을사용하려면먼저 <form> 태그를만들어야한다. action 속성을사용하여사용자가입력한데이터를처리할프로그램의 URL 을지정한다. method 속성을사용하여입력값을헤더에붙여서보내는 get 방식이거나입력값을 body 에붙여서보내는 post 방식중하나를선택한다. 지정하지않으면 get 방식으로입력값이전송된다. <form action= hello.do method= post > </form> 13

14 HTML <input> 태그를이용한입력처리 (1) <input type="" name="" value="" size="" maxlength=""> type : 입력형식지정 text : 문자열입력 password : 암호를입력할때사용 checkbox : 체크박스형태로여러개값을선택할수있다. radio : 여러개중하나의값만선택할수있다. submit : 폼에서기술한내용을웹서버로전송한다. reset : 폼에기술한내용들을초기값으로변경한다. image : 이미지맵을이용하여이미지에서마우스가클릭된곳의위치를리턴한다. hidden : 화면에보이지않는값을웹서버에전달할때사용한다. button : 클릭할수있는버튼을나타낸다. file : 파일을선택할수있는창을나타낸다. 파일을업로드할때사용한다. name : 현재 input 태그의이름을기술한다. size : 텍스트입력양식의길이를지정 / 디폴트는 "20" 이다 maxlength : 사용자가최대로입력할수있는글자의수 value : 텍스트입력양식에미리입력하고싶은문자열지정 checked : type이 checkbox나 radio의경우디폴트로선택됨을의미한다. readonly : type이 text나 password의경우읽기전용으로만든다. 14

15 HTML <input> 태그를이용한입력처리 (2) 텍스트박스 <input type= text name= size= 20 maxlength= 20 value= 이메일주소입력 > 암호입력양식 <input type= password name= passwd > 체크박스 ( 여러개선택가능 ) <input type= checkbox name= device value= disk > 디스크 <input type= checkbox name= device value= cd >CD/DVD <input type= checkbox name= device value= usb checked>usb Memory 라디오버튼 ( 한개만선택가능 ) <input type= radio name= device value= disk checked> 디스크 <input type= radio name= device value= cd >CD/DVD <input type= radio name= device value= usb >USB Memory 버튼 <input type= button name= ok value= 확인 onclick= check(); > 15

16 HTML <input> 태그를이용한입력처리 (3) 데이터보내기버튼 <input type= submit name= ok value= 데이터보내기 > 리셋버튼 <input type= reset value= 입력취소 > 이미지입력양식 <input type= image name= duke src= duke.jpg > 숨겨진입력양식 <input type= hidden name= id value= > 16

17 HTML <select>, <option> 태그 select 태그는 Drog-down 형태의메뉴에서하나혹은여러개의아이템을선택할때사용된다. 아이템들을표현하기위해 option 태그를사용한다. select 태그의속성 name : 현재 select 태그의이름 size : 한번에보일수있는 <option> 태그의아이템의수 multiple : 한번에여러개를선택할수있는지여부를기술한다. multiple 선언되어있으면한번에여러개의아이템을선택할수있다. option 태크의속성 사용예 value : 서버로전달될값을기술한다. 값이기술되어있지않으면 option 태그의내용이값으로전달된다. selected : select 태그에서현재 option 이디폴트로선택되었음을표시한다. disabled: 특정목록을지정할수없도록할때사용된다. <form action="nothing.cgi"> <select name="animal"> <option> 개 <option> 고양이 <option selected> 말 </select > </form> 17

18 HTML <texarea> 태그 여러줄에걸쳐문자열을입력받을때사용된다. <textarea name="" rows="" cols=""></textarea> textarea 속성 사용예 name : 현재 textarea 태그의이름 rows : 화면에보일라인수지정 cols : 화면에보일문자의수지정 readonly : 읽기전용으로만든다. onfocus : 마우스의포커스를받았을때실행할자바스크립트함수를기술한다. onblur : 마우스가포커스를잃었을때실행할자바스크립트함수를기술한다. onselect : type 이 text 인경우혹은 textarea 에서텍스트내용을마우스로선택한경우실행할자바스크립트 함수를기술한다. <form action="nothingcgi"> <textarea name="test" rows="4" cols="30"> 이곳에내용을입력하세요. </textarea> </form> 18

19 HTML <input> 태그에서사용가능한이벤트들 onfocus : 마우스의포커스를받았을때실행할자바스크립트함수를기술한다. onblur : 마우스가포커스를잃었을때실행할자바스크립트함수를기술한다. onselect : type이 text인경우혹은 textarea에서텍스트내용을마우스로선택한경우실행할자바스크립트함수를기술한다. onchange : 마우스의포커스를잃고내용이변경된경우에실행할자바스크립트를기술한다. onclick : 마우스가클릭되었을때실행할자바스크립트함수를기술한다. <input type= button value= 누르세요 onclick= sayhello(); > 19

20 HTML 로그인을처리하는 login.html 예제 <HTML> <script type="text/javascript" >  </script> <body> <FORM name= Loginform METHOD= post ACTION="login.jsp" > 로그인명 :<INPUT TYPE="text" NAME="uid"> 패스워드 :<INPUT TYPE="password" NAME="pwd"> <INPUT TYPE="image" src="submit.gif" onclick="return check()"> //type=submit 이나 type=image 둘다 submit 버튼이다. 그래서 return 으로처리 <INPUT TYPE="reset" value=" 재작성 "> </FORM> </body> </HTML> 20

21 CSS ( Cascading Style Sheet ) yskim@suned.co.kr 21

22 CSS 1. CSS 란? cascading style sheets의약어로스타일시트라고합니다. 웹문서의스타일을저장해둔파일입니다. HTML,XHTML 문서에서자주사용하는서체나색상, 정렬, 각요소들의배치등의유형에대한다양한스타일을한군데모아놓은것을 ' 스타일시트 ' 라고합니다. 유지보수가아주간편하게된다는이점이있고브라우저를가리지않습니다. 22

23 CSS 2. 스타일시트를사용해야하는이유 웹문서의디자인과내용을분리할수있습니다. CSS 를이용해서웹문서를디자인할경우 HTML 소스부분은그대루두고 CSS 소스만수정하면되기때문에작업이훨씬효율적이다. 다양한매체에적합한문서를만들수있습니다. HTML 로작성된내용은그대로두고 CSS 에서대상매체 (Media) 가프린터인지, 모바일기기인지만지정해주면같은내용을여러매체에서사용할수있다. 23

24 CSS 3. CSS 명령어의구조 선택자 { 프로퍼티 : 값 } ex) body { color : black } 선택자 : 주로태그가기술됨. 이태그에프로퍼티와값이적용됨 프로퍼티 : 왼쪽의선택자에적용될속성을기술함 ( 프로퍼티 = 속성 ) 값 : 프로퍼티의값. 즉, 속성값을기술함. 이값은프로퍼티마다다름 1. 모든 CSS 구문은위와같이선택자, 프로퍼티, 값으로구성 2. 프로퍼티와값은중괄호 { } 내에기술되며, 콜롞 (:) 으로구분합니 3. 값이 2 개이상의단어로구성되면따옴표내에기술합니다. p {font-family:"sans serif"} 4. 하나의태그에여러개의프로퍼티 : 값쌍을지정할경우는값프로퍼티 : 값쌍을세미콜롞 (;) 으로구분합니다. p {text-align:center; color:red } 5. 여러개의프로퍼티를지정할경우, CSS 구문을읽기쉽도록한개라인에한개의프로퍼티 : 값쌍을기술할수도있습니다. p { } text-align: center; color: black; font-family: Arial, 바탕, 굴림 24

25 CSS 4. CSS 를이용하는 3 가지방법 CSS 를이용하는 3 가지방법 1. <head>... </head> 사이에기술 ( 내부파일방식 ) [ 우선순위 1] 2. HTML 태그내에직접기술 ( 인라인방식 ) [ 우선순위 2] 3. 별도의.css 파일에기술 ( 외부파일방식 ) [ 우선순위 문이용 25

26 CSS CSS 입력위치 (1) <head>... </head> 사이 <head> <style type="text/css"> body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left: 50px} </style> </head> 26

27 CSS CSS 입력위치 (2) html 태그내에직접기술 ( 인라인방식 ) <body style="backgrount-color: yellow"> <h1 style="font-size: 36pt"> 이제목은 36 포인트입니다.</h1> <h2 style="color: blue"> 이제목은푸른색입니다.</h2> <p style="margin-left: 50px"> 이문장은왼쪽여백이 50 픽셀입니다.</p> </body> 27

28 CSS CSS 입력위치 (3) 별도의.css 파일에기술 ( 외부파일방식 ) <head> <link rel="stylesheet" type="text/css" href="style12.css" /> </head> # cat style12.css body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left:50px} 28

29 CSS CSS 입력위치 문이용 <style " 외부스타일시트파일 " 문사용시 <link> 태그와함께사용 <link rel="stylesheet" href="style1.css"> <style "style2.css" </style> 29

30 CSS 주석사용하기 주석사용하기 /* 와 */ 사이에기술한다 ( 여러줄주석 ) <style type="text/css"> /* 이것은주석입니다. */ p { text-align: center; /* 이것도주석입니다. */ color: black; font-family: arial } 30

31 CSS 5. 스타일시트의 CLASS 속성정의하기 CLASS 속성사용하기 ( Tag.class name ) class 속성은두가지경우에유용하다. 첫번째는하나의태그에여러개의스타일을적용하는경우이고, 두번째는여러개의태그에하나의스타일을적용하는경우이다. <style type="text/css"> p.right {text-align: right} p.center {text-align: center} </style> -> P 태그하나에두개의스타일을정의함 <p class="right"> 이문장은오른쪽으로정렬됩니다. </p> <p class="center"> 이문장은가운데로정렬됩니다. </p> <style type="text/css">.center {text-align: center} </style> <h1 class="center"> 이제목은가운데로정렬됩니다.</h1> <p class="center"> 이문장도가운데로정렬됩니다.</p> 31

32 CSS 6. 스타일시트의 ID 속성사용하기 ID 속성사용하기 ( #ID name ) ID 속성은 CLASS 속성과유사하다. ID 속성도두가지경우에유용하다. 첫번째는동일한 ID 를가진모든태그들에동일한스타일이적용되는경우이고, 두번째는동일한태그라도해당 ID 를가진경우만스타일이적용된다. <style type="text/css"> #intro { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } </style> <h1 id="intro"> 이제목은 intro 스타일로표시됩니다. </h1> <p id="intro"> 이문장도 intro 스타일로표시됩니다.</p> 32

33 CSS 7. 폰트지정을위한스타일시트 폰트크기 : font-size(css)/fontsize(javascript) 크기지정방법의미 / 지정할수있는값사용예 절대크기폰트의절대적크기 ( 서로 1.5 배차이 ) x-small, small, medium,large,x-large,xx-large 상대크기 상위요소에대한상대적크기 Larger, smaller h3 { font-size: small; } h3 { font-size: larger; } 숫자폰트크기 h3 { font-size: 12px; } 백분율상위요소에대한상대적크기 h3 { font-size: 150%; } 폰트종류 : font-family/fontfamily 하나이상의폰트를나열할수있으며, 이중컴퓨터에서사용가능한첫번째폰트가사용된다. serif, sans-serif, 굴림, 맑은고딕,Arial 등등 폰트굵기 : font-weight/fontweight normal, bold, bolder,lighter 을이용한절대굵기를지정하거나 100 에서 900 사이의숫자를사용하여지정할수도있다. 33

34 CSS 7. 폰트지정을위한스타일시트 (2) 폰트스타일 : font-style/fontstyle normal, italic, oblique 를값으로사용할수있다. 폰트밀도 : font-strech/fontstrech ultra-codensed, extra-codensed, codensed, semi-codensed, Normal, semi-expanded, expanded, extra-expanded, ultra-expanded Wider, narrower 폰트색 : color/color h3 { color: green; } 폰트 : font/font 여러가지폰트속성을한번에지정할때사용 font 속성은 font-style,font-weight,font-size,font-family 순서로지정 h3 { font: normal, bold, 12px, arial; } 34

35 CSS 8. 텍스트지정을위한스타일시트 (1) 줄높이 : line-height/lineheight 각줄사이간격을지정하기위해사용하는속성 line-height: 1.5 <- 현재폰트의크기에대한비율을의미 길이 : 절대길이를의미 백분율 : 상위요소에대한상대적인크기 텍스트장식 : text-decoration/textdecoration 문자에더해질수있는여러가지효과를지정하기위해사용하는속성 속성 효과 none underline overline line-through blink 텍스트효과없음밑줄윗줄텍스트가운데를관통하는줄깜빡임 35

36 CSS 8. 텍스트지정을위한스타일시트 (2) 수직정렬 : vertical-align/verticalalign 텍스트의수직정력방식을지정하기위해사용하는속성 속성 baseline super sub top bottom text-top text-bottom middle 백분율 효과상위요소의베이스라인에정렬위첨자아래첨자가장긴요소의상단에정렬가장작은요소의하단에정렬상위요소의상단에텍스트상단을정렬상위요소의하단에텍스트하단을정렬텍스트중갂부분으로정렬 line-height에대한비율 36

37 CSS 8. 텍스트지정을위한스타일시트 (3) 텍스트변환 : text-transform/texttransform 텍스트변환방식지정 none : 변환없음 capitalize : 각단어의첫번째글자를대문자로변환 uppercase : 모든글자들을대문자로변환 lowercase: 모든글자들을소문자로변환 텍스트정렬 : text-align/textalign 텍스트의수평정렬방식지정 left : 좌측정렬 right: 우측정렬 center : 가운데정렬 justify : 고른정렬 텍스트들여쓰기 : text-indent/textindent 각문단의첫번째글자를앞에서얼마나들여쓸지를지정 숫자 : 글자가들어가는크기 백분율 : 상위요소의너비에대한비율 37

38 CSS 8. 텍스트지정을위한스타일시트 (4) 글자간격 : letter-spacing/letterspacing 글자간의간격지정 Normal : 일반크기 숫자 : 글자간격길이, 음수도사용가능 p { letter-spacing: 2px; } 단어간격 : word-spacing/wordspacing 단어사이간격지정 Normal : 일반크기 숫자 : 글자간격길이, 음수도사용가능 p { word-spacing: -2px; } 줄바꾸기설정 : white-spacing/whitespacing 줄바꾸기를어떻게할것인지를지정 normal: 문자열이주어진너비를넘어서는경우자동으로줄바꿈 nowrap: 줄바꾸기를허용하지않음 pre: <PRE> 태그처럼모든공백을그대로인정 38

39 CSS 9. 텍스트포맷지정을위한스타일시트 (1) Box Position Margin( 바깥여백 ), Boder( 선 ), Padding( 안쪽여백 ) 명칭 [1]. padding-top [2].padding-right [3]. padding-bottom [4].padding-left [5]. border-top [6]. border-right [7].border-bottom [8]. border-left [9]. margin-top [10]. margin-right [11]. margin-bottom [12].margin-left 39

40 CSS 9. 텍스트포맷지정을위한스타일시트 (2) 여백 텍스트의테두리여백을주기위해 margin-left, margin-right, margin-top, margin-bottom 속성을사용. margin 을이용하여상우하좌순서의여백을한번에지정 <style type= text/css >.main10 { margin-top: 8px; margin-right: 9px; margin-top: 10px; margin-bottom: 7px; } </style> 테두리와내용간의거리 텍스트의테두리와내용갂의거리를지정하기위해 padding-left, padding-right, padding-top, padding-bottom 속성을사용 padding 을이용하여상우하좌순서의갂격을한번에지정 <style type= text/css >.main10 { padding-top: 8px; padding-right: 9px; padding-top: 10px; padding-bottom: 7px; } </style> 40

41 CSS 9. 텍스트포맷지정을위한스타일시트 (3) 테두리의두께 텍스트의테두리여백을주기위해 border-left-width, border-right-width, bordertop-width, border-bottom -width 속성을사용. Border-width 을이용하여상우하좌순서의테두리두께를한번에지정 속성값은숫자나 thin, medium, thick 를사용 숫자의단위에 em 은현재폰트의크기를의미, 2em 이면현재폰트의 2 배크기 테두리스타일 테두리스타일을지정하기위해 border-left-style, border-right-style, border-top-style, border-bottom -style속성을사용 Border-style을이용하여상우하좌순서의갂격을한번에지정 p.solid {border-style: solid } > 선테두리 p.double {border-style: double} > 두줄 p.dashed {border-style: dashed} > 파선 p.dotted {border-style: dotted} > 점선 p.groove {border-style: groove } >3차원그루브 p.ridge {border-style:ridge} >3차원 ridge p.inset {border-style: inset} >3차원 inset p.outset {border-style: outset } >3차원 outset p.none {border-style: none } > 테두리없음 p.hidden {border-style: hidden} > 테두리없음 41

42 CSS 9. 텍스트포맷지정을위한스타일시트 (4) 테두리색 테두리색을지정하기위해 border-left-color, border-right-color border-top-color, border-bottom -color 속성을사용. Border-color 을이용하여상우하좌순서의테두리두께를한번에지정 텍스트너비와높이 : width,height Width 와 height 는텍스트의너비와높이를지정하기위해사용 텍스트배치 : align 정렬방식을지정 img { align: left; } 비우기 : clear 텍스트나이미지가왼쪽이나오른쪽에나타나지못하도록만들때사용하는속성 42

43 CSS 10. 기타스타일시트 (1) 배경색 : background-color 배경색지정 배경그림 : background-image 배경그림지정 요소종류 : display HTML 요소를어떤식으로보여줄지를지정 none: 요소감추기 block: block 모양 inline: inline 모양 list-item: 목록타입모양 목록마크타입 : list-style-type <ul> 태그에서목록의마크를어떤모양으로보여줄지지정 none: 없음 disc: 디스크모양 circle: 원모양 square: 사각형모양 decimal: 숫자 lower-roman: 로마자소문자 upper-roman: 로마자대문자 lower-alpha: 소문자알파벳 upper-alpha: 대문자알파벳 43

44 CSS 10. 기타스타일시트 (2) 목록마크이미지 : list-style-image <ul> 태그에서목록의마크를이미지로지정하기위해 URL 할당 요소감추기 : visibility 요소를감추고자할때사용하는속성 visible 이면보여주소, hidden 이면요소를감춘다 위치지정방식 : position HTML 요소의위치를지정하는방식지정 static: 디폴트값. 위치지정없이 HTML 요소들이순서대로나오게됨 relative: 현재위치에서상대적인거리만큼이동 absolute: 상위요소를기준으로지정된특정위치에표시 fixed: 브라우저를기준으로지정된위치에표시 44

45 CSS 11. <a> 태그설정과관련된 CSS 문서가처음표시될때 a:link { color:black; text-decoration:none; font-family: 돋움 ; font-size:9pt;} 링크가한번이라도클릭된후 a:visited{ color:red; text-decoration:none; font-family: 돋움 ; font-size:9pt;} 링크를클릭하고나면 a:active{ color:blue; text-decoration:none; font-family: 돋움 ; font-size:9pt;} 커서가링크위로올라왔을때 a:hover { color:green; text-decoration:underline; font-family: 돋움 ; fontsize:9pt; background-color:#0066cc } 45

46 CSS Border Style 예제 Border Style 2 (border width, style, color, boder-right-color) <style type="text/css"> p.one { border-style: solid; border-width: 5px; border-color: blue /*border-right-color: #ff0000*/ } p.two { /* 색상두개지정할경우, 먼저색은위아래선색, 다음색은좌우선색 */ border-style: solid; border-width: 10px; border-color: blue yellow /*border-right-color: #ff0000*/ } 46

47 CSS Border Style 예제 p.three { /* 색상세개지정할경우, 먼저색은위, 다음색은좌우색, 다음색은아래로나타난다. */ border-style: solid; border-width: 15px; border-color: blue yellow red /*border-right-color: #ff0000*/ } p.four { /* 시계방향으로적용됨 */ border-style: solid; border-width: 20px; border-color: blue yellow red gray /*border-right-color: #ff0000*/ } </style> 47

48 CSS 테이블에 CSS 적용하기 (1) 테이블에 CSS 적용하기 <HTML> <HEAD> <TITLE> 테이블에스타일시트적용하기 </TITLE> <STYLE type="text/css"> TABLE { border-style:double; /* 테두리종류 : double*/ border-width:5px; /* 테두리굵기 : 5px*/ border-color:# /* 테두리색 : #006600*/ } 48

49 CSS 테이블에 CSS 적용하기 (2) TH { border-style:solid; /* 테두리종류 : solid*/ border-top-width:0px; /*border-top-width : 위쪽테두리굵기 : 0px*/ border-bottom-width:5px; /* 아래쪽테두리굵기 : 5px*/ border-right-width:0px; /* 오른쪽테두리굵기 : 0px*/ border-left-width:0px; /* 왼쪽테두리굵기 : 0px*/ border-color:#006600; /* 테두리색 : #006600*/ padding:5px 5px 5px 5px; /*padding : 셀안의데이터와테두리간여백 */ background-color:#ffffff; /* 배경색 : #ffffff*/ color:#006699; /* 글자색 : #006699*/ font-size:15pt; /* 폰트크기 : 15pt*/ font-family: 바탕 ; /* 폰트체 : 바탕 */ letter-spacing:10px /* 글자간격 : 10px*/ } 49

50 CSS 테이블에 CSS 적용하기 (3) TD { border-style:dotted; /* 테두리종류 : dotted*/ border-top-width:0px; /*border-top-width : 위쪽테두리굵기 : 0px*/ border-bottom-width:1px; /* 아래쪽테두리굵기 : 1px*/ border-right-width:0px; /* 오른쪽테두리굵기 : 0px*/ border-left-width:0px; /* 왼쪽테두리굵기 : 0px*/ border-color:#006600; /* 테두리색 : #006600*/ padding:5px 5px 5px 5px; /*padding : 셀안의데이터와테두리간여백 * / line-height:150%; /* 칸높이 : line-height: 150%*/ font-size:15pt; /* 폰트크기 : 15pt*/ font-family: 바탕 7 /* 폰트체 : 바탕 */ } </STYLE> </HEAD> 50

51 Java Script 51

52 Java Script 1. 자바스크립트란? 자바스크립트는네스케이프사가개발한객체지향스크립트언어로 HTML 문서내에작성하고웹브라우저에의해실행된다 자바스크립트작성방법 HTML 문서내에작성할때 <SCRIPT LANGUAGE= JavaScript > 자바스크립트코드 </SCRIPT> HTML 문서외부에따로둘때 <SCRIPT LANGUAGE= JavaScript SRC= aaa.js ></SCRIPT> 확장자는 js 이고텍스트문서이다. 다른사이트의 js 파일도가능하다 ( 웹문서를간결하게해주고여러문서가공통으로 js 파일을사용할수있다. 자바스크립트를이해하지못하는브라우저를위해  <SCRIPT LANGUAGE= JavaScript >  </SCRIPT> 52

53 Java Script 2. 자바스크립트위치 HEAD 태그내에 <HEAD> <SCRIPT LANGUAGE= JavaScript > 자바스크립트코드 </SCRIPT> </HEAD> BODY 태그위에 <HEAD><title>~~</title></HEAD> <SCRIPT LANGUAGE= JavaScript > 자바스크립트코드 </SCRIPT> <BODY> 필요시문서내적당한곳에 </table> <SCRIPT LANGUAGE= JavaScript >  </SCRIPT> <table> 53

54 Java Script 3. 자바스크립트기본문법 변수 배열 var 변수명 [= 초기값 ][, 변수명 [= 초기값 ]] var firstname; var lastname= 김 ; var 배열명 =new Attay(); 배열명.push(1); 배열명 [0]=1; var a=new Array(); a[0]=1; 산술연산자 +, -, *, /, %, ++, -- 대입연산자 =, +=, -=, *=, /=, %= 비교연산자!=, ==, >, <, >=, <= 논리연산자 &&,,! 조건연산자 ( 조건 )? 조건이참일때의값 : 조건이거짓일때의값 ; ex) b= (a>10)? 3 : 0 ; 54

55 Java Script 자바스크립트의구문과함수 if 문 if ( a>b ) { document.write( a 가 b 보가큽니다 ); } else if ( a == b) { document.write( a 와 b 는값습니다. ); } else { document.write( a 가 b 보다작습니다. ); } switch 문 switch ( a % 2 ) { case 0 : document.write( 짝수 ); break; case 1 : document.write( 홀수 ); break; default: document.write( 숫자가아닙니다. ); break; } 55

56 Java Script 자바스크립트의구문과함수 for 문 for ( var a=1; a < 10 ; a++ ) { sum+=a; } while 문 while ( a <= 10 ) { sum += a; a++; } try ~ catch 문 try { document.write(name+ 입니다 ); } catch(e) { document.write(e.message); } 56

57 Java Script 자바스크립트의구문과함수 매개변수가없는함수 <script language= javascript > function sayhello() { document.write( 안녕하세요? ); } </script> 메서드이름과변수이름이반드시달라야한다. 매개변수가있는함수 <script language= javascript > function sayhello(name) { document.write(name+ 님안녕하세요? ); } </script> 리턴값이있는함수 <script language= javascript > function sayhello(name) { return name+ 님안녕하세요? ; } </script> 함수선언시리턴타입을표시하지않음 57

58 Java Script 자바스크립트로웹브라우저창제어 alert() 사용자에게메시지를보여주기 <script language= javascript > alert( 안녕하세요? ); </script> prompt() 사용자에게질문하기 <script language= javascript > var name= prompt( 이름을입력하세요 ); alert(name+ 님환영합니다 ); </script> confirm() 사용자의선택알아내기 <script language= javascript > var result = confirm( 삭제하시겠습니까? ); if ( result ) { alert( 삭제합니다 ); } else { alert( 삭제작업취소 ); } </script> 58

59 Java Script 자바스크립트로웹브라우저창제어 open() 팝업창띄우기 <script language= javascript > window.open( 새로운창, left=0,top=0,width=300,height=500, location=yes,status=no ); </script> settimeout() 일정시간이지나면함수를실행하기 <script language= javascript > var timer = settimeout(sayhello,3000) </script> 3 초뒤에 sayhello 함수호출 cleartimeout(timer); 함수호출동작을중단한다. setinterval() 일정시간동안특정함수를반복실행하기 <script language= javascript > var timer = setinterval(sayhello, 5000); </script> 5 초간격으로 sayhello 함수호출 cleartimeout(timer); 함수호출동작을중단한다. 59

60 Java Script 4. 자바스크립트함수 함수정의하기 function 함수이름 ( 매개변수 1, 매개변수 2,... ) { } 함수문장 반환값이있는경우 function testfunction(var1) { } var var2; var2=confirm(var1); return var2; 자바스크립트함수호출하기 다른자바스크립트구문에서앞의예제와같이명시적으로호출하여실행한다. 링크에의해 <a href="javascript:testa()"> 실행하기 </a> body 태그에서 <body onload= testa()"> 페이지로딩시실행된다. onclick, onmouseover 등등과같은다양한이벤트에의해에의해실행된다. 60

61 Java Script 5. 자바스크립트객체 객체정의하기 자바스크립트에서객체는생성자함수 (constructor function) 라는것을통해정의 function computer(cpu,memory,disk) { } this.cpu=cpu; this.memory=memory; this.disk=disk; 객체만들기 var mycom=new computer( 2 core, 8G, 500G ); 객체의메서드정의하기 function computer(cpu,memory,disk) { this.cpu=cpu; this.memory=memory; this.disk=disk; this.print = function() { document.write( CPU: +this.cpu+ 메모리 : +this.memory+ 디스크 : +this.disk+ <p> ); } 61

62 Java Script 6. 자바스크립트내장객체 자바스크립트내장객체란? 자바스크립트에서사용할수있도록미리만들어진객체. String, Date, Math, Array 같은객체가많이사용되는내장객체이다. 객체의메서드정의하기 function computer(cpu,memory,disk) { this.cpu=cpu; this.memory=memory; this.disk=disk; this.print = function() { document.write( CPU: +this.cpu+ 메모리 : +this.memory+ 디스크 : +this.disk+ <p> ); } 62

63 Java Script 브라우저내장객체 익스플로러나네비게이터등의브라우저가내장하고있는객체를자바스크립트를이용하여이용할수있다. 다음은웹문서에서기본적으로만들어지는내장객체이다. 이부분이자바스크립트의상당부분을차지할정도로중요하고이용빈도또한아주높다. 63

64 Java Script 브라우저내장객체 내장객체 window 설명 브라우저창이열릴때마다하나씩만들어지는객체이다. 브라우저창안에존재하는모든요소의최상의객체이다. navigator 현재사용중인브라우저에대한정보를가지고있는객체이다. frame document 프레임마다하나씩만들어지는객체로, <FRAME> 태그를쓸때마다하나씩만들어진다. 웹페이지마다하나씩만들어지는객체로, <BODY> 태그에의해만들어진다. HTML 문서에대한정보를가지고있다. location 현재페이지에대한 URL 정보를가지고있는객체이다. history 현재창에서사용자의방문기록을저장하고있는객체이다. image 웹페이지에삽입된이미지정보를가지고있는객체로 <IMG> 태그를쓸때마다객체가하나씩만들어진다. link 웹페이지의하이퍼링크정보를가지고있는객체로, <A Href = "..."> 태그를쓸때마다만들어진다. 64

65 Java Script window 객체메서드 alert() : 경고용대화상자를보여줌 confirm() : 확인, 취소를선택할수있는대화상자를보여줌 open() : 새로운창을오픈 <script language="javascript"> function winopen() { // 페이지로딩시새창열기 window.open("123.html","newwin","width=300,height=200,toolbar=no") } </script> <body onload="winopen()"> <font onclick="winopen()"> 클릭열기 </font> <a href="javascript:winopen()"> 링크열기 </a> </body> prompt() : 입력창이있는대화상자를보여줌 blur() : focus 를이동 back() 한단계전 URL( 이전화면 ) 로돌아감. 익스플로러지원안함 65

66 Java Script window 객체이벤트핸들러 onblur : 브라우저가포커스를잃을때발생 onerror : 문서를읽는중에에러가생길때발생 onfocus : 브라우저에포커스를얻을때발생 onload : 문서를읽을때발생 onunload : 현재문서를지울려고할때발생 66

67 Java Script document 객체 최상위 window 객체에서파생된것으로 <body>~</body> 태그속의내용과관련된처리를할수있다. 많은기능이있지만이객체는범위가넓어서직접다루는일은별로없고실제이용은이객체에서파생된하위객체 (Layer, Link, Image, Area, Anchor, Applet, Form) 를통해세세한접근을할수있다. 상위객체인 window 를생략하고사용한다. 현재문서의 URL <script language="javascript"> alert(document.location) </script> 이전문서의 URL <script language="javascript"> alert(document.referer) // 이파일을링크한페이지에서 </script> // 넘어와야값이있다. 67

68 Java Script Document 객체와내장객체 title 속성을이용해서 HTML 문서의제목바꾸기 <script language= javascript > var title = window.prompt( 제목을입력하세요 ); document.title=title; </script> <TITLE> 태크의값을변경한다. bgcolor 속성으로문서의배경색변경 <script language= javascript > function changebg(color) { document.bgcolor=color; } </script> HTML 문서내의특정태그를찾아내기 메서드 getelementbyid getelementbyname 설명 HTML 태그의 id 특성값을이용해객체를찾는다 HTML 태그의 name 특성값을이용해객체를찾는다 getelementbytagname HTML 태그이름으로객체를찾는다. 68

69 Java Script Document 객체와내장객체 createelement 와 appendchild 메서드로 HTML 태그를동적으로생성하기 <html> <head> <title> 동적으로테이블만들기 </title> <script language= javascript > function makefriends() { var myfriends = window.prompt( 친구가몇명인가요?, ); for ( var i=0; i<parseint(myfriends); i++) { var textbox=document.createelement( input ); var newline=document.createelement( br ); textbox.type= text ; document.body.appendchild(textbox); document.body.appendchild(newline); } } </script> </head> <body onload= makefriends() > <h2> 내친구목록 </h2> </body> </html> <body> 에붙여넣는다. <input type= text name= textbox > 69

70 Java Script history 객체 window 객체에서파생된것으로 window 를생략한다. 방문자가최근에방문한 URL 을웹브라우저가저장해둔히스토리정보를이용해서앞으로, 뒤로갈수있다. URL 자체를알아내지는못한다. 어떤일처리를하고나서원래의페이지로보낼때이용한다. <script language="javascript"> alert( 로그인실패 ") history.back() // history.go(-1) 과동일 </script> 메서드 back() forward() go() 설명웹브라우저의 [ 뒤로 ] 버튼을클릭한것과같이이전페이지로이동웹브라우저의 [ 앞으로 ] 버튼을클릭한것과같이앞페이지로이동지정된숫자만큼이전페이지또는앞페이지로이동 70

71 Java Script location 객체 window 객체에서파생된것으로 window 를생략한다. 열려있는문서의 URL 정보를얻을수있고, 이보다는앞으로이동할문서의 URL 을설정하는데아주중요하게사용된다. 열릴문서의 URL 설정하기 <script language="javascript"> location.href= " </script> <script language="javascript"> alert(" 회원가입을하시겠습니까?") location.href= "member.html" </script> <script language="javascript"> // 연창의 URL 이동 opener.location.href= "member.html" </script> <script language="javascript"> // 부모창지정프레임의 URL 이동 parent.frame1.location.href= "member.html" </script> 71

72 Java Script location 객체 (2) <script language="javascript"> // 전체창에새페이지열기 top.location.href= "index.html </script> 72

73 Java Script form 객체 document 객체소속으로 html 의 <form> 태그에접근하는정보를제공한다. 웹프로그래밍에서아주중요한전송과관련하여필수로사용되는객체이다. <form name="form1" action="ok.jsp" method="post" target="_self" enctype="" > <input type="text" name="tel"> </form> <form name="form2" action="ok.jsp" method="post" enctype=""> <input type="text" name="tel"> </form> 위의폼태그에서 "tel" 에접근하려면아래처럼배열또는이름을이용할수있다. document.form1.tel 또는 document.forms[0].elements[0] document.form2.tel 또는 document.forms[1].elements[0] * 배열정보를이용할때는 for 반복문을통해모든폼 / 모든요소에접근할때유리하다 73

74 Java Script 1. form 객체속성 속성 name action method target encoding elements 설명 <form> 태그의 name 속성값 name 은자바스크립트에서폼이름으로접근하기이해설정이필요 <form> 태그의 action 속성값전송에사용하고자할경우이전송을받아처리할페이지를설정 <form> 태그의 method 속성값전송의방법으로 post 또는 get 방식을사용할수있다. 특별히지정하지않으면 get 방식이사용된다. <form> 태그의 target 속성값 _blank, _self, _top,_parent <form> 태그의 enctype 속성값전송데이타를 encode 하는방법으로첨부파일이있다면 multipart/formdata 을, 첨부가없다면생략하면된다 <form> 태그내의폼요소를배열로저장 74

75 Java Script 1. Form 객체의객체 form 객체의 elements 는현재 form 안에선언되어있는모든입력양식에대한객체정보를배열형태로포함하고있다. ex) document.form1.elements[0].value 2. Form 객체의메서드 submit() : 서버로데이타전송 submit 버튼을누른효과 reset() : 폼요소의값을모두초기화 reset 버튼을누른효과 3. Form 객체의이벤트핸들러 onsubmit : 입력양식에있는데이터를서버로보낼때발생하는 submit 이벤트를처리하기위한이벤트핸들러 onreset : 입력양식에있는리셋버튼을눌렸을때발생하는 reset 이벤트를처리하기위한이벤트핸들러이다. ex) <form name= form1 action= nothing onsubmit= return bewforesubmit() > 75

76 Java Script HTML 문서에서발생하는이벤트종류 이벤트 이벤트핸들러 설명 blur onblur 태그영역에서포커스가없어질때 change onchange 텍스트상자에입력하거나드롭다운리스트에서목록을선택할때 click onclick 태그영역을클릭했을때 dbclick ondbclick 태그영역을더블클릭했을때 dragdrop ondragdrop 태그영역을드래그했을때 focus onfocus 태그영역이포커스를얻었을때 keydown onkeydown 태그영역이포커스를얻은후사용자가키보드의키를누를때 keyup onkeyup 태그영역이포커스를얻은후사용자가키보드의키를눌렀다땔때 keypress onkeypress 키보드를눌렀다가때고난뒤 load onload <body> 나 HTML 태그가웹브라우저에의해해석될때 unload onunload <body> 나 HTML 태그가없어질때 mousedown onmousedown 마우스버튼을누를때 76

77 Java Script HTML 문서에서발생하는이벤트종류 이벤트 이벤트핸들러 설명 mouseup onmouseup 마우스버튼을눌렀다뗄때 mousemove onmousemove 마우스가움직일때 mouseover onmouseover 태그영역안으로마우스포인터가들어오는순간 mouseout onmouseout 태그영역바깥으로마우스포인터가나가는순간 resize onresize 태그영역의크기가조절될때 submit onsubmit <input type= submit > 버튼을클릭할때 reset onreset <input type= reset > 버튼을클릭할때 77

78 Java Script 이벤트를처리하는 3 가지방법 이벤트핸들러를이용하는방법 <img onclick= 이벤트핸들러함수 > HTML 객체에이벤트핸들러를지정하는방법 <script language= javascript > window.onload = function() { // 스크립트코드를추가 } </script> 동적으로이벤트처리를추가하는방법 <input id= button type= button value= 눌러 > <script language= javascript > var objbutton=document.getelementbyid( button ); objbutton.attachevent( onclick,clickeventhandler); function clickeventhandler() { // 버튼이클릭되었을때실행된내용정의 } </script> 78

79 감사합니다. 79

PowerPoint Template

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