HTML Basic & Advanced

Save this PDF as:

Size: px
Start display at page:

Download "HTML Basic & Advanced"

Transcription

1 HTML Basic & Advanced

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

3 Markup 의기본개념 HTML BASIC 3

4 Markup 이란? 문서의일부를 ' 태그 (Tag)' 라불리는특별한문자열로둘러쌈으로서 문장의구조 ( 목차, 또는하이퍼링크등 ), 수식정보 ( 문자의크기, 조판상태등 ) 를 문장안에기술하는모든것을말한다. Markup 은문서및데이터의구조를표현하는것! 4

5 Markup 언어 HTML Hyper Text Markup Language 웹문서의콘텐츠를기술하는언어 흔히문서표현을위한언어로오해하고있지만, 문서의구조를기술하는언어 XML Extensible Markup Language 요소와관계를기술한문서형정의 (DTD) 를갖추어새로운언어규정이가능한메타언어 즉, HTML처럼고정된요소를사용하지않고문서와데이터에필요한요소를자유롭게정의 XHTML Hyper Text Markup Language Extensible Hyper Text Markup Language HTML을 XML로재구축한언어 5

6 HTML 구조및문법 HTML BASIC 6

7 HTML 의구조 7

8 HTML 서식 ( 관련소스파일 : 01_1_html_ 서식.html) 8

9 HTML 서식 ( 관련소스파일 : 01_1_html_ 서식.html) 9

10 HTML 서식 ( 관련소스파일 : 01_1_html_ 서식.html) 10

11 HTML 서식 ( 관련소스파일 : 01_1_html_ 서식.html) 11

12 HTML 서식 ( 관련소스파일 : 01_1_html_ 서식.html) HTML 버전정보 HTML 버전정보 1. DTD 선언 (Document Type Definition) 12

13 HTML 서식 ( 관련소스파일 : 01_1_html_ 서식.html) HTML 버전정보 헤더영역 HTML 버전정보 1. DTD 선언 (Document Type Definition) 헤더영역 1. head 요소로정의 2. 화면에표시되지않음 3. 문서의제목과메타정보포함 13

14 HTML 서식 ( 관련소스파일 : 01_1_html_ 서식.html) HTML 버전정보 헤더영역 본문영역 HTML 버전정보 1. DTD 선언 (Document Type Definition) 헤더영역 1. head 요소로정의 2. 화면에표시되지않음 3. 문서의제목과메타정보포함 본문영역 1. body 요소로정의 2. 문서콘텐츠를담은영역 ( 실제화면에표시 ) 14

15 HTML 구성 <a href= >Daum</a> 요소 (Element) 속성 (Attribute) 값 (Value) HTML 주석표기 ( 관련소스파일 : 01_2_html_ 주석.html) - 주석은 '<!--' 와 '-->' 으로둘러싼다. - 주로기능설명및주의사항을위해사용한다. 15

16 DTD 선언 (Document Type Definition) 16

17 DTD 란? 브라우저에게웹페이지의문서종류를알려주는선언문이다. (X)HTML 문서최상단에선언 브라우저가올바른화면표시 (rendering) 를하기위해필요 DTD를선언하지않는다면, 브라우저는호환모드 (Quirks mode) 로웹페이지를해석해서화면표시를한다. 웹브라우저들마다 Quirks mode일때화면을표시하는방법이달라서문서형을선언하지않으면브라우저호환성을확보하기어렵다. DTD 선언은다양한환경에서상호운용성을보장하기위한첫걸음! 유효성검사의 (Validation) 의기준 17

18 (X)HTML 유효성검사 (Markup Validation) W3C Markup Validation Service : 코드를검증할수있도록제공하는툴 유효성검사 : W3C 마크업밸리데이터 / W3C 링크체커 / W3C CSS 밸리데이터 유효성검사는절대적기준이아닌이상적인목표 작성한코드에대한문법적인오류체크 18

19 유효성검사 (Validation) 19

20 유효성검사 (Validation) 20

21 DTD 란? DTD 기본형식 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " 21

22 DTD 란? DTD 기본형식 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " <!DOCTYPE 이문서는 22

23 DTD 란? DTD 기본형식 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " <!DOCTYPE 이문서는 html 일반적으로 html 이나 xhtml 으로, 최상위엘리먼트는 html 이므로 html 로작성 23

24 DTD 란? DTD 기본형식 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " <!DOCTYPE 이문서는 html 일반적으로 html 이나 xhtml 으로, 최상위엘리먼트는 html 이므로 html 로작성 PUBLIC PUBLIC or SYSTEM 을설정, PUBLIC( 국제적공용문서 ) / SYSTEM( 내부적, 제한적문서 ) 24

25 DTD 란? DTD 기본형식 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " <!DOCTYPE 이문서는 html 일반적으로 html 이나 xhtml 으로, 최상위엘리먼트는 html 이므로 html 로작성 PUBLIC PUBLIC or SYSTEM 을설정, PUBLIC( 국제적공용문서 ) / SYSTEM( 내부적, 제한적문서 ) "-//W3C//DTD XHTML 1.0 Transitional//EN" 비공인인증인 W3C 기관에의해 XHTML 1.0 을 Transitional 방식의영어공용어로출력하며 25

26 DTD 란? DTD 기본형식 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " <!DOCTYPE 이문서는 html 일반적으로 html 이나 xhtml 으로, 최상위엘리먼트는 html 이므로 html 로작성 PUBLIC PUBLIC or SYSTEM 을설정, PUBLIC( 국제적공용문서 ) / SYSTEM( 내부적, 제한적문서 ) "-//W3C//DTD XHTML 1.0 Transitional//EN" 비공인인증인 W3C 기관에의해 XHTML 1.0 을 Transitional 방식의영어공용어로출력하며 " 참조할 DTD 문서는 " 이다. 26

