컴퓨터프로그래밍 - HTML

Size: px
Start display at page:

Download "컴퓨터프로그래밍 - HTML"

Transcription

1 컴퓨터프로그래밍 - HTML

2 HTML 이란? v Hyper Text Markup Language v 웹문서제작에사용되는표준언어 v 문서타입 : 텍스트파일형식 HTML 문서의특징 v 공백, 줄바꿈인식못함 v 텍스트문서의형태 - 확장명 :.html,.htm v 인터넷문서로사용하기에적합 - 컴퓨터기종에무관 - 파일크기작음 v 대소문자를구분하지않음

3 HTML 문서의작동원리

4 HTML 태그의구조 (1) v Markup Tag 사용형태 v v v v 영문대소문자구별없음 - <TITLE>, <title>, <Title> <tag>... </tag> - 예 ) <title> 내용 </title> <tag attribute=argument>... </tag> - 예 ) <font size=3> 내용 </font> <tag> - 예 ) <br>

5 HTML 태그의구조 (2) v 사용의주의사항 v 중첩사용시마감태그의대응위치 <tag1> <tag2> <tag1>... <tag2>... </tag1> </tag2> </tag2> </tag1> (x) (o)

6 HTML 문서의기본구조 (1)

7 HTML 문서의기본구조 (2) v v v <html> </html> v Html문서의시작과종료의범위를지정 <head>... </head> v 문서의 meta-information을포함 - 문서에대한정보 v 자료영역에보이지않음 v 저자정보, 스크립트, 스타일시트, 주석 <body>... </body> v 문서의실제내용이들어감 v 각종태그를사용하여문서표현

8 <HEAD> 태그 1 v <TITLE>... </TITLE> v 문서의제목 ( 제목표시줄에표시 ) v <META> v 문서의정보에관련된여러가지정보를기술하는태그 v NAME 속성을이용하여문서정보 - NAME : 정보의형태를정의 - CONTENT : 정보를기술 - <META NAME = author CONTENT= 작성자 > - <META NAME = description CONTENT= 문서의설명 > - <META NAME = keywords CONTENT= keyword1, keyword2,. >

9 <HEAD> 태그 2 v http-equiv 속성을이용한문서정보 v v v v 캐쉬정보만료날짜지정 <META http-equiv= expires CONTENT= Thu, 22 May :22:07 GMT > 캐쉬저장방지 <META http-equiv= pragma CONTENT= nocache > <META http-equiv= cache-control CONTENT= nocache > 문서제작에사용된언어지정 <META http-equiv= content-type CONTENT= text/html; charset=euc-kr > 문서의이동 <META http-equiv= refresh CONTENT= 시간 (sec); URL= 불러올문서 url >

10 HTML 문서의예 <HTML> <HEAD> <TITLE> 기본구조 </TITLE> </HEAD> <BODY> HTML의기본구조 HTML은다음과같이... </BODY> </HTML>

11 요약 HTML 문서는웹에서사용되는표준문서제작에사용된다. HTML 은태그들로기술된언어다. HTML 문서는텍스트형식의파일이다. HTML 문서는컴퓨터시스템이나운영체제에독립적이므로어떠한시스템에서도동일하게표현된다. HTML 문서는공백이나줄바꿈을인식하지않고대소문자를구분하지도않는다. HTML 문서의기본구조는 HEAD 와 BODY 로나누어진다. <HEAD> 태그는문서에관련된여러가지정보를기술하는곳이다. 실제문서에표시될문자는 <BODY> 태그내에기술한다. 문서의시작과끝을구분하기위해 <HTML> </HTML> 태그를기술한다. 문서의제목을표현하기위해 <HEAD> 태그내에서 <TITLE> 태그를이용하여기술한다. 복합태그를사용할때태그사이의중첩은허용되지않는다.

