HTML Basic & Advanced

Size: px

Start display at page:

Download "HTML Basic & Advanced"

건형 수
4 years ago
Views:

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

링크, 이미지, 이미지맵 a ( 관련소스파일 : http://www.daum.net) 텍스트에링크를설정하는요소이다.

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

[IE] Developer Toolbar Microsoft Internet Explorer 에서사용할수있는개발지원플러그인 다운로드 http://www.

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

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

PowerPoint Template

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