27 DTD 란? HTML DTD - Strict : 선언된 HTML 버전의문법과구조를정확하게사용한다. 지원하지않는태그를사용해서는안된다. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " - Transitional : 과도기적으로사용하기위한선언으로서 strict 보다유연하다. 선언된 HTML 버전이외의문법과구조를허용한다. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " - Frameset : Transitional 속성과더불어, frameset(iframe, frame) 을지원한다. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " frameset 은문서의구조에관한태그이기때문에, Transitional 에서 frameset 을사용해도화면표시가일어난다. 따라서, 사실상 frameset 은 Transitional 과동일하게취급된다. 27

28 DTD 란? XHTML DTD - Strict : 선언된 XHTML 버전의문법과구조를정확하게사용한다. frameset(iframe, frame) 이나지원하지않는태그를사용해서는안된다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN " - Transitional : 과도기적으로사용하기위한선언으로서 strict 보다유연하다. 선언된 XHTML 버전이외의문법과구조를허용한다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " onal.dtd"> - Frameset : Transitional 속성과더불어, frameset(iframe, frame) 을지원한다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN " dtd"> 28

29 HTML 과 XHTML 중, 어떤문서형 (DTD) 을사용하는것이좋을까? HTML 이든 XHTML 이든모두괜찮지만, HTML 보다 XHTML 문법이 확장가능성이높기때문에개발편의및상위호환성측면에서권장 29

30 XHTML 로의전환 30

31 XHTML 로의전환 HTML 에서 XHTML 로의전환방법 1. XHTML DTD를선언한다. 2. XML 네임스페이스와언어코드를지정한다. <html xmlns=" lang="ko" xml:lang="ko"> 3. 모든시작태그는종료태그들을가져야한다. 또, 빈요소의경우하나의공백문자와 '/>' 로끝나야한다. <img src=" width="100" height="100" alt=" 다음 " /> 4. 모든요소와속성은소문자로작성되어야한다. 5. 모든속성값들은큰따옴표로둘러싸고값을가져야한다. <input type="radio" checked="checked" /> 6. 중첩관계가적절해야한다. 7. text 나 URL, script 에포함된특수문자 ('<', '>', '&') 는 escape 시킨다. 31

32 블록요소 VS 인라인요소 32

33 블록요소 VS 인라인요소 1. 블록요소 (Block Elements) 줄을바꿔각각독립된줄에표시 인라인요소와텍스트혹은또다른블록요소를포함할수있다. h1~h6, p, div, ul, ol, li 등 2. 인라인요소 (Inline Elements) 다른인라인엘리먼트와같은줄에표시 또다른인라인요소와텍스트를포함하지만블록요소를포함할수는없다. a, img, strong, span 등 33

34 블록요소 VS 인라인요소 Block Block Inline Inline Inline Inline Inline Block Block Inline Inline 34

35 블록요소와인라인요소 ü 요소는다른요소를포함할수있다. <h1><a href= >Daum</h1></a> 35

36 블록요소와인라인요소 ü 요소는다른요소를포함할수있다. <h1><a href= >Daum</h1></a> (X) <h1><a href= >Daum</a></h1> (O) 36

37 블록요소와인라인요소 ü 요소는다른요소를포함할수있다. <h1><a href= >Daum</h1></a> (X) <h1><a href= >Daum</a></h1> (O) ü 인라인요소는블럭요소를포함할수없다. <a href= ><h1>daum</h1></a> 37

38 블록요소와인라인요소 ü 요소는다른요소를포함할수있다. <h1><a href= >Daum</h1></a> (X) <h1><a href= >Daum</a></h1> (O) ü 인라인요소는블럭요소를포함할수없다. <a href= ><h1>daum</h1></a> (X) <h1><a href= >Daum</a></h1> (O) 38

39 HTML 요소와주요속성 타이틀과메타데이터 제목, 문단, 구분선 목록과표 링크, 이미지, 이미지맵 텍스트 그룹 폼 39

40 타이틀과메타데이터 title 문서의제목 head 요소안에정의한다. 브라우저제목표시줄 ( 혹은탭 ) 영역에노출되며, 즐겨찾기제목으로도사용된다. 검색엔진은문서제목에가중치를둔다. 스크린리더기에서문서 title을가장먼저읽기에접근성측면에서도중요하다. 40

41 타이틀과메타데이터 meta head 요소안에지정 문서에직접적으로표시 (x) machine( 브라우저나검색엔진등 ) 에문서정보 (metadata) 를제공 문자코드, 마임 (MIME) 타입, 설명문, 키워드등을기술 meta 를중요시하는검색엔진특성을이용하여광고로악용하는사례가많았다. 따라서, 현재는설명문과키워드 metadata 를중시하는검색엔진이이전보다줄어들었다. 41

42 제목, 문단, 구분선 h1 ~ h6 ( 관련소스파일 : 02_1_html_ 제목.html) 문서내부의콘텐츠제목을정의하는요소 1~6까지여섯단계로, 순서에맞게작성 CSS로임의의크기를지정할수있다. 가급적 h1 요소는한문서에한번만지정하는것을권장 42