12 <FONT> v 글자의크기, 색상, 서체를지정 v 속성 v SIZE= n : n=1~7, 기본값은 n=3 v COLOR= {# 색상코드 색상이름 } v FACE=" 글꼴체 " v 태그사용예 v <FONT SIZE= 4 > </FONT> v <FONT COLOR= red > </FONT> v <FONT FACE= 바탕체 > </FONT> v <FONT SIZE= 4 COLOR= #ff0000 >...</FONT>

13 색상표현단어 표현단어 색상 표현단어 색상 Black 검정 Silver 은색 Maroon 밤색 Red 빨간색 Green 녹색 Lime 라임색 Olive 올리브색 Yellow 노란색 Navy 남색 Blue 파란색 Purple 자주색 Fuchsia 분홍색 Teal 청록색 Aqua 옥색 Gray 회색 White 흰색

14 색상코드표 v RGB : 각각을 8 비트를이용하여 16 진수로표현 색상 색상코드값 색상 색상코드값 하얀색 FFFFFF 연두색 C0DCC0 검정색 연한베이지색 FFFBF0 진한빨강색 회색 A0A0A4 진한초록색 진한회색 진한노란색 빨간색 FF0000 진한파란색 녹색 00FF00 진한보라색 파란색 0000FF 진한하늘색 노란색 FFFF00 연한회색 C0C0C0 분홍색 FF00FF 초록색 C0DCC0 하늘색 00FFFF 연한파란색 A6CAD0

15 <FONT> 태그사용예

16 <BASEFONT> v <HEAD> 태그내에서지정하면문서전체에적용 v <BASEFONT size= 2 color= black > v <BODY> 태그내에서는종료태그와함께사용

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

18 문자관련태그 v 글자모양 : 물리적형태 v <b>... </b> v <I>... </I> v <u>... </u> v <tt>... </tt> v <sub>... </sub> v <sup>... </sup> v <big>... </big> v <small>... </small> v <strike> </strike> v <blink>... </blink>

19 <Hn> 태그 - heading v v 문서내의단계별제목문서에논리적의미부여 v <Hn> : n = 1 ~ 6 v n=1 이가장큰제목 v v v v 자동줄바꿈 속성 v ALIGN= {left center right } <H1> </H1> <H3 ALIGN= center > </H3>

20 <Hn> 태그사용예 <html> <head> <title> 기본구조 </title> </head> <body> <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> </body> </html>

21 <BR> - Brake v 줄바꿈태그 v 단락구분은하지않음 v 종료태그없음

22 <P> 태그 - Paragraph v 문단구분 v 줄을바꿈과동시에한줄띄게되는효과 v 속성 v align= { left center right } 이것은문단관련태그를연습중입니다. <p> 여기서부터새로운문단으로시작하고있습니다.</p> 문단관련태그의사용법을익힙시다. 이것은문단관련태그를연습중입니다. <p align= center > 여기서부터새로운문단으로시작하고있습니다.</p> 문단관련태그의사용법을익힙시다.

23 <CENTER> 태그 v 태그사이의내용을가운데정렬 이것은중앙정렬태그를연습 <br> 중입니다. <center> 중앙정렬태그를이용하면이렇게보입니다.<br> 여기까지 </center> 중앙정렬태그의사용법을익힙니다.

24 <HR> 태그 - Horizontal Rules v가로선긋기 v속성 v ALIGN= {left center right } v SIZE= n : 선의두께 (pixel), 기본값은 2 v WIDTH= n : 선의폭 (pixel,%) v NOSHADE : 음영효과사용안함 v COLOR= color : 선의색상 v<hr align= size= n width= n color= color [noshade]>

25 <HR> 태그사용예 hr 태그의사용법을알아봅니다.<br> 기본선 <hr> 선두께 4 <hr size="4"> 선두께 4 음영효과없음왼쪽정렬 <hr align="left" size="4" noshade> 선두께 7 음영효과없음폭 200 픽셀 <hr size=7 noshade width=200> 선두께 7 음영효과없음폭창크기의 80% 선색상빨강 <hr size=7 noshade width=80% color="red">

26 <ADDRESS> 태그와주석문 v <! > v 주석문 <!-- 주석문을연습하는부분입니다. --> 위에주석문이있습니다. 안보이죠? <br><br> <hr size=4> <!-- 주석문은이와같이여러줄도가능합니다. -->

27 DIV 태그 - division v 특정부분과구역으로구분 v 논리적블록요소 v 주로스타일시트와함께사용 v 앞뒤줄바꿈 v 속성 v ALIGN= { left center right } 이것은문단관련태그를연습중입니다. <div> 여기서부터새로운문단으로시작하고있습니다.</div> 문단관련태그의사용법을익힙시다. 이것은문단관련태그를연습중입니다. <div align= center > 여기서부터새로운문단으로시작하고있습니다.</div> 문단관련태그의사용법을익힙시다.

28 SPAN 태그 v v 강제줄바꿈없이텍스트를구분 주로스타일시트와함께사용 이것은문단관련태그를연습중입니다. <span> 여기서부터새로운문단으로시작하고있습니다.</span> 문단관련태그의사용법을익힙시다.

29 <PRE> 태그 - Preformatted v v v 입력한형태그대로출력 공백, 줄바꿈인식 내부의태그인식 이것은문단관련태그를연습중입니다. <pre> <p> 여기서부터새로운문단으로시작하고있습니다.</p> 문단관련태그의사용법을익힙시다. </pre>

30 Character Entity v HTML 내에서의특수문자표시방법 기호 표기 설명 " 인용문기호 & & 앰퍼센트 < &lt Lower than > &gt Greater than 공백 권한기호 등록상표

31 Character Entity 사용예 <p> 태그를보여주고싶은데...??? <br> < p > 이렇게하면됩니다.<br> 공백은이렇게해선만들어지않습니다.<br> 공백은 이렇게해야합니다.

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

33 순서리스트 v 순서글머리번호에순서번호가있는리스트 v <OL> v <LI> v 리스트의시작과종료 (Ordered List) v 속성 - TYPE= { A a I i 1 } : 글머리번호의종류 - START= n : 글머리번호의시작번호 v 리스트항목을기술 v 속성 v TYPE= { A a I i 1 } : 해당항목의글머리번호의종류 v VALUE= n <OL> <LI> </LI> <LI> </LI> </OL>

34 순서리스트사용예 <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>

35 무순서리스트 v 순서글머리번호에순서번호가없는리스트 v <UL> v 리스트의시작과종료 (Unordered List) v 속성 v<li> v TYPE= { disc circle square } : 글머리의모양 v v 리스트항목을기술 v 속성 v TYPE= { disc circle square } : 글머리의모양 <UL> <LI> </LI> <LI> </LI> </UL>

36 무순서리스트사용예 <ul> </ul> <li> 서울 <li> 경기 <li> 제주 <ul type=square> <li> 서울 <li> 경기 <li> 제주 </ul>

37 정의리스트 v <DL> : 정의리스트의시작과종료 v <DT> : 정의제목 v <DD> : 설명, 항목, DT에대해들여쓰기효과 v <DL compact> <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>

38 중첩리스트 v 시작태그, 마감태그사용주의 ( 대칭 ) <ol> </ol> <li> 서울 <ul type=disc> <li> 종로 <li> 동대문 </ul> <li> 경기 <li> 제주

39 Hyperlink - <A> 태그 v anchor 속성 v HREF= url : 연결문서지정 v TARGET : 연결문서를출력할대상 v_blank : 새로운창을열어서문서연결 v_top : 현재창의최상위에문서연결 v_parent : 현재문서창을연문서창에서연결 v_self : 자기자신의창에서연결 vframe_name : 지정한프레임에서연결 v TITLE : 링크에대한설명을기술 v <A HREF= 연결할문서 TARGET= 대상 > 내용 </A>

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

41 Hyperlink 의책갈피이용 v NAME 속성을이용하여문서내의특정부분으로의연결설정 v 대상문서에책갈피위치설정후하이퍼링크지정시책갈피이름을지정 v 책갈피위치설정 : <A NAME= name >..</A> v 책갈피위치로링크생성 :<A HREF= 문서 #name >.. </A> v 동일문서내에서는문서명생략가능

42 NAME 속성 (1) 하이퍼링크연습문서입니다. <a href=" WWW </a> 란무엇인가? <A NAME= name >..</A>

43 NAME 속성 (2) 하이퍼링크연습문서입니다. <a href=" HTML </a> 이란무엇인가? 그부분과연관이되는다른문서로이동이된다.<br> <a name="imsi"> WWW </a> 은바로이러한원리를이용하는하이퍼텍스트문서로정보를표현함으로서이용자가자신이원하는정보를보다더편하고빠르게습득할수있도록기능을제공한다.

44 동일문서내에서책갈피사용 <html> <head> <title> 링크연습 </title> </head> <body> <a href= # 서론 name= 위 >1. 서론 </a> <a href= # 본론 >2. 본론 </a> <a href= # 결론 >3. 결론 </a> <a name= 본론 > 2. 본론 </a> 이부분은본론입니다.. <a name= 서론 > 1. 서론 </a> 이부분은서론이. <a name= 결론 > 3. 결론 </a> 이부분은결론입니다 <a href= # 위 > 위로가기 </a>

45 다른서버의문서로연결 v 웹문서로연결 : v FTP 서버로연결 : ftp://ftp.shareware.co.kr 하이퍼링크연습문서입니다. <a href= OCU 로가기 </a>

46 <BODY> 태그의속성들 v BACKGROUND : 문서의배경그림 v BGPROPERTIES="fixed : 배경그림고정 v BGCOLOR= color : 문서의배경색상 v TEXT= color : 기본글자색상 v LINK= color : 링크색상 v VLINK= color : 방문한링크색상 v ALINK= color : 클릭순간부터링크연결중색상 v LEFTMARGIN= n : 문서의왼쪽여백 v TOPMARGIN= n : 문서의위쪽여백 vmarginheight, marginwidth : NETSCAPE

47 문서의배경이미지 v <BODY BACKGROUND= image_url >

48 문서의배경색지정

49 링크관련글자색변경 <body text="#0000ff" link="red" vlink="green alink= black > 하이퍼링크연습문서입니다.<br> <a href=" OCU 로가기 </a><br> <a href=" OCU 메일 </a>

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

51 그림삽입예 v <img src= > v <img src= images/abc.gif > Homepage and... 하이퍼링크연습문서입니다. <img src=" OCU 그림삽입

52 이미지와텍스트정렬 v 글자의위치를이미지와연관시켜배치 v 이미지를중심으로텍스트를배치할경우 v ALIGN= top, middle, bottom v top - 글자를이미지의가장윗부분에정렬 v middle - 글자를이미지의중앙선에정렬 v bottom - 글자를이미지의가장밑부분에정렬 v ALIGN=bottom 옵션은기본값 v 문장이긴경우, 창의크기를줄이면자동적으로이미지밑으로위치하게된다는것에주의

53 이미지정렬예 <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>

54 이미지제목넣기예 v 이미지제목넣기 v <img src= img_url alt= title > v 이미지위치에이미지대신제목보여줌 v 텍스트베이스브라우저에서사용 v 로딩시간동안이미지위치에보여줌 하이퍼링크연습문서입니다. <img src= alt= OCU 로고 > OCU 그림삽입

55 여백및테두리조정하기 v <IMG SRC= 그림파일 " VSPACE=n HSPACE=n> v 이미지를부동이미지로판별하게해서글자가그주위에오지못하게함 v HSPACE 속성 v 이미지의양옆으로 ( 가로측 ) 여백을지정 v VSPACE 속성 v 이미지의위, 아래여백을지정 v BORDER 속성 v 이미지의테두리를지정, 강조 v 색깔 : BLACK

56 이미지넣기 (5) v 외부이미지지정하기 v<a href= ex_img.jpg ><img src= in_img.jpg ></a>

57 Image Map v v 하나의이미지내에여러개의서로다른링크구성활용예 <img usemap= map_name > <map name= map_name > <area href=.. shape=.. coords=.. > </map> shape 모양 coords 설명 rect 사각형 x1,y1,x2,,y2 circle 원 x,y,r x1,y1 : 왼쪽위좌표 x2,y2 : 오른쪽아래좌표 x,y : 중심점좌표 r : 반지름 poly 다각형 x1,y1,x2,y2,x3,y3.. 각각의모서리좌표

58 이미지맵예제 <img src="global.gif" usemap="my_menu"> <map name="my_menu"> <area href="sj.htm" shape="rect" coords-"0,0,45,10"> <area href="st.htm" shape="rect" coords-"47,0,90,10"> <area href="sk.htm" shape="rect" coords-"92,0,135,10"> </map>

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

60 멀티미디어연습 v <img src= >

61 <TABLE> 태그 v 표의시작과끝 v 속성 v BORDER= n : 외부테두리두께, 기본값은 0 v CELLSPACING= n : 셀간격 v CELLPADDING= n : 셀내부여백 v WIDTH= n, HEIGHT= n : 표의너비, 높이 v BGCOLOR= color : 표의배경색 v BORDERCOLOR= color : 표의테두리색

62 표만들기예 v <TR>..</TR> : 행단위지정 v <TH>..</TH> : 셀헤더지정 v <TD>..</TD> : 셀데이타지정 <table border=1> <tr> <th>no.</th> <th> 시간 </th> </tr> <tr> <td>1 교시 </td> <td>10:00</td> </tr> </table>

63 표만들기연습 <table border=1 cellspacing=1 cellpadding=1> <tr><th>no.</th><th> 시간 </th></tr> <tr><td>1</td><td>10:00</td></tr> </table> <table border=5 cellspacing=5 cellpadding=5 width=200 bgcolor= #ddefdd >

64 <TR><TH><TD> 에서사용되는속성 v v v v v v v 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)

65 셀합병연습 <table border=2> <tr> <td colspan= 2 >..</td> <td>.. </td> </tr> <tr> <td>..</td> <td>..</td> <td>..</td> </tr> </table>

66 <CAPTION> 태그 v 표제목 v 속성 v ALIGN= { top bottom } : 제목의위치 <table border=3 cellpadding=5> <caption align=bottom> 표 1: caption 값 </caption> <tr><th>align 값 </th><th> 위치 </th></tr> <tr><th>bottom</th><td> 표아래 </td></tr> <tr><th>top</th><td> 표위 </td></tr> </table>

67 표만들기

68 표만들기응용 v 활용하기 v 다단문서작성 : border=0이용 v 이미지삽입시액자효과 : 중첩된 table사용

69 FRAME 문서 v 하나의창을여러개의화면으로분할 v 프레임마다독립적인 URL 가짐 v <BODY> 대신 <FRAMESET> 태그사용 v 프레임문서제작방법 v <FRAMESET> 태그를이용하여창나누기 v <FRAMESET> 태그내에 <FRAME> 태그를이용하여각프레임에나타낼문서지정

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

71 <FRAME> 태그 v 각각의프레임에표시할문서지정 v 속성 v SRC= url : 프레임에보여질 HTML문서의 URL v NAME= name : 프레임의이름 v SCROLLING= { yes no auto } : 스크롤바생성유무, v NORESIZE : 프레임크기고정 v 프레임설정순서 : L -> R, T -> B 1.htm m.htm 2.htm <html> <head> </head> <frameset cols= 200,* > <frame src= m.htm > <frame src= 2.htm > </frameset> </html>

72 FRAME NAME(1) v Target 지정 v <a href=. target= > v _top, _blank, _self, 프레임명 v 기본 Target 설정 v <base target=... > : HEAD tag 내에선언 m.htm 2.htm <html> <head> </head> <frameset cols= 200,* > <frame src= m.htm > <frame src= 2.htm name= main > </frameset> </html> frame_name main

73 FRAME NAME(2) <a href=" ocu 가기 </a> <br> <a href=" target="main"> ocu 가기 2 </a> m.htm