43 제목, 문단, 구분선 p ( 관련소스파일 : 02_2_html_ 문단 _ 구분선.html) 텍스트문단요소 블록요소 ( 인라인요소와텍스트를포함할수있는블록요소이지만, 또다른블록요소를포함할수는없다.) br ( 관련소스파일 : 02_2_html_ 문단 _ 구분선.html) 개행요소 빈요소 ( 종료태그가필요없음 ) br 요소를여러번사용하여행간격을늘이는것은가능하지만, 이와같은시각효과를위해서사용하지않는다. <p> 인라인요소와텍스트를포함할수있는 <a href="#"> 블록요소 </a> 이지만, <br /> <strong> 또다른블록요소를포함할수는없다.</strong> </p> 43

44 제목, 문단, 구분선 hr ( 관련소스파일 : 02_2_html_ 문단 _ 구분선.html) 문서내에구분선을표시한다. 블록요소이지만, 빈요소이기에종료태그가필요없다. CSS를이용할수없는환경에서 hr 요소로내용을구분할수있다. 44

45 목록과표 ul, ol, li ( 관련소스파일 : 03_html_ 일반목록.html) 일반적인목록을구성하는요소들이다. 블록요소 ul ol li 1 항목의순서를따지지않고목록나열 (unordered list) 2 bulleted list 3 li만포함가능 1 항목의순서대로목록나열 (ordered list) 2 numerical or alphabetical list 3 li만포함가능 1 목록에포함되는항목 (list item) 2 대부분의브라우저에서들여쓰기되어표시된다. 45

46 목록과표 ul, ol, li ( 관련소스파일 : 03_html_ 일반목록.html) 소개하고싶은링크 즐겨읽는책 좋아하는영화 함께듣는음악? 1. 양파를고른다 2. 양파를 3분간기름에살짝볶는다. 3. 마늘 3쪽을넣는다. 4. 3분간더요리한다. 5. 그릇에담아내어장식한다.? 46

47 목록과표 실습예제? 47

48 목록과표 dl, dt, dd 정의형목록구성 ' 용어정의와설명 ' 외에 ' 참고문서 ', ' 링크와설명 ' 등다양한용도로이용될수있다. dl dt dd 정의형항목의목록나열 (definition list) 블록요소 dt 요소와 dd 요소만포함가능 정의형항목의용어 (definition term) 인라인요소인라인요소와텍스트를포함 정의형항목의설명 (definition description) 블록요소인라인요소와텍스트, 또다른블록요소를포함대부분의브라우저에서들여쓰기되어표시됨여러개의 dd도가능 48

49 목록과표 dl, dt, dd ( 관련소스파일 : 04_html_ 정의형목록.html) 49

50 목록과표 table ( 관련소스파일 : 05_html_ 테이블.html) 표를작성하는요소이다. - 셀 (cell) : 표안의항목 - 행 (row) : 횡렬의셀 - 열 (column) : 종렬의셀 table 요소를레이아웃용도로사용하지않는다. ( 단, 예외적으로 DM 은 table 사용 ) tr, th, td, thead, tfoot, tbody, caption, col, colgroup 등의요소를포함 50

51 목록과표 table ( 관련소스파일 : 05_html_ 테이블.html) tr * rowspan, colspan 1 행을정의하는요소 1 셀결합속성 2 블록요소 2 rowspan - 수직방향으로셀결합 3 th, td 요소만포함가능 3 colspan - 수평방향으로셀결합 th 1 제목셀을정의하는요소 2 굵은글꼴로중앙정렬되어표시 td 1 데이터셀을정의하는요소 2 일반적인글꼴로왼쪽정렬되어표시 3 블록요소 4 인라인요소와텍스트, 또다른블록요소포함가능 51

52 목록과표 table ( 관련소스파일 : 05_html_ 테이블.html) caption 1 표제목을지정하는요소 2 table 요소의시작태그바로뒤에기술 3 표위에중앙정렬로표시 thead, tfoot, tbody 1 행그룹화를위한요소 2 thead : 표의머리글 / tfoot : 바닥글 / tbody : 본문 3 인쇄할때표가여러페이지에걸친경우모든페이지에헤더행과푸터행이반복해서출력됨 4 tfoot는 thead 요소뒤에기술되지만, 표가장하단에출력 52

53 목록과표 table ( 관련소스파일 : 05_html_ 테이블.html) 53

54 목록과표 table ( 관련소스파일 : 05_html_ 테이블.html) colgroup, col 1 표의열을그룹화하기위한요소 2 table 혹은 caption 요소의바로뒤 (thead, tfoot, tbody 요소보다앞 ) 에지정 3 colgroup - 열의구조적인그룹화하기위해사용 4 col - 열을그룹화하여공통속성및스타일을적용하기사용 - class를지정하여스타일을공유할수있음 - IE에서는대부분의스타일지정이가능하지만, Firefox, Chrome 등에서는 border, background, width만가능 54

55 목록과표 table ( 관련소스파일 : 05_html_ 테이블.html) 55

56 목록과표 table ( 관련소스파일 : 05_html_ 테이블.html) <Firefox> <IE> 56

57 목록과표 실습예제 57

58 링크, 이미지, 이미지맵 a ( 관련소스파일 : 텍스트에링크를설정하는요소이다. 인라인요소 ( 인라인요소와텍스트를포함 ) a 요소의 href 속성값에 #name(id) 속성값을지정하면, name과 id 속성으로지정된문서내특정위치를이동한다. 58

59 링크, 이미지, 이미지맵 a a 요소의주요속성 1 href : 링크주소지정 2 name, id : 앵커식별자지정 3 title : 링크의보충정보를표시, 대부분의브라우저에서 title 속성에지정한값이툴팁으로표시 4 target : 링크된문서를어떤창에열것인지지정 (_blank / _parent / _self / _top / framename) 59

60 링크, 이미지, 이미지맵 img 이미지를삽입하는요소이다. 인라인요소지만, 빈요소이다. ( 종료태그필요없음 ) img 요소의주요속성 1 alt : - 이미지의대체텍스트 (alternative text) 지정 - IE에서는타브라우저와달리 alt 속성에지정된텍스트가툴팁으로표시 2 width, height - 이미지의가로 / 세로크기지정 - 페이지의로딩진행시이미지의가로 / 세로크기만큼영역을확보하고그이외다른부분을표시하게됨. ( 레이아웃이어긋나는현상을방지 ) 60

61 링크, 이미지, 이미지맵 img 3 border - a 요소로 img 요소에링크를설정한경우자동으로테두리선을표시 - 비추천속성이며 CSS의테두리관련속성으로제어 img {border:0 none;} 4 longdesc - 이미지에대한자세한설명이있는페이지의경로를지정하여 alt 속성을보완 5 align, hspace, vspace - 수평 / 수직위치, 좌우 / 상하여백을지정하기위한속성 - 비추천요소이며 CSS 로제어가능 61

62 링크, 이미지, 이미지맵 map 이미지맵이란? 이미지의일부영역에링크를두어사용자에게해당정보를제공할수있는페이지로 이동하도록만드는프로그램기법 62

63 링크, 이미지, 이미지맵 map 이미지맵프로그램 imagemapic 이미지의부분마다다른하이퍼링크를적용시킬수있게해주는프로그램 사각형, 원형을비롯한다각형모양으로지정가능 하이퍼링크의타겟을지정하여링크된페이지가열리는위치를지정 63

64 링크, 이미지, 이미지맵 map 이미지맵을정의하기위한요소 블록요소 주요속성 name, id 속성 img 요소의 usemap 속성값을지정하여해당이미지에연관시킴 <img src="planets.gif" width="145" height="126" alt="planets" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="sun" href="sun.htm" /> <area shape="circle" coords="90,58,3" alt="mercury" href="mercur.htm" /> <area shape="circle" coords="124,58,8" alt="venus" href="venus.htm" /> </map> 64

65 링크, 이미지, 이미지맵 area 이미지맵의영역을지정하기위한요소 빈요소 ( 종료태그필요없음 ) 주요속성 href : URL를지정 alt : 대체텍스트를지정 shape : 영역의형태를지정 (default / rect / circle / poly ) coods : 영역의좌표 ( 이미지전체의왼쪽위가기준점 ) 를쉼표로구분하여지정 shape 속성값에따라지정방법이다름 rect : 왼쪽위 X좌표, 왼쪽위 Y좌표, 오른쪽아래 X좌표, 오른쪽아래 Y좌표 circle : 중심의 X좌표, 중심의 Y좌표, 반경 poly : 첫번째각의 X좌표, 첫번째각의 Y좌표, 두번째각의 X좌표, 두번째각의 Y좌표... 65

66 텍스트 em, strong 특정텍스트를강조하는인라인요소이다. em emphasis 일반적인강조 이탤릭체로표시 strong strong emphasis 더욱강한강조 볼드체로표시 <ol> <li><strong> 시라노 ; 연애조작단 </strong></li> <li> 무적자 </li> <li> 슈퍼배드 </li> <li> 해결사 </li> <li> 레지던트이블 4 : 끝나지않은전쟁 3D</li>... </ol> 66

67 그룹 div, span 그룹화 (grouping element) 요소이다. 주로 id, class 속성으로 CSS를적용하기위해사용한다. div 요소와 span 요소의무분별한사용은피해야한다. div 블록요소 블록요소와인라인요소, 텍스트포함가능 span 인라인요소 인라인요소와텍스트는포함할수있지만, 블록요소는포함할수없음 67

68 그룹 div, span 68

69 그룹 div, span div span 69

70 폼 Form ( 관련소스파일 : 07_html_ 폼.html) 폼의최상위요소로폼을구성한다. form 요소의주요속성 action : 폼을전송할 URL 지정 method : 폼의데이터를전송하는방법 1 get : - URL? 뒤에파라미터값을붙여전송 - 간단한데이터전송시사용 - 데이터가주소입력란에표시되므로보안유지안됨 2 post - http 헤더에숨겨져서버로전송 - 일정크기이상의데이터전송시사용 - 데이터가주소입력란에표시되지않아보안성이우수 70

71 폼 Input (08_1_html_ 인풋.html) 인라인요소, 빈요소 폼안에기본적인컨트롤을생성 input 요소의 type (type=" 컨트롤의종류 ") text : 일반텍스트입력필드 password : - 비밀번호입력필드 - 대부분의브라우저에서입력한텍스트를 '*' 등으로감추어표시 - 일반텍스트로전송되기에실제데이터전송시에는암호화기술필요 checkbox : 복수선택가능한체크박스 radio : 한개만선택가능한라디오버튼 71

72 폼 Input (08_1_html_ 인풋.html) input 요소의 type (type=" 컨트롤의종류 ") submit : 송신버튼 reset : 리셋버튼 ( 입력내용전부를초기화 ) button : 범용버튼 image : 송신이미지버튼 (src 속성과 alt 속성지정 ) file : 송신파일선택필드 hidden : 감춰진필드 ( 화면에서는표시되지않으나서버로전송할데이터를지정할수있음 ) 72

73 폼 Input (08_1_html_ 인풋.html) input 요소의주요속성 name : 컨트롤의이름 ( 서버에서처리할데이터의컨트롤에는 name 속성필수 ) value : 컨트롤의값 size : text, password 컨트롤의가로크기 - size 를지정하지않으면컨트롤의폭은브라우저에따라달라짐 - size 를지정하여도브라우저의설정이나글꼴크기에따라폭이달라질수 있음 73

74 폼 Input (08_1_html_ 인풋.html) input 요소의주요속성 maxlength : text, password 컨트롤의최대입력문자수지정 checked : 체크박스, 라디오버튼의초기선택상태지정 disabled : 컨트롤을포커스, 선택, 변경등의조작이불가능하게하고데이터는서버로전송하지않음 readonly : 컨트롤의내용을변경되지않게하지만데이터는서버로전송 <input type="submit" name="submit1" value=" 전송하기 " /> <input type="password" name="password1" size="10" maxlength="10" /> <input type="radio" name="radio1" value="radio_value1" checked /> 74

75 폼 Textarea <textarea id= cmtcont name=" cmtcont cols="54" rows="3 ></textarea> 여러줄로된텍스트필드를생성하는인라인요소이다. textarea 요소의주요속성 name, disabled, readonly : input 요소의속성설명과동일 rows : 표시줄수를지정 ( 입력가능한줄수를제한하는것이아니라브라우저에서보이는줄수 ) cols : 표시폭을문자수로지정 ( 한문자의폭이어느정도일지는브라우저의설정이나글꼴크기에영향을받기때문에브라우저마다차이가발생할수있음 ) 75

76 폼 select, option ( 관련소스파일 : 08_2_html_ 셀렉트.html) 여러줄로된텍스트필드를생성하는인라인요소이다. select 셀렉트메뉴전체를정의하는요소 select 요소의주요속성 name : 셀렉트메뉴의이름지정 size - 표시줄수지정하고목록을박스로표시 ( 기본값 1) - 지정된 size 를넘는항목의선택을위해스크롤바가자동으로제공됨 76

77 폼 select, option ( 관련소스파일 : 08_2_html_ 셀렉트.html) option 셀렉트메뉴의항목을정의하는요소 select 요소에는한개이상의 option 요소가포함되어야함 option 요소의주요속성 selected : 해당항목이선택된상태 ( 선택된 option 요소가없을경우첫번째 option 요소가기본으로선택됨 ) value : 선택된항목의값 77

78 폼 button 버튼을생성하는인라인요소 기능적으로는 input 요소로생성하는버튼과같지만, 이미지나텍스트등을포함할수있어유연한디자인이가능하다. <button type="button > 이미지혹은텍스트포함가능. </button> button 요소의주요속성 type : 기본값이브라우저에따라다를수있기때문에 type을기입하는것을권장 - submit : 송신버튼 - reset : 리셋버튼 - button : 범용버튼 78

79 폼 label ( 관련소스파일 : 08_3_html_ 라벨.html) 컨트롤에라벨을정의하는요소이다. label 요소에특정텍스트를라벨로정의함으로써컨트롤과관련시킬수있으며동기화가가능하다. (e.g. 라벨과체크박스중어느쪽을클릭해도체크박스가선택 ) 명시적라벨부여 label 요소의 for 속성에컨트롤의 id 속성과같은값을지정하는방법 하나의컨트롤에복수의라벨지정가능 label 요소와컨트롤은반드시인접할필요없음 <label for="male"> 남자 </label> <input type="radio" name="sex" id="male" value="m"> <label for="female"> 여자 </label> <input type="radio" name="sex" id="female" value="f"> 79

80 폼 label ( 관련소스파일 : 08_3_html_ 라벨.html) 암묵적라벨부여 label 요소의범위에텍스트와컨트롤을포함하는방법 하나의컨트롤에복수의라벨지정불가능 텍스트와컨트롤은반드시 label 요소안에포함되어야함 <label> 남자 <input type="radio" name="sex" id="male" value="m"></label> <label> 여자 <input type="radio" name="sex" id="female" value="f"></label> fieldset, legend 여러폼컨트롤을폼안에서그룹화하는요소이다. fieldset 요소로그룹화하는범위를정의한후 legend 요소로그룹화한범위의제목을표시한다. legend 요소는 fieldset 요소의바로뒤에한번만출현할수있다. 80

81 폼 실습예제 81

82 시멘틱마크업 HTML BASIC 82

83 시멘틱마크업 (Semantic Markup) 콘텐츠에가장적합한의미의 HTML 코드를부여 콘텐츠의구조와순서를파악 ( 색인화 ) 문서에정보가치를부여 83

84 Tool 소개 HTML BASIC 84

85 [Firefox] Firebug Html 구조, CSS, JavaScript 소스를간단하게미리살펴볼수있는 Firefox 부가기능 다운로드

86 [Chrome] Developer Tools Chrome 에서사용할수있는개발자도구 마우스우클릭 > 팝업메뉴하단 ( 요소검사 ) 혹은단축키 F12 86

87 [IE] Developer Toolbar Microsoft Internet Explorer 에서사용할수있는개발지원플러그인 다운로드 75d-b8856fced535 87

88 [Firefox] Web Developer 웹개발에필요한여러기능을제공하는 Firefox 부가기능 다운로드

89

PowerPoint Template

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

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

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

Javascript

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

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

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

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

쉽게 풀어쓴 C 프로그래밍

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

More information

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일 Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 Introduce Me!!! Job Jeju National University Student Ubuntu Korean Jeju Community Owner E-Mail: ned3y2k@hanmail.net Blog: http://ned3y2k.wo.tc Facebook: http://www.facebook.com/gyeongdae

More information

PHP & ASP

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

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

PowerPoint 프레젠테이션

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

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

XE 스킨 제작 가이드

XE 스킨 제작 가이드 XE 스킨제작가이드 NHN 오픈 UI 기술팀정찬명 목 차 1. XE 스킨의개요 2. XE 스킨의종류 3. XE 스킨의구성요소 4. XE 스킨제작시고려사항 5. XE 스킨파일구조 6. skin.xml 문법 7. XHTML 문법 8. CSS 활용 9. XE 템플릿문법 XE 스킨의개요 스킨이란? 웹페이지또는 웹페이지의구성요소에대한 사용자인터페이스. 이런것아닙니다.

More information

2009년 상반기 사업계획

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

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

미쓰리 파워포인트

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

More information

C스토어 사용자 매뉴얼

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

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

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

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

More information

PowerPoint 프레젠테이션

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

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

PowerPoint 프레젠테이션

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

More information

Javascript

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

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

PowerPoint 프레젠테이션

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

More information

슬라이드 1

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

More information

<3033B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770>

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

More information

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

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

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

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

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 프레젠테이션 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

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 How to produce ChemML and MathML 조윤상 ( 과편협기획운영위원 ) 1 Applications of XML Applications of XML RDF (Resource Description Framework) : 자원의정보를표현하기위한규격, 구문및구조에대한공통적인규칙을지원. RSS (Rich Site Summary) : 뉴스나블로그사이트에서주로사용하는콘텐츠표현방식.

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

Microsoft PowerPoint HTML.ppt

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

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

네트워크 명령 실습

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

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

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

0. 들어가기 전

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

More information

PHP & ASP

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

More information

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

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

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

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

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

PowerPoint 프레젠테이션

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

More information

Visual Basic 반복문

Visual Basic 반복문 학습목표 반복문 For Next문, For Each Next문 Do Loop문, While End While문 구구단작성기로익히는반복문 2 5.1 반복문 5.2 구구단작성기로익히는반복문 3 반복문 주어진조건이만족하는동안또는주어진조건이만족할때까지일정구간의실행문을반복하기위해사용 For Next For Each Next Do Loop While Wend 4 For

More information

Week13

Week13 Week 13 Social Data Mining 02 Joonhwan Lee human-computer interaction + design lab. Crawling Twitter Data OAuth Crawling Data using OpenAPI Advanced Web Crawling 1. Crawling Twitter Data Twitter API API

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

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Elements and attributes 조윤상 ( 과편협기획운영위원 ) 1 Table of Contents 1. Elements( 요소 )? 2. Attributes( 속성 ), PCDATA, CDATA? 3. Elements 선언방법 4. Attributes 속성 2 15 th KCSE Editor s Workshop, Seoul 2015 Elements

More information

예스폼 프리미엄 템플릿

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

More information

쉽게 풀어쓴 C 프로그래밍

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

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

Secure Programming Lecture1 : Introduction

Secure Programming Lecture1 : Introduction Malware and Vulnerability Analysis Lecture4-1 Vulnerability Analysis #4-1 Agenda 웹취약점점검 웹사이트취약점점검 HTTP and Web Vulnerability HTTP Protocol 웹브라우저와웹서버사이에하이퍼텍스트 (Hyper Text) 문서송수신하는데사용하는프로토콜 Default Port

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

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

Web Scraper in 30 Minutes 강철

Web Scraper in 30 Minutes 강철 Web Scraper in 30 Minutes 강철 발표자 소개 KAIST 전산학과 2015년부터 G사에서 일합니다. 에서 대한민국 정치의 모든 것을 개발하고 있습니다. 목표 웹 스크래퍼를 프레임웍 없이 처음부터 작성해 본다. 목표 웹 스크래퍼를 프레임웍 없이 처음부터 작성해 본다. 스크래퍼/크롤러의 작동 원리를 이해한다. 목표

More information

한국학 온라인 디지털 자원 소개

한국학 온라인 디지털 자원 소개 XSL 의이해 김현한국학중앙연구원인문정보학교실 hyeon@aks.ac.kr 이저작물 (PPT) 의인용표시방법 : 김현, XSL 의이해, 전자문서와하이퍼텍스트 수업자료 (2018) 1. XSL 이란? 2. XSL Elements 3. XSL 에의한문서표현 1. XSL이란? XSL 관련개념 XSL (extensible Stylesheet Language) 문서의스타일을정의하기위한언어

More information

세르게이의 HTML5&CSS3-내지_ indd

세르게이의 HTML5&CSS3-내지_ indd HTML CSS CHAPTER_2 HTML 문법 HTML 문서 HTML 문서기초요소와태그태그중첩빈요소특성불리언특성 XHTML5 여러버전을지원하는 HTML 문서 XHTML5 정의 문서타입과구조 MIME 타입일반적인 MIME 타입문서객체모델의미적요소 문법요약일반문법규칙 (X)HTML5 빈태그문법선택적태그를사용하는 HTML5 요소요소의타입브라우저호환성을위한스크립팅

More information

<4D F736F F F696E74202D20B5A5C0CCC5CDBAA3C0CCBDBA5F3130C1D6C2F75F32C2F7BDC32E >

<4D F736F F F696E74202D20B5A5C0CCC5CDBAA3C0CCBDBA5F3130C1D6C2F75F32C2F7BDC32E > 6. ASP.NET ASP.NET 소개 ASP.NET 페이지및응용프로그램구조 Server Controls 데이터베이스와연동 8 장. 데이터베이스응용개발 (Page 20) 6.1 ASP.NET 소개 ASP.NET 동적웹응용프로그램을개발하기위한 MS 의웹기술 현재 ASP.NET 4.5까지출시.Net Framework 4.5 에포함 Visual Studio 2012

More information

DocsPin_Korean.pages

DocsPin_Korean.pages Unity Localize Script Service, Page 1 Unity Localize Script Service Introduction Application Game. Unity. Google Drive Unity.. Application Game. -? ( ) -? -?.. 준비사항 Google Drive. Google Drive.,.. - Google

More information

3장

3장 C H A P T E R 03 CHAPTER 03 03-01 03-01-01 Win m1 f1 e4 e5 e6 o8 Mac m1 f1 s1.2 o8 Linux m1 f1 k3 o8 AJAX

More information

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

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

More information

Microsoft Word - ntasFrameBuilderInstallGuide2.5.doc

Microsoft Word - ntasFrameBuilderInstallGuide2.5.doc NTAS and FRAME BUILDER Install Guide NTAS and FRAME BUILDER Version 2.5 Copyright 2003 Ari System, Inc. All Rights reserved. NTAS and FRAME BUILDER are trademarks or registered trademarks of Ari System,

More information

PowerPoint Template

PowerPoint Template 설치및실행방법 Jaewoo Shim Jun. 4. 2018 Contents SQL 인젝션이란 WebGoat 설치방법 실습 과제 2 SQL 인젝션이란 데이터베이스와연동된웹서버에입력값을전달시악의적동작을수행하는쿼리문을삽입하여공격을수행 SELECT * FROM users WHERE id= $_POST[ id ] AND pw= $_POST[ pw ] Internet

More information

1

1 2/33 3/33 4/33 5/33 6/33 7/33 8/33 9/33 10/33 11/33 12/33 13/33 14/33 15/33 16/33 17/33 5) 입력을 다 했으면 확인 버튼을 클릭합니다. 6) 시작 페이지가 제대로 설정이 되었는지 살펴볼까요. 익스플로러를 종료하고 다시 실행시켜 보세요. 시작화면에 야후! 코리아 화면이 뜬다면 설정 완료..^^

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 SECUINSIDE 2017 Bypassing Web Browser Security Policies DongHyun Kim (hackpupu) Security Researcher at i2sec Korea University Graduate School Agenda - Me? - Abstract - What is HTTP Secure Header? - What