74 <NOFRAMES> 태그 v FRAME 태그를지원하지않는브라우저를위해설정 <html> <head> </head> <frameset cols= 200,* > <frame src= 1.htm > <frame src= 2.htm name= main > </frameset> <noframes> <body> 이페이지를보려면프레임을지원하는브라우저가필요합니다. </body> </noframes> </html>

75 다중 FRAME 문서 <html> <head> </head> <frameset cols="50,*"> <frame > <frameset rows="60,*"> <frame> <frame > </frameset> </frameset> </html>

76 Floating 프레임 v <IFRAME> : floating 프레임 v src= url 로드할문서의 url v width, height = n 프레임의크기지정 v align : iframe 위치지정 v 주위에글자가배치될수있게할수있는박스형프레임생성태그

77 Floating 프레임예제

78 입력폼 v 사용자로부터정보를입력받을수있는형식 v 속성 v NAME : 폼이름 v ACTION : 폼에서입력된데이터를보내서처리하는프로그램의 URL 을지정 v METHOD : 데이터전송방법 <FORM> </FORM >

79 텍스트입력양식 v <INPUT> v 속성 v TYPE= text : 텍스트입력상자 v NAME = field_name : 입력상자이름 v SIZE = n : 입력상자크기 ( 디폴트 :20) v MAXLENGTH = n : 최대입력가능글자수 v VALUE = value : 입력상자초기값 v TITLE : 마우스오버시표시문자 v READONLY : 입력불가 입력하나 : <INPUT TYPE="text" NAME="text1" MAXLENGTH=5> <P> 입력둘 : <INPUT TYPE="text" NAME="text2" SIZE=10 > <P> 입력셋 : <INPUT TYPE="text" NAME="text3"> <P> 입력셋 : <INPUT TYPE="text" NAME="text4" VALUE=" 초기값 ">

80 암호입력양식 v <INPUT> v 속성 v TYPE= password : 암호입력상자 v NAME = field_name : 입력상자이름 v SIZE = n : 입력상자크기 ( 디폴트 :20) v MAXLENGTH = n : 최대입력가능글자수 v VALUE = value : 입력상자초기값 암호넣기하나 : <INPUT TYPE="password" NAME="pass1" MAXLENGTH=5> <P> 암호넣기둘 : <INPUT TYPE="password" NAME="pass2" SIZE=10 > <P> 암호넣기셋 : <INPUT TYPE="password" NAME="pass3"> <P> 암호넣기넷 : <INPUT TYPE="password" NAME="pass4" VALUE="abc">

81 체크박스양식 v <INPUT> v 속성 v TYPE= checkbox : 체크박스 v NAME = field_name : 체크박스이름 v VALUE = value : 선택시넘겨줄데이터 v CHECKED : 체크된상태로로딩 <H2> 좋아하는프로그래밍언어를선택하시오. </H2> <H3> <INPUT TYPE="checkbox" NAME="check" VALUE="item1" CHECKED> 비주얼베이직 <BR> <INPUT TYPE="checkbox" NAME="check" VALUE="item2"> 델파이 <BR> <INPUT TYPE="checkbox" NAME="check" VALUE="item3" CHECKED> 비주얼 C++ <BR> <INPUT TYPE="checkbox" NAME="check" VALUE="item4"> 자바 <BR> </H3>

82 라디오버튼양식 v <INPUT> v 속성 vtype= radio : 옵션버튼 vname = field_name : 옵션버튼이름 v 같은이름으로그룹화 vvalue = value : 선택시넘겨줄데이터 vchecked : 체크된상태로로딩 <H2> 좋아하는프로그래밍언어를하나만선택하시오. </H2> <H3> <INPUT TYPE="radio" NAME="radio_btn" VALUE="item1" CHECKED> 비주얼베이직 <BR> <INPUT TYPE="radio" NAME="radio_btn" VALUE="item2"> 델파이 <BR> <INPUT TYPE="radio" NAME="radio_btn" VALUE="item3"> 비주얼 C++ <BR> <INPUT TYPE="radio" NAME="radio_btn" VALUE="item4"> 자바 <BR> </H3>

83 확인버튼 v <INPUT> v 속성 v TYPE= submit : 확인버튼 v NAME = button_name : 확인버튼이름 v VALUE = value : 버턴에표시할글자 <FORM ACTION = "MOVE.HTML" METHOD=POST> 이름 : <INPUT TYPE="text" NAME="text1" SIZE=10> <P> 전화 : <INPUT TYPE="text" NAME="text2" SIZE=14> <P> 주소 : <INPUT TYPE="text" NAME="text2" SIZE=60> <P> <INPUT TYPE="submit" VALUE=" 다른곳으로이동 "> </FORM>

84 취소버튼 v <INPUT> v 속성 v TYPE= reset : 취소버튼 v NAME = button_name : 취소버튼이름 v VALUE = value : 버튼에표시할글자 <FORM ACTION = "MOVE.HTML" METHOD=POST> 이름 : <INPUT TYPE="text" NAME="text1" SIZE=10> <P> 전화 : <INPUT TYPE="text" NAME="text2" SIZE=14> <P> 주소 : <INPUT TYPE="text" NAME="text2" SIZE=60> <P> <INPUT TYPE="reset" VALUE=" 리셋버튼 "> </FORM>

85 파일선택버튼 v <INPUT> v 속성 v TYPE= file : 파일선택버튼 v NAME = button_name : 버튼이름 v 파일입력상자와버튼이자동생성 <FORM ACTION = "MOVE.HTML" METHOD=POST> 파일보내기 : <INPUT TYPE="file" VALUE=" 보낼파일선택 "> </FORM>

86 일반버튼 v <INPUT> v 속성 v TYPE= button : 일반버튼 v NAME = button_name : 버튼이름 v VALUE = value : 버튼에표시할글자 <FORM ACTION = "MOVE.HTML" METHOD=POST> ID : <INPUT TYPE="text" NAME="text1" > <INPUT TYPE= button" VALUE="ID 중복확인 "> </FORM>

87 기타 v 그림버튼 v 속성 v TYPE= image : 그림버튼 v NAME = button_name : 버튼이름 v SRC = url : 그림파일위치 <FORM ACTION = "MOVE.HTML" METHOD=POST> <INPUT TYPE= image" SRC= 2.jpg"> 마음에드는곳을누르세요 </FORM> v 숨김양식 v 속성 v TYPE= hidden : 숨김양식 v NAME = name : 양식이름

88 리스트박스 v <SELECT> : 리스트박스의시작과끝 v 속성 v SIZE= n : 리스트박스크기 v NAME = listbox_name : 박스이름 v MULTIPLE : 복수항목선택가능 v <OPTION> : 각항목을설정 v 속성 v SELECTED : 초기선택상태 v VALUE = value : 선택시할당값 <SELECT NAME= list1" SIZE=3> <OPTION> </OPTION> <OPTION> </OPTION> <OPTION> </OPTION> <OPTION> </OPTION> </SELECT>

89 리스트박스예제 <SELECT NAME= list1" SIZE=3> <OPTION selected> 서울특별시 </OPTION> <OPTION> 경기도 </OPTION> <OPTION> 부산광역시 </OPTION> <OPTION> 제주도 </OPTION> </SELECT> <SELECT NAME= list1" SIZE=3 MULTIPLE> <OPTION> 서울특별시 </OPTION> <OPTION> 경기도 </OPTION> <OPTION> 부산광역시 </OPTION> <OPTION> 제주도 </OPTION> <OPTION> 광주광역시 </OPTION> <OPTION> 충청남도 </OPTION> <OPTION> 경상북도 </OPTION> </SELECT>

90 콤보박스 v <SELECT> : 콤보박스의시작과끝 v 속성 v NAME = listbox_name : 박스이름 v <OPTION> : 각항목을설정 v 속성 v SELECTED : 초기선택상태 v VALUE = value : 선택시할당값 <SELECT NAME= list1" > <OPTION> 서울특별시 </OPTION> <OPTION selected > 경기도 </OPTION> <OPTION> 부산광역시 </OPTION> <OPTION> 제주도 </OPTION> </SELECT>

91 메모입력상자 v <TEXTAREA> v 속성 v ROWS, COLS : 행과열의개수 v NAME = name : 상자이름 <FORM > <H2> 낙서를열심히합시다. </H2> <TEXTAREA NAME = "memo" ROWS=12 COLS=70> 내용을여기에적습니다. </TEXTAREA> <P> <INPUT TYPE="reset" VALUE=" 다시입력 "> <INPUT TYPE="submit" VALUE=" 저장하기 "> </FORM>

Javascript

Javascript 1. HTML 이란? HTML 은 Hyper Text Mark Up Language 의약자로예약되어있는각종태그라는명령어를이용하여웹페이지를작성할때사용하는언어입니다. 2. HTML 의기본구조 < 태그 > 내용 < 태그속성 = 변수 > 내용

More information

HTML

HTML Hyper Text Markup Language Bok, Jong Soon jongsoon.bok@gmail.com www.javaexpert.co.kr 1 HTML 문서의특징 HyperText Markup Language WWW 문서제작에쓰임 SpaceBar, Tab, Enter 인식못함 텍스트문서의형태 컴퓨터기종에독립적 확장명 :.html,.htm 태그는대소문자구별안함

More information

SK Telecom Platform NATE

SK Telecom Platform NATE SK Telecom Platform NATE SK TELECOM NATE Browser VER 2.6 This Document is copyrighted by SK Telecom and may not be reproduced without permission SK Building, SeRinDong-99, JoongRoGu, 110-110, Seoul, Korea

More information

PowerPoint Template

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

More information

미쓰리 파워포인트

미쓰리 파워포인트 computer & internet 07. FRAME TAG FRAME? 프레임이란? : 웹페이지를수직이나수평으로여러개영역으로나누어다른웹문서가들어갈수있도록구성할수있음. 이때나누어진각각의창을프레임이라고함. 2 FRAME 문서의구조 HTML 문서에서 태그기능을 프레임문서구조에서는 이대신함 일반웹페이지구조 ..