More information

로거 자료실

로거 자료실 redirection 매뉴얼 ( 개발자용 ) V1.5 Copyright 2002-2014 BizSpring Inc. All Rights Reserved. 본문서에대한저작권은 비즈스프링 에있습니다. - 1 - 목차 01 HTTP 표준 redirect 사용... 3 1.1 HTTP 표준 redirect 예시... 3 1.2 redirect 현상이여러번일어날경우예시...

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

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Web server porting 2 Jo, Heeseung Web 을이용한 LED 제어 Web 을이용한 LED 제어프로그램 web 에서데이터를전송받아타겟보드의 LED 를조작하는프로그램을작성하기위해다음과같은소스파일을생성 2 Web 을이용한 LED 제어 LED 제어프로그램작성 8bitled.html 파일을작성 root@ubuntu:/working/web# vi

More information

슬라이드 1

슬라이드 1 Pairwise Tool & Pairwise Test NuSRS 200511305 김성규 200511306 김성훈 200614164 김효석 200611124 유성배 200518036 곡진화 2 PICT Pairwise Tool - PICT Microsoft 의 Command-line 기반의 Free Software www.pairwise.org 에서다운로드후설치

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

2파트-07

2파트-07 CHAPTER 07 Ajax ( ) (Silverlight) Ajax RIA(Rich Internet Application) Firefox 4 Ajax MVC Ajax ActionResult Ajax jquery Ajax HTML (Partial View) 7 3 GetOrganized Ajax GetOrganized Ajax HTTP POST 154 CHAPTER

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