More information

네트워크 명령 실습

네트워크 명령 실습 HTML 실습 Contents 1. HTML 개요 2. HTML 기본구조 3. HTML 기본태그 1. 글자관련 2. 서식관련 3. 표관련 4. 하이퍼링크관련 5. 프레임관련 6. 멀티미디어관련 7. 배경등꾸미기관련 8. 아이템화관련 3.4 하이퍼링크태그 1. 하이퍼링크란윈도우의도움말같은형태로문서안에특정문자열이나이미지를마우스로클릭했을때관련된다른문서, 그림, 음악,

More information

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 03 장. 테두리여백지정하는속성 이번장에서는테이블, 레이어, 폼양식등의더예쁘게꾸미기위해서 CSS 를이용하여 HTML 요소의테두리속성을바꾸어보자. 이장에서다룰내용 1 2 3 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 01. 테두리를제어하는스타일시트 속성값설명 border-width border-left-width

More information

Javascript

Javascript 1. 폼 (Form) 태그란? 일반적으로폼 (Form) 태그는입력양식을만들때사용됩니다. 입력양식이란어떤데이터를받아전송해주는양식을말합니다. 예를들면, 방명록이나게시판, 회원가입등의양식을말합니다. 이러한입력양식의처음과끝에는반드시폼태그가들어가게됩니다. 폼의입력양식에는 Text Box, Input Box, Check Box, Radio Button 등여러가지입력타입들이포함됩니다.

More information

웹의 뼈대 HTML의 이해 개요 및 텍스트 태그

웹의 뼈대 HTML의 이해 개요 및 텍스트 태그 HTML 의이해 - 개요및텍스트태그 최현종 ( 서원대학교 ) HTML 의개요 웹문서란무엇인가? 인터넷에올려진문서 HTML : 다양한멀티미디어요소까지다룰수있는인터넷표준웹문서 웹브라우저란무엇인가? 웹문서를보기위한프로그램 대표적인웹브라우저 - 인터넷익스플로러 - 넷스케이프내비게이터 - 오페라 그림 1. 인터넷익스플로러 HTML 의정의 - Hyper Text Markup

More information

<3033B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770>

<3033B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770> HTML/XML 인터넷보충학습자료 - 1 - - HTML 표를만들기위해서는 태그를사용한다. - - 테이블에서행과열을나눠주기위한태그는따로지정해야해며나눌개수만큼반복해서작성해야한다.

More information

2009년 상반기 사업계획

2009년 상반기 사업계획 웹 (WWW) 쉽게배우는데이터통신과컴퓨터네트워크 학습목표 웹서비스를위한클라이언트 - 서버구조를살펴본다. 웹서비스를지원하는 APM(Apache, PHP, MySQL) 의연동방식을이해한다. HTML 이지원하는기본태그명령어와프레임구조를이해한다. HTTP 의요청 / 응답메시지의구조와동작원리를이해한다. CGI 의원리를이해하고 FORM 태그로사용자입력을처리하는방식을알아본다.

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 : 학습내용 기본구조와태그다양한태그다루기 태그다루기프레임나누기폼양식및재미있게활용할수있는태그 : 03 장. 기본구조와태그 학습내용 기본구조에디트플러스에서 문서제작해보기 에서태그사용법 기본구조와태그 기본구조 [ 기본구조 ]

More information

PHP & ASP

PHP & ASP PHP 의시작과끝 echo ; Echo 구문 HTML과 PHP의 echo 비교 HTML과 PHP의 echo를비교해볼까요

More information

Microsoft PowerPoint HTML.ppt

Microsoft PowerPoint HTML.ppt 웹프로그래밍 () HTML () 2006 년봄학기 문양세강원대학교컴퓨터과학과 웹페이지제작단계및환경 주제와주제와내용선정 어떤어떤내용을내용을담을담을것인지것인지,, 어떤어떤단계로단계로제작할제작할것인지것인지결정결정 디자인디자인 웹페이지페이지구조구조 저작권저작권확인확인 로고로고, 아이콘, 아이콘또는또는멀티미디어멀티미디어등다양한다양한소재를소재를어떻게어떻게꾸밀꾸밀것인지것인지구성구성

More information

네트워크 명령 실습

네트워크 명령 실습 HTML 실습 Contents 1. WWW, HTTP, HTML 개요 2. HTML 기본구조 3. HTML 기본태그 1. 글자관련 2. 서식관련 3. 표관련 4. 하이퍼링크관련 5. 프레임관련 6. 멀티미디어관련 7. 배경등꾸미기관련 8. 아이템화관련 1. HTML 개요 1. HTML(Hyper Text Markup Language) A. 웹문서를표현하는기술

More information

PowerPoint Presentation

PowerPoint Presentation WordPress 를이용한웹사이트만들기 2015 년 한지웅 WordPress 를이용한웹사이트만들기 Day 1 Day 2 Day 3 Day 4 Day 5 1. 웹사이트제작기초 HTLM 기본 CSS 기본 WordPress 개론 ( 웹사이트구축툴 ) 2. 웹호스팅 / 웹사이트구축 웹호스팅업체선택 cpanel 설정 WordPress 설치 3. WordPress 기초활용

More information

PHP & ASP

PHP & ASP 단어장프로젝트 프로젝트2 단어장 select * from address where address like '% 경기도 %' td,li,input{font-size:9pt}

More information

슬라이드 1

슬라이드 1 웹프로그래밍 HTML, 자바스크립트, ASP 를중심으로 제 2 장 HTML 문법 목차 제 2 장 HTML 문법 2.1 기본태그 2.2 LINK 태그 2.3 Image 2.4 TABLE 2.5 FRAME 2.6 INPUT 양식 2 2.1 기본태크 구조태그 문자서식태그 문단서식태그 3 2.1.1 구조태그 HTML 태그들중가장기본이되는태그 : HTML

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 7. HTML 와 CSS 로웹사이트만들 기 웹사이트작성 웹사이트구축과정 내비게이션구조도 홈페이지레이아웃 헤더 web Shop 내비게이션메뉴

More information

歯

歯 http://phya.yonsei.ac.kr/~gang/ Version. 1.0.0 1995129 http://phya.yonsei.ac.kr/~gang/ Version. 1.0.0 1995129 Netscape (Web Browser), WWW, HTML....,. HWP 2.1 format, http://phya.yonsei.ac.kr/~gang/writings/home100.zip.,

More information

Microsoft PowerPoint HTML기초(2).pptx

Microsoft PowerPoint HTML기초(2).pptx 웹과인터넷활용및실습 () (Part II) 문양세강원대학교 IT 대학컴퓨터과학전공 강의내용 HTML의개요 HTML 문서의기본구조 HTML의구성요소 HTML 편집기기본적인 HTML 태그컬러와그래픽이미지하이퍼텍스트링크테이블프레임사운드 ( 오디오 ) 및동영상 Page 2 1 컬러코드와 RGB (1/4) 컬러 ( 색깔 ) 를지정하는두가지방법 컬러의이름을직접지정 (

More information

Lab1

Lab1 Lab 1: HTML CSS 2015 Fall human-computer interaction + design lab. Joonhwan Lee HTML Web Server (World Wide Web: WWW)? (., FTP ). web 3 웹 구조의 이해 웹페이지 웹페이지는 HTML 이라는 언어로 만들어진 일종의 프로그램 웹페이지는 텍스트, 이미지, 동영상,

More information

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 제이쿼리 () 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 CSS와마찬가지로, 문서에존재하는여러엘리먼트를접근할수있다. 엘리먼트접근방법 $( 엘리먼트 ) : 일반적인접근방법

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 5 장. 고급표현을위한 CSS3 활용 1 목차 5.1 박스모델설정하기 5.2 레이아웃설정하기 5.3 다양한효과설정하기 5.4 움직임설정하기 2 5.1 박스모델설정하기 5.1.1 영역설정을위한박스모델 5.1.2 박스모델유형의지정 3 영역설정을위한박스모델 배경영역 , , : 해당하는줄만큼배경 ,

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 05 장 CSS3 선택자 1. 선택자개요 2. 기본선택자 3. 속성선택자 4. 후손선택자와자손선택자 5. 반응 / 상태 / 구조선택자 CSS 블록을생성할수있다. 선택자를이해하고적절한선택자를활용할수있다. 1 선택자개요 CSS3 선택자 특정한 HTML 태그를선택할때사용하는기능 선택한태그에원하는스타일이나스크립트적용가능 그림 5-1 CSS 블록 CSS 블록 style

More information

Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드]

Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드] Web Technology Stack HTML, CSS, JS Basics HTML Tutorial https://www.w3schools.com/html/default.asp CSS Tutorial https://www.w3schools.com/css/default.asp JS Tutorial 524730-1 2019 년봄학기 3/11/2019 박경신 https://www.w3schools.com/html/default.asp

More information

e-비즈니스 전략 수립

e-비즈니스 전략 수립 CSS3 속성 HTML5 웹프로그래밍입문 ( 개정판 ) Contents 학습목표 CSS3가지원하는스타일속성과스타일값을활용할수있습니다. CSS3를사용해레이아웃을잡을수있습니다. 내용 CSS3 단위 박스속성 display 속성 배경속성 글자속성 위치속성 float 속성 그림자속성 그레이디언트 2/85 1. CSS3 단위 키워드단위 W3C에서미리정의한단어 키워드를입력하면키워드에해당하는스타일이자동으로적용

More information

INDEX 들어가기 고민하기 HTML(TABLE/FORM) CSS JS

INDEX 들어가기 고민하기 HTML(TABLE/FORM) CSS JS 개발자에게넘겨주기편한 TABLE&FORM 마크업 김남용 INDEX 들어가기 고민하기 HTML(TABLE/FORM) CSS JS 들어가기 이제는 ~ 서로간의이슈웹표준 & 웹접근성왜웹표준으로해야할까요? 모든웹페이지는 ~ 퍼블리싱순서 이제는 ~ 디자이너 디자이너 퍼블리셔 Front-end (UI 개발자 ) 퍼블리셔 Front-end (UI 개발자 ) 서버개발자 서버개발자

More information

Javascript

Javascript 1. 이벤트와이벤트핸들러의이해 이벤트 (Event) 는웹브라우저에서발생하는다양한사건을말합니다. 예를들면, 버튼을마우스로을했다거나브라우저를닫았다거나 Enter 키를눌렀다거나등등아주다양한사건들이있습니다. 그렇다면이벤트핸들러 (Event Handler) 는무엇일까요? 이다양한이벤트들을핸들링 ( 처리 ) 해주는것입니다. 예를들면, 어떤버튼을했을때메시지창이뜨게하는등을말합니다.

More information

예스폼 프리미엄 템플릿

예스폼 프리미엄 템플릿 HTML 과 CSS 를활용한개별디자인 D4 강사김준일 01. HTML, CSS 그리고메이크샵 1 2 쇼핑몰의구조와기능 이미지, 문구등내용을 담당하는언어 쇼핑몰 쇼핑몰이어떻게보여질지 표현 ( 디자인 ) 을담당하는언어 3 4 쇼핑몰의 UI 및배너등을 표현하며유효성검사등을 담당하는개발언어 쇼핑몰의핵심기능을담당하는 쇼핑몰프로그램으로 HTML,CSS,Javascript

More information

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher( 실행할페이지.jsp); 다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp"); dispatcher.forward(request, response); - 위의예에서와같이 RequestDispatcher

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 3. HTML 멀티미디어와입력요소 웹브라우저와멀티미디어 예전방법 : HTML 안에서는 나 태그를사용하여야했고웹브라우저에는플래시나 ActiveX 를설치 HTML5: 와 태그가추가 오디오 요소의속성 오디오파일형식 MP3 'MPEG-1 Audio Layer-3' 의약자로 MPEG

More information

02 장. 글꼴문단지정하기 이번장에서는스타일시트속성중에서글꼴과관련한속성과문단에관련된속성을살펴보도록하자.

02 장. 글꼴문단지정하기 이번장에서는스타일시트속성중에서글꼴과관련한속성과문단에관련된속성을살펴보도록하자. 02 장. 글꼴문단지정하기 이번장에서는스타일시트속성중에서글꼴과관련한속성과문단에관련된속성을살펴보도록하자. 이장에서다룰내용 1 2 3 4 5 글꼴꾸밈관련스타일시트텍스트관련스타일시트배경관련스타일시트목록관련스타일시트하이퍼링크관련스타일시트 2 01. 글꼴꾸밈관련스타일시트 v 글자에관련된스타일시트는크기, 스타일, 모양등에관련된 font 속성이가장많이사용 속성값설명 color

More information

슬라이드 1

슬라이드 1 웹프로그래밍 HTML, 자바스크립트, ASP 를중심으로 제 3 장고급 HTML 작성 목차 제 3 장고급 HTML 작성 2.1 기본태그 2.2 LINK 태그 2.3 Image 2.4 TABLE 2.5 FRAME 2.6 INPUT 양식 2 3 장고급 HTML 작성 멀티미디어파일다루기 스타일시트 레이어 3 3.1 멀티미디어 최근인터넷사용자가급증하면서기업 / 개인용홈페이지가급증하였고다양한홈페이지를만들기위해많은기술들이생겨나고있음

More information

Week8-Extra

Week8-Extra Week 08 Extra HTML & CSS Joonhwan Lee human-computer interaction + design lab. HTML CSS HTML, HTML 5 1. HTML HTML HTML HTML (elements) (attributes), (arguments). HTML (tag), DTD (Document Type Definition).!4

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 PHP 와 MySQL 의연동 Jo, Heeseung Content MySQL을지원하는 PHP API 함수 과변수값전달 DB 테이블생성과데이터읽기성적관리프로그램제작 2 1.2 DB 테이블생성과레코드삽입 데이터베이스테이블구조설계 [ 표 7-1] 명함관리데이터베이스테이블 ( 테이블명 : biz_card) 필드명 타입 추가사항 설명 num int primary

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 03 장 HTML5 기본태그 1. 글자태그 2. 목록태그 3. 테이블태그 4. 이미지태그 5. 공간분할태그 HTML5 에서지원하는기본태그를사용할수있다. 공간분할태그와시맨틱태그의용도를이해하고사용할수있다. 1. 글자태그 가장많은비중을차지하는태그 그림 3-1 글자태그중심의웹페이지 1.1 제목글자태그 제목글자태그 문서의제목을표현할때사용 h : Heading을의미 표

More information

하둡을이용한파일분산시스템 보안관리체제구현

하둡을이용한파일분산시스템 보안관리체제구현 하둡을이용한파일분산시스템 보안관리체제구현 목 차 - 1 - - 2 - - 3 - - 4 - - 5 - - 6 - - 7 - - 8 - 1. 사용자가웹서버에로그인하여다양한서비스 ( 파일업 / 다운로드, 폴더생성 / 삭제 ) 를활용 2. 웹서버와연동된하둡서버에서업 / 다운로드된파일을분산저장. ( 자료송수신은 SSH 활용 ) - 9 - - 10 - - 11 -

More information

Overall Process

Overall Process CSS ( ) Overall Process Overall Process (Contents : Story Board or Design Source) (Structure : extensible HyperText Markup Language) (Style : Cascade Style Sheet) (Script : Document Object Model) (Contents

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 6 장. 다양한입력폼 1 목차 6.1 폼이해하기 6.2 기본형식으로입력하기 6.3 고급형식으로입력하기 2 6.1 폼이해하기 3 요소의사용 폼요소의사용 회원가입, 상품구매, 키워드검색등사용자로부터정보를받을때 사용자와애플리케이션이상호작용 사용자입력 전송버튼 애플리케이션에전달 실행결과반환 요소의역할 사용자가입력하는정보를하나로묶어서애플리케이션에전달

More information

PowerPoint Presentation

PowerPoint Presentation 웹과인터넷활용및실습 (Web & Internet) Suan Lee - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 1 04. CSS3 스타일속성 04. CSS3 Style Properties - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 2 CSS3 단위 1 CSS 는각각의스타일속성에다양한값을입력

More information

C스토어 사용자 매뉴얼

C스토어 사용자 매뉴얼 쪽지 APP 디자인적용가이드 I. 쪽지 APP 소개 2 I. 쪽지 APP 소개 쪽지 APP 을통해쇼핑몰의특정회원또는특정등급의회원그룹에게 알림메시지나마케팅을위한쪽지를발송하실수있습니다. 쪽지 APP의주요기능 1. 전체회원, 특정ID, 특정회원그룹별로쪽지발송가능 2. 발송예약기능 3. 발송한쪽지에대해수신및열람내역조회가능 4. 쇼핑몰페이지에서쪽지함과쪽지알림창제공 3

More information

(Microsoft PowerPoint - 9\300\345.ppt [\310\243\310\257 \270\360\265\345])

(Microsoft PowerPoint - 9\300\345.ppt [\310\243\310\257 \270\360\265\345]) 제9장폼객체 객체다루기 학습목표 폼객체에서사용하는속성, 메소드, 이벤트핸들러를이해한다. 목록상자에서사용하는속성, 메소드, 이벤트핸들러를이해한다. 목차 9.1 form 객체 9.2 입력상자, 체크상자, 라디오버튼 9.3 목록상자 2 9.1 form 객체 폼은주로서버에어떤데이터를보내고자하는경우에많이사용한다. 태그를제어하는 form 객체의기본용법은다음과같다

More information

var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");

var answer = confirm( 확인이나취소를누르세요.); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write( 확인을눌렀습니다.); else { document.write( 취소를눌렀습니다.); 자바스크립트 (JavaScript) - HTML 은사용자에게인터페이스 (interface) 를제공하는언어 - 자바스크립트는서버로데이터를전송하지않고서할수있는데이터처리를수행한다. - 자바스크립트는 HTML 나 JSP 에서작성할수있고 ( 내부스크립트 ), 별도의파일로도작성이가능하다 ( 외 부스크립트 ). - 내부스크립트 - 외부스크립트

More information

<3036B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770>

<3036B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770> HTML/XML 인터넷보충학습자료 - 1 - (1) 글자색상 : color 속성사용 - 태그의 color 속성과같은역할을한다. (2) 배경지정 : background-color 속성사용. - HTML의 bgcolor 속성과같은역할. bgcolor 속성은일정한태그에만한정되어있지만 background-color 속성은어떤태그에서도모두적용된다.

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 10. DOM 과이벤트처리, 입력검 증 문서객체모델 (DOM) DOM 은 HTML 문서의계층적인구조를트리 (tree) 로표현 DOM 과 BOM HTML 문서를객체로표현한것을 DOM 웹브라우저를객체로표현한것을 BOM(Browser Object Model) HTML 요소찾기 동적인웹페이지를작성하려면원하는요소를찾아야한다. id 로찾기 태그이름으로찾기

More information

Cookie Spoofing.hwp

Cookie Spoofing.hwp Cookie Spoofing&Sniffing By Maxoverpro[max]( 장상근) maxoverpro@empal.com http://www.maxoverpro.org 1. 서론 이문서는 Cookie Spoofing 과 Sniffing 에대해정석적인방법을이야기하도록하며또 한어느특정곳의취약점을설명하지않고직접제작한예제를가지고 Cookie Spoofing 과

More information

HTML Basic & Advanced

HTML Basic & Advanced HTML Basic & Advanced Agenda - Markup에대한기본개념이해 - (X)HTML의구조및문법습득 - 실습예제및과제수행을통해실무에필요한스킬향상 Contents I. Markup의기본개념 II. HTML 구조및문법 III. 시멘틱마크업 IV. Tool 소개 V. 실습과제 2 Markup 의기본개념 HTML BASIC 3 Markup 이란? 문서의일부를

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 휴대폰인증서비스 사용자매뉴얼 목차 1. 서비스소개및신청 1) 휴대폰인증서비스란? 2) 휴대폰인증서비스장점 3) 서비스신청하기 1) 회원가입페이지에적용 2) 아이디, 비밀번호찾기페이지에적용 3) 14세미만비회원구매제한팝업에적용 4) 성인인증페이지에적용 2 1. 서비스소개및신청 1) 휴대폰인증서비스란? 휴대폰인증서비스는본인명의의휴대폰을사용하여본인확인을가능하게해주는서비스로써,