PowerPoint 프레젠테이션

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

More information

Microsoft PowerPoint SDK설치.HelloAndroid(1.5h).pptx

Microsoft PowerPoint SDK설치.HelloAndroid(1.5h).pptx To be an Android Expert 문양세강원대학교 IT 대학컴퓨터학부 개발환경구조및설치순서 JDK 설치 Eclipse 설치 안드로이드 SDK 설치 ADT(Androd Development Tools) 설치 AVD(Android Virtual Device) 생성 Hello Android! 2 Eclipse (IDE) JDK Android SDK with

More information

AMP는 어떻게 빠른 성능을 내나.key

AMP는 어떻게 빠른 성능을 내나.key AMP는 어떻게 빠른 성능을 내나? AU개발 김태훈 kishu@navercorp.com AMP 란무엇인가? AMP 방식으로 HTML을 만들고 AMP JS를 로딩하고 AMP 컴포넌트만 사용하면 웹페이지의 빠른 렌더링을 보장 + 구글 검색 결과에서 즉시 로딩(빠르고 멋있게) AMPs are just Web Pages! AMPs are just Web Pages!

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. 서비스소개및신청 1) 휴대폰인증서비스란? 2) 휴대폰인증서비스장점 3) 서비스신청하기 1) 회원가입페이지에적용 2) 아이디, 비밀번호찾기페이지에적용 3) 14세미만비회원구매제한팝업에적용 4) 성인인증페이지에적용 2 1. 서비스소개및신청 1) 휴대폰인증서비스란? 휴대폰인증서비스는본인명의의휴대폰을사용하여본인확인을가능하게해주는서비스로써,