More information

5장. JSP와 Servlet 프로그래밍을 위한 기본 문법(완성-0421).hwp

5장. JSP와 Servlet 프로그래밍을 위한 기본 문법(완성-0421).hwp 1 0 1.7 6 5 'A ' '/ u 4 4 2 2 ' " JS P 프로그래밍 " A ', 'b ', ' 한 ', 9, \ u d 6 5 4 ' c h a r a = 'A '; 0 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 < % @ p a g e c o n te n

More information

0. 들어가기 전

0. 들어가기 전 컴퓨터네트워크 14 장. 웹 (WWW) (3) - HTTP 1 이번시간의학습목표 HTTP 의요청 / 응답메시지의구조와동작원리이해 2 요청과응답 (1) HTTP (HyperText Transfer Protocol) 웹브라우저는 URL 을이용원하는자원표현 HTTP 메소드 (method) 를이용하여데이터를요청 (GET) 하거나, 회신 (POST) 요청과응답 요청

More information

PART 1 CHAPTER 1 Chapter 1 Note 4 Part 1 5 Chapter 1 AcctNum = Table ("Customer").Cells("AccountNumber") AcctNum = Customer.AccountNumber Note 6 RecordSet RecordSet Part 1 Note 7 Chapter 1 01:

More information

HTML5

HTML5 주사위게임 류관희 충북대학교 주사위게임규칙 플레이어 두개의주사위를던졌을때두주사위윗면숫자의합 The First Throw( 두주사위의합 ) 합 : 7 혹은 11 => Win 합 : 2, 3, 혹은 12 => Lost 합 : 4, 5, 6, 8, 9, 10 => rethrow The Second Throw 합 : 첫번째던진주사위합과같은면 => Win 합 : 그렇지않으면

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Html 은웹에서 text, images, movie 등다양한정보의요소를 담을수있는문서형식이다. 정보 (txt, imges) 전송 = 동일한어플리케이션 = 정보 (txt, imges) 정보 (txt, imges Movie, 동작 ) 정보 (txt, imges movie) 어플리케이션 웹브라우저 HTML5 는기존 HTML 에차별화된특징을가진 최신버전의웹표준언어.

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 11. 자바스크립트와캔버스로게임 만들기 캔버스 캔버스는 요소로생성 캔버스는 HTML 페이지상에서사각형태의영역 실제그림은자바스크립트를통하여코드로그려야한다. 컨텍스트객체 컨텍스트 (context) 객체 : 자바스크립트에서물감과붓의역할을한다. var canvas = document.getelementbyid("mycanvas"); var

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 실습 1 배효철 th1g@nate.com 1 목차 조건문 반복문 System.out 구구단 모양만들기 Up & Down 2 조건문 조건문의종류 If, switch If 문 조건식결과따라중괄호 { 블록을실행할지여부결정할때사용 조건식 true 또는 false값을산출할수있는연산식 boolean 변수 조건식이 true이면블록실행하고 false 이면블록실행하지않음 3

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 기본과활용 목차 1. HTML와 CSS 시작 2. HTML 기본문서작성 3. 텍스트, 목록, 하이퍼링크 4. 박스, 표 5. 이미지와멀티미디어 6. 입력폼양식 웹개발환경 웹브라우저종류 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 웹개발편집기 메모장 (Notepad) 노트패드 ++(Notepad++) 아크로에디트 (AcroEdit) 드림위버 (Dreamweaver)

More information

Microsoft PowerPoint - 3ÀÏ°_º¯¼ö¿Í »ó¼ö.ppt

Microsoft PowerPoint - 3ÀÏ°_º¯¼ö¿Í »ó¼ö.ppt 변수와상수 1 변수란무엇인가? 변수 : 정보 (data) 를저장하는컴퓨터내의특정위치 ( 임시저장공간 ) 메모리, register 메모리주소 101 번지 102 번지 변수의크기에따라 주로 byte 단위 메모리 2 기본적인변수형및변수의크기 변수의크기 해당컴퓨터에서는항상일정 컴퓨터마다다를수있음 short

More information

[ 네이버마일리지 ] 디자인셋팅매뉴얼 1. 장바구니페이지에네이버마일리지안내추가 - 위치 : HTML 디자인설정 > 장바구니 > 장바구니주문목록 {{$c_3}} [ 편집 ] 버튼클릭 > HTML 편집탭으로이동 > 여러개의장바구니모두결제버튼 {u9} [ 편집 ] 버튼클릭하

[ 네이버마일리지 ] 디자인셋팅매뉴얼 1. 장바구니페이지에네이버마일리지안내추가 - 위치 : HTML 디자인설정 > 장바구니 > 장바구니주문목록 {{$c_3}} [ 편집 ] 버튼클릭 > HTML 편집탭으로이동 > 여러개의장바구니모두결제버튼 {u9} [ 편집 ] 버튼클릭하 [ 네이버마일리지 ] 디자인셋팅매뉴얼 1. 장바구니페이지에네이버마일리지안내추가 - 위치 : HTML 디자인설정 > 장바구니 > 장바구니주문목록 {{$c_3}} [ 편집 ] 버튼클릭 > HTML 편집탭으로이동 > 여러개의장바구니모두결제버튼 {u9} [ 편집 ] 버튼클릭하여팝업에서코드수정 1) 장바구니페이지디자인수정위치 디자인관리 > HTML 디자인설정 > 장바구니이동

More information

EBS직탐컴퓨터일반-06-OK

EBS직탐컴퓨터일반-06-OK ES 컴퓨터 일반 6회 시간 분 배점 점 문항에 따라 배점이 다르니, 각 물음의 끝에 표시된 배점을 참고하시오. 점 문항에만 점수가 표시되어 있습니다. 점수 표시가 없는 문항은 모두 점씩입니다. 은,, 에서 입력받아 를 출력하는 스위치 회로이다. 스위치 회로를 논리 기호로 표시한 것으로 옳은 것은? 다음은 정보 통신망을 사용한 사례이다. 법적으로 처벌받을

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 ONE page html 이란? 원페이지는최근의홈페이지제작트렌드로한페이지에상단에서하단으로의마우스스크롤링을통해서컨텐츠를보여주는스타일의홈페이지입니다. USER 의시선을분산시키지않고위쪽에서아래쪽으로마우스스크롤링을통해서홈페이지의컨텐츠를보여주게됩니다. 반응형으로제작되어스마트폰, 아이패드, 태블릿,PC, 노트북등다양한디바이스에서자동으로최적화됩니다. ONE page 웹사이트사례

More information

Ext JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF

Ext JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF CHAPTER 2 (interaction) Ext JS., HTML, onready, MessageBox get.. Ext JS HTML CSS Ext JS.1. Ext JS. Ext.Msg: : Ext Ext.get: DOM 22 CHAPTER 2 (config). Ext JS.... var test = new TestFunction( 'three', 'fixed',

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 실습문제 Chapter 05 데이터베이스시스템... 오라클로배우는데이터베이스개론과실습 1. 실습문제 1 (5 장심화문제 : 각 3 점 ) 6. [ 마당서점데이터베이스 ] 다음프로그램을 PL/SQL 저장프로시져로작성하고실행해 보시오. (1) ~ (2) 7. [ 마당서점데이터베이스 ] 다음프로그램을 PL/SQL 저장프로시져로작성하고실행해 보시오. (1) ~ (5)

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 13. HTML5 위치정보와드래그앤드롭 SVG SVG(Scalable Vector Graphics) 는 XML- 기반의벡터이미지포맷 웹에서벡터 - 기반의그래픽을정의하는데사용 1999 년부터 W3C 에의하여표준 SVG 의장점 SVG 그래픽은확대되거나크기가변경되어도품질이손상되지않는다. SVG 파일에서모든요소와속성은애니메이션이가능하다. SVG 이미지는어떤텍스트에디터로도생성하고편집할수있다.

More information

LCD Display

LCD Display LCD Display SyncMaster 460DRn, 460DR VCR DVD DTV HDMI DVI to HDMI LAN USB (MDC: Multiple Display Control) PC. PC RS-232C. PC (Serial port) (Serial port) RS-232C.. > > Multiple Display

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 2 장.HTML5 문서의기본 목차 2.1 기본문서만들기 2.2 단락과텍스트꾸미기 2.3 목록및표작성하기 2.4 문서구조화하기 소스코드실행사이트 주소 : http://webclass.me/html5_2e 폴더 ch02/ ~ ch13/ 에각장의예제가있어서실행결과확인및소스보기가가능합니다. 2 HTML5 문서의기본 2.1 기본문서만들기 2.1.1

More information

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part1. JavaScript / Ch10. 문서객체모델 2014년 1학기 Professor Seung-Hoon Choi 10 문서객체모델 문서객체모델 (Document Object Model, DOM) 웹브라우저가 HTML 페이지를인식하는방식 document

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 How to produce table XHTML 임정희 M2community 1 Table of Contents 1. XHTML - XHTML 과 HTML 2. Table XHTML - Table의이해 - Table 링크연결 - Table 작성 2 15 th KCSE Editor s Workshop, Seoul 2015 XHTML XHTML 기존에사용되던 HTML

More information

C H A P T E R 2

C H A P T E R 2 C H A P T E R 2 Foundations of Ajax Chapter 2 1 32 var xmlhttp; function createxmlhttprequest() { if(window.activexobject) { xmlhttp = new ActiveXObject( Micr else if(window.xmlhttprequest) { xmlhttp =

More information

SNS HTML HTML HTML 4 01 HTML HTML5 HTML5 X(Active-X) (Flash)(Silverlight) FX(JAVA FX) P R E F A C E HTML5 2017 HTML53 HTML5 HTML5 HTML5 HTML5 HTML5? 3 P R E F A C E HTML5 HTML5 (User Agent) UA HTML5 (

More information

Microsoft PowerPoint 웹 연동 기술.pptx

Microsoft PowerPoint 웹 연동 기술.pptx 웹프로그래밍및실습 ( g & Practice) 문양세강원대학교 IT 대학컴퓨터과학전공 URL 분석 (1/2) URL (Uniform Resource Locator) 프로토콜, 호스트, 포트, 경로, 비밀번호, User 등의정보를포함 예. http://kim:3759@www.hostname.com:80/doc/index.html URL 을속성별로분리하고자할경우

More information

NATE CP 가이드 1. WML 페이지에서줄바꿈문제 개요 WML 페이지에서줄바꿈은명시적으로 <br/> 태그를사용하여야한다. 설명그림 2 의의도로제작된페이지에서 Card Styles 텍스트와 Select 박스사이에명시적인 <br/> 태그가없어, 그림 1 과같이줄바꿈이되

NATE CP 가이드 1. WML 페이지에서줄바꿈문제 개요 WML 페이지에서줄바꿈은명시적으로 <br/> 태그를사용하여야한다. 설명그림 2 의의도로제작된페이지에서 Card Styles 텍스트와 Select 박스사이에명시적인 <br/> 태그가없어, 그림 1 과같이줄바꿈이되 NATE CP 가이드 1. WML 페이지에서줄바꿈문제 WML 페이지에서줄바꿈은명시적으로 태그를사용하여야한다. 그림 2 의의도로제작된페이지에서 Card Styles 텍스트와 Select 박스사이에명시적인 태그가없어, 그림 1 과같이줄바꿈이되지않고한줄로보여짐. [ 그림 1] 비정상 [ 그림 2] 정상

More information

Microsoft PowerPoint - aj-lecture4.ppt [호환 모드]

Microsoft PowerPoint - aj-lecture4.ppt [호환 모드] JSP 와자바빈즈 524730-1 2019 년봄학기 4/1/2019 박경신 자바빈즈 자바로작성된소프트웨어컴포넌트 Sun Microsystems 에서 " 자바빈즈는빌더형식의개발도구에서가시적으로조작이가능하고또한재사용이가능한소프트웨어컴포넌트이다. 로정의 대부분자바통합개발환경 (IDE) 에서사용 자바빈즈는많은유사성이있으나엔터프라이즈자바빈즈 (EJB) 와혼동하지말아야함

More information

Front-Side 웹개발의이해 (CSS Basic) 1. CSS 란?

Front-Side 웹개발의이해 (CSS Basic) 1. CSS 란? CSS Basic 과정소개 과정목표 : CSS 의기본개념이해 1. CSS 란? 2. CSS 선택자 3. CSS 속성 1 Front-Side 웹개발의이해 (CSS Basic) 1. CSS 란? 1. CSS 란? - 스타일선언이위에서아래로순차적으로적용이되고, 마지막에선언된스타일이우선순위갖음 - 마크업언어 (HTML/XHTML) 가실제화면에표시되는방법을기술하는언어

More information

xlogo 1.0 beta version < 기본중의기본 > 1. 키워드 ( 명령어 ) 는변수명으로사용될수없다. 2. 키워드는대소문자를구분하지않고사용할수있다. 3. 변수명은대소문자를구분한다. 4. 변수를명시적으로정의하는과정필요없이값을대입하는순간변수정의되고, 대입한값의성

xlogo 1.0 beta version < 기본중의기본 > 1. 키워드 ( 명령어 ) 는변수명으로사용될수없다. 2. 키워드는대소문자를구분하지않고사용할수있다. 3. 변수명은대소문자를구분한다. 4. 변수를명시적으로정의하는과정필요없이값을대입하는순간변수정의되고, 대입한값의성 xlogo 1.0 beta version < 기본중의기본 > 1. 키워드 ( 명령어 ) 는변수명으로사용될수없다. 2. 키워드는대소문자를구분하지않고사용할수있다. 3. 변수명은대소문자를구분한다. 4. 변수를명시적으로정의하는과정필요없이값을대입하는순간변수정의되고, 대입한값의성질에따라변수타입이결정된다. 5. 명령어구분이명확한경우에는 ; 를사용하지않아도된다. 6. 키워드는여러별칭이있을수있으며별칭을사용하여도된다.

More information

리포트_23.PDF

리포트_23.PDF Working Paper No 23 e-business Integrator From Strategy to Technology To remove the gap between e-biz strategy and implementation (eeyus@e-bizgroupcom) Creative Design 2001 04 24 e-business Integrator

More information

Microsoft PowerPoint 세션.ppt

Microsoft PowerPoint 세션.ppt 웹프로그래밍 () 2006 년봄학기 문양세강원대학교컴퓨터과학과 세션변수 (Session Variable) (1/2) 쇼핑몰장바구니 장바구니에서는사용자가페이지를이동하더라도장바구니의구매물품리스트의내용을유지하고있어야함 PHP 에서사용하는일반적인변수는스크립트의수행이끝나면모두없어지기때문에페이지이동시변수의값을유지할수없음 이러한문제점을해결하기위해서 PHP 에서는세션 (session)

More information

Data Provisioning Services for mobile clients

Data Provisioning Services for mobile clients 9 장. 요청흐름제어와모듈화 1. 액션태그를이용한흐름제어 액션태그 하나의 JSP 페이지에서다른 JSP 페이지로요청처리를전달할때사용 중요사항 from.jsp 가아닌 to.jsp 가생성한응답결과가웹브라우저에전달된다. from.jsp 에서사용한 request, response 기본객체가 to.jsp 에그대로전달된다.

More information

Windows 8에서 BioStar 1 설치하기

Windows 8에서 BioStar 1 설치하기 / 콘텐츠 테이블... PC에 BioStar 1 설치 방법... Microsoft SQL Server 2012 Express 설치하기... Running SQL 2012 Express Studio... DBSetup.exe 설정하기... BioStar 서버와 클라이언트 시작하기... 1 1 2 2 6 7 1/11 BioStar 1, Windows 8 BioStar

More information

Microsoft PowerPoint Python-WebDB

Microsoft PowerPoint Python-WebDB 8. 웹과데이터베이스연결응용 순천향대학교컴퓨터공학과이상정 순천향대학교컴퓨터공학과 1 학습내용 파이썬과데이터베이스연결 웹과데이터베이스연결 로그인페이지예 순천향서핑대회예 순천향대학교컴퓨터공학과 2 파이썬과 SQLite3 연결 sqlite3 모듈을사용하여파이썬과 SQLite3 데이테베이스연동프로그램작성 데이터베이스연결을오픈, 종료및내보내기 sqlite3.connect(filename)

More information

Microsoft PowerPoint - logo_2-미해답.ppt [호환 모드]

Microsoft PowerPoint - logo_2-미해답.ppt [호환 모드] Chap.2 Logo 프로그래밍기초 - 터틀그래픽명령어 ( 기본, 고급 ) 학습목표 터틀의이동과선그리기에대해살펴본다. 터틀의회전에대해살펴본다. 터틀펜과화면제어에대해살펴본다. 2012. 5. 박남제 namjepark@jejunu.ac.kr < 이동하기 > - 앞으로이동하기 forward 100 터틀이 100 픽셀만큼앞으로이동 2 < 이동하기 > forward(fd)

More information

WEB HTML CSS Overview

WEB HTML CSS Overview WEB HTML CSS Overview 2017 spring seminar bloo 오늘의수업은 실습 오늘의수업은 이상 : 12:40 목표 : 1:00 밤샘 SPARCS 실습 오늘의수업은 근데숙제는많음 화이팅 WEB 2017 spring seminar bloo WEB WEB 의원시적형태 WEB 의원시적형태 질문 못받음 ㅈㅅ HTML 2017 spring seminar

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 부록. 웹서버구축하기 1 목차 A.1 웹서버시스템 A.2 PHP 사용하기 A.3 데이터베이스연결하기 2 A.1 웹서버시스템 3 웹서버의구축 웹서버컴퓨터구축 웹서버소프트웨어설치및실행 아파치 (Apache) 웹서버가대표적 서버실행프로그램 HTML5 폼을전달받아처리 PHP, JSP, Python 등 데이터베이스시스템 서버측에데이터를저장및효율적관리

More information

EDB 분석보고서 (04.06) ~ Exploit-DB(http://exploit-db.com) 에공개된별로분류한정보입니다. Directory Traversal users-x.php 4.0 -support-x.php 4.0 time-

EDB 분석보고서 (04.06) ~ Exploit-DB(http://exploit-db.com) 에공개된별로분류한정보입니다. Directory Traversal users-x.php 4.0 -support-x.php 4.0 time- EDB 분석보고서 (04.06) 04.06.0~04.06.0 Exploit-DB(http://exploit-db.com) 에공개된별로분류한정보입니다. 분석내용정리 ( 작성 : 펜타시큐리티시스템보안성평가팀 ) 04년 06월에공개된 Exploit-DB의분석결과, SQL 공격에대한보고개수가가장많았습니다. 이와같은결과로부터여전히 SQL 이웹에서가장많이사용되는임을확인할수있습니다.

More information

<4D6963726F736F667420506F776572506F696E74202D2030342E20C0CEC5CDB3DD20C0C0BFEB20B9D720BCADBAF1BDBA20B1E2BCFA2831292E70707478>

<4D6963726F736F667420506F776572506F696E74202D2030342E20C0CEC5CDB3DD20C0C0BFEB20B9D720BCADBAF1BDBA20B1E2BCFA2831292E70707478> 웹과 인터넷 활용 및실습 () (Part I) 문양세 강원대학교 IT대학 컴퓨터과학전공 강의 내용 전자우편(e-mail) 인스턴트 메신저(instant messenger) FTP (file transfer protocol) WWW (world wide web) 인터넷 검색 홈네트워크 (home network) Web 2.0 개인 미니홈페이지 블로그 (blog)

More information

HLS(HTTP Live Streaming) 이용가이드 1. HLS 소개 Apple iphone, ipad, ipod의운영체제인 ios에서사용하는표준 HTTP 기반스트리밍프로토콜입니다. 2. HLS 지원대상 - 디바이스 : iphone/ipad/ipod - 운영체제 :

HLS(HTTP Live Streaming) 이용가이드 1. HLS 소개 Apple iphone, ipad, ipod의운영체제인 ios에서사용하는표준 HTTP 기반스트리밍프로토콜입니다. 2. HLS 지원대상 - 디바이스 : iphone/ipad/ipod - 운영체제 : HLS(HTTP Live Streaming) 이용가이드 1. HLS 소개 Apple iphone, ipad, ipod의운영체제인 ios에서사용하는표준 HTTP 기반스트리밍프로토콜입니다. 2. HLS 지원대상 - 디바이스 : iphone/ipad/ipod - 운영체제 : ios 3.0 이상 - 콘텐츠형식 : MP4 (H264,AAC ), MP3 * 디바이스별해상도,

More information

Microsoft PowerPoint - HTML-CSS3.pptx

Microsoft PowerPoint - HTML-CSS3.pptx HTML & CSS3 고덕한 1 과정개요 HTML 에대한기초지식습득 HTML 구성요소파악 CSS 이해및활용 JavaScript 개요및사용법파악 DHTML을적용한페이지구성 2 HTML Structure 1. HTML 이해 2. CSS (Cascading Style Sheet) 3. JavaScript 4. 브라우저내장객체 5. 폼 (FORM) 관련객체 6. 레이어

More information

untitled

untitled 2009년 문화예술 기획경영 아카데미 인터넷마케팅과 온라인홍보 핵심과정 이 자료집은 2009년 5월 27일(수)과 29일(금) 이틀에 걸쳐서 진행된 2009 문화예술 기획 경영 아카데미-인터넷마케팅과 온라인홍보 : 핵심과정 강의자료 입니다. 목 차 제1강 전략 없는 인터넷 마케팅은 밑 빠진 독에 물 붙기 1. 다시 생각하는 마케팅, 인터넷 마케팅 6 2. 인터넷

More information

슬라이드 1

슬라이드 1 웹접근성향상을위한 UI 개발표준화가이드 UI 개발팀최재성, 유순 웹접근성향상을위한 UI 개발표준화가이드 intro 웹접근성? IWA TFT 웹접근성준수실태 웹접근성? 웹표준? 웹사용성? 기대효과 웹접근성향상을위한가이드라인 웹표준화실무적용방법 웹접근성실무적용방법 웹사용성실무적용방법 앞으로 준수의당위성 IWA TFT (Improve Web Accessibility

More information

Data Provisioning Services for mobile clients

Data Provisioning Services for mobile clients 7 장. Form 처리와파일업로드 제 7 장 HTML 태그 1. 폼 (Form) 태그소개 사용자에게정보를요청하고적당한대답을얻어낼수있는텍스트박스나체크박스등을제공한다. 사용자로부터의정보를서버에게전달할수있는 submit( 전달 ) 버튼을제공한다. submit 버튼은새페이지 (JSP 에의해생성되는동적페이지 ) 를열기위해사용된다. 2/33 제 1 장

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 휴대폰인증서비스 사용자매뉴얼 목차 1. 서비스소개및신청 1) 휴대폰인증서비스란? 2) 휴대폰인증서비스장점 3) 서비스신청하기 1) 회원가입페이지에적용 2) 아이디, 비밀번호찾기페이지에적용 3) 14세미만비회원구매제한팝업에적용 4) 성인인증페이지에적용 2 1. 서비스소개및신청 1) 휴대폰인증서비스란? 휴대폰인증서비스는본인명의의휴대폰을사용하여본인확인을가능하게해주는서비스로써,

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 6. CSS 레이아웃과애니메이션 레이아웃이란? 웹페이지에서 HTML 요소의위치, 크기등을결정하는것 집안에서의가구배치와비슷하다. 블록요소와인라인요소 블록 (block) 요소 - 화면의한줄을전부차지한다. 인라인 (inline) 요소 - 한줄에차례대로배치된다. 현재줄에서필요한만큼의너비만을차지한다. 블록요소 한줄을전부차지 , , ,

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 14. HTML5 웹스토리지, 파일 API, 웹소켓 웹스토리지 웹스토리지 (web storage) 는클라이언트컴퓨터에데이터를저장하는메카니즘 웹스토리지는쿠키보다안전하고속도도빠르다. 약 5MB 정도까지저장이가능하다. 데이터는키 / 값 (key/value) 의쌍으로저장 localstorage 와 sessionstorage localstorage 객체

More information

XSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks

XSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks XSS s XSS, s, May 25, 2010 XSS s 1 2 s 3 XSS s MySpace 사건. Samy (JS.Spacehero) 프로필 페이지에 자바스크립트 삽입. 스크립트 동작방식 방문자를 친구로 추가. 방문자의 프로필에 자바스크립트를 복사. 1시간 만에 백만 명이 친구등록. s XSS s 위험도가 낮은 xss 취약점을 다른 취약점과 연계하여

More information

Microsoft PowerPoint - chap02-C프로그램시작하기.pptx

Microsoft PowerPoint - chap02-C프로그램시작하기.pptx #include int main(void) { int num; printf( Please enter an integer "); scanf("%d", &num); if ( num < 0 ) printf("is negative.\n"); printf("num = %d\n", num); return 0; } 1 학습목표 을 작성하면서 C 프로그램의

More information

Visual Basic 기본컨트롤

Visual Basic 기본컨트롤 학습목표 폼 ( Form) 폼의속성, 컨트롤이름, 컨트롤메서드 기본컨트롤 레이블, 텍스트박스, 버튼, 리스트박스 이벤트 버튼 기본컨트롤실습 2 2.1 폼 (Form) 2.2 기본컨트롤 2.3 기본컨트롤실습 3 폼 - 속성 속성 (Name) AutoSize BackColor Font ForeColor Icon StartPosition Transparency WindowState

More information

<4D F736F F F696E74202D203130C0E52EBFA1B7AF20C3B3B8AE205BC8A3C8AF20B8F0B5E55D>

<4D F736F F F696E74202D203130C0E52EBFA1B7AF20C3B3B8AE205BC8A3C8AF20B8F0B5E55D> 10 장. 에러처리 1. page 지시문을활용한에러처리 page 지시문의 errorpage 와 iserrorpage 속성 errorpage 속성 이속성이지정된 JSP 페이지내에서 Exception이발생하는경우새롭게실행할페이지를지정하기위하여사용 iserrorpage 속성 iserrorpage 는위와같은방법으로새롭게실행되는페이지에지정할속성으로현재페이지가 Exception

More information

제 1 절 복습 \usepackage{ g r a p h i c x }... \ i n c l u d e g r a p h i c s [ width =0.9\ textwidth ] { b e a r. j p g } (a) includegraphics 사용의일반적인유형

제 1 절 복습 \usepackage{ g r a p h i c x }... \ i n c l u d e g r a p h i c s [ width =0.9\ textwidth ] { b e a r. j p g } (a) includegraphics 사용의일반적인유형 그림배치 이주용 jlee@formal.korea.ac.kr 2011 년 9 월 28 일 제 1 절 복습 \usepackage{ g r a p h i c x }... \ i n c l u d e g r a p h i c s [ width =0.9\ textwidth ] { b e a r. j p g } (a) includegraphics 사용의일반적인유형 (b)

More information

최종보고서 데이터베이스의취약점분석과해결책 제출일자 : 2012년 5월 00일과목명 : 캡스톤디자인팀명 : DIS 팀장 : 강연준팀원 : 강연준 조응철담당교수 : 양환석교수님

최종보고서 데이터베이스의취약점분석과해결책 제출일자 : 2012년 5월 00일과목명 : 캡스톤디자인팀명 : DIS 팀장 : 강연준팀원 : 강연준 조응철담당교수 : 양환석교수님 최종보고서 데이터베이스의취약점분석과해결책 제출일자 : 2012년 5월 00일과목명 : 캡스톤디자인팀명 : DIS 팀장 : 강연준팀원 : 90816542 강연준 90710000 조응철담당교수 : 양환석교수님 목 차 1. 서론 1.1. 연구의필요성 1.1.1 데이터베이스보안의개념 1.1.2 데이터베이스보안의필요성 1.2. 팀구성원 1.2.1 구성원 1.3. 주간활동보고서

More information

웹 개발자를 위한 서블릿/JSP

웹 개발자를 위한 서블릿/JSP 2. HTTP 와서블릿 2.1 HTTP 이해하기 2.1.1 HTTP 동작방식 HTTP(Hypertext Transfer Protocol) 는웹서버와웹클라이언트웹브라우저간에통신하 ( ) 기위한프로토콜( 약속) 이다. CGI나서블릿프로그래밍을하기위해서는 HTTP 프로토콜을어느정도이해할필요성이있다. 이곳에서는간단하게 HTTP 프로토콜에대해알아보자. 웹브라우저는 HTTP

More information