More information

슬라이드 1

슬라이드 1 GS 에너지백오피스 ( 국문 ) HTML 등록가이드 Version 1.0 Produced By e-motion 프로젝트 단위업무 GS 에너지홈페이지구축프로젝트 화면설계 _ 백오피스 HTML 등록가이드 작성자조정아작성일 2012-07-10-1- 목록 페이지 메뉴명 등록항목 3 Company > GS에너지소개 4 Company > CEO 메시지 5 Company

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

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

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

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

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

Docker

Docker Web + HTML SPARCS FRESHMAN SEMINAR 2016-03-30 SAMJO Schedule Frontend Web + HTML CSS + JavaScript jquery Backend Django (3 ~ ) 디자이너분들은 Backend 세미나가필수가아님 Today s Topics World Wide Web Concept, Server, Client,

More information

Microsoft PowerPoint Android-SDK설치.HelloAndroid(1.0h).pptx

Microsoft PowerPoint Android-SDK설치.HelloAndroid(1.0h).pptx To be an Android Expert 문양세강원대학교 IT 대학컴퓨터학부 Eclipse (IDE) JDK Android SDK with ADT IDE: Integrated Development Environment JDK: Java Development Kit (Java SDK) ADT: Android Development Tools 2 JDK 설치 Eclipse

More information

Microsoft PowerPoint - 11주차_Android_GoogleMap.ppt [호환 모드]

Microsoft PowerPoint - 11주차_Android_GoogleMap.ppt [호환 모드] Google Map View 구현 학습목표 교육목표 Google Map View 구현 Google Map 지원 Emulator 생성 Google Map API Key 위도 / 경도구하기 위도 / 경도에따른 Google Map View 구현 Zoom Controller 구현 Google Map View (1) () Google g Map View 기능 Google

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 How to construct XSL and/or CSS for style sheet of XML files based on the data type definition 조윤상 ( 과편협기획운영위원 ) 1 Table of Contents 1. XML, XSL and CSS? 2. What is XSL? XSLT? XPath? XSL-FO? 3. What is

More information

Introduction to Avalon A Whirlwind Tour…

Introduction to Avalon A Whirlwind Tour… 웹표준실무적용퀵스타트 박경훈 (HOONS) HOONS 닷넷운영자 hoonsbara@hotmail.com 이진아 (LIMA) D strict HOONS닷넷익스프레션시삽 lima@hanmail.net 짂행순서 웹표준과브라우저실태 의미있는마크업을찾아서 실무웹표준적용퀵스타트 웹표준의오해와짂실 웹브라우저와웹표준 HTML(HyperText Markup Language)

More information

UNIST_교원 홈페이지 관리자_Manual_V1.0

UNIST_교원 홈페이지 관리자_Manual_V1.0 Manual created by metapresso V 1.0 3Fl, Dongin Bldg, 246-3 Nonhyun-dong, Kangnam-gu, Seoul, Korea, 135-889 Tel: (02)518-7770 / Fax: (02)547-7739 / Mail: contact@metabrain.com / http://www.metabrain.com

More information

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

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

More information

Microsoft Word - src.doc

Microsoft Word - src.doc IPTV 서비스탐색및콘텐츠가이드 RI 시스템운용매뉴얼 목차 1. 서버설정방법... 5 1.1. 서비스탐색서버설정... 5 1.2. 컨텐츠가이드서버설정... 6 2. 서버운용방법... 7 2.1. 서비스탐색서버운용... 7 2.1.1. 서비스가이드서버실행... 7 2.1.2. 서비스가이드정보확인... 8 2.1.3. 서비스가이드정보추가... 9 2.1.4. 서비스가이드정보삭제...

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

H3250_Wi-Fi_E.book

H3250_Wi-Fi_E.book 무선 LAN 기능으로 할 수 있는 것 2 무선 LAN 기능으로 할 수 있는 것 z q l D w 3 Wi-Fi 기능 플로우차트 z q l D 4 Wi-Fi 기능 플로우차트 w 5 본 사용 설명서의 기호 설명 6 각 장별 목차 1 2 3 4 5 6 7 8 9 10 11 12 13 14 7 목차 1 2 3 4 8 목차 5 6 7 8 9 9 목차 10 11 12

More information

SAP Tech를 통해 SAP의 Web Application Server와 그것을 근간으로 서비스되는 BSP Application에 대한 소개를 하게 되어 기쁘다

SAP Tech를 통해 SAP의 Web Application Server와 그것을 근간으로 서비스되는 BSP Application에 대한 소개를 하게 되어 기쁘다 BSP Extension 의소개 - HTMLB 목 록 1. BSP Extension의소개..3 2. BSP Extensions and BSP Elements.4 3. BSP Extension Framework 5 4. Example: Using Extensions in BSP Pages.7 5. 자주사용하는 HTMLB Element.9 5.1 button..9

More information

C# Programming Guide - Types

C# Programming Guide - Types C# Programming Guide - Types 최도경 lifeisforu@wemade.com 이문서는 MSDN 의 Types 를요약하고보충한것입니다. http://msdn.microsoft.com/enus/library/ms173104(v=vs.100).aspx Types, Variables, and Values C# 은 type 에민감한언어이다. 모든

More information

슬라이드 1

슬라이드 1 - 1 - 전자정부모바일표준프레임워크실습 LAB 개발환경 실습목차 LAB 1-1 모바일프로젝트생성실습 LAB 1-2 모바일사이트템플릿프로젝트생성실습 LAB 1-3 모바일공통컴포넌트생성및조립도구실습 - 2 - LAB 1-1 모바일프로젝트생성실습 (1/2) Step 1-1-01. 구현도구에서 egovframe>start>new Mobile Project 메뉴를선택한다.

More information

게임 기획서 표준양식 연구보고서

게임 기획서 표준양식 연구보고서 ᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞ ᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞ ᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞ ᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞ ᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞ ᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞ ᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞᆞ

More information