( 1.인터넷과 HTML의 개요) 1. 인터넷과 HTML의 개요 1.1. 불의 사용과 웹의 전파 불과 인류 인류 : 약 200만년전에 출현 인류의 불 흔적 : 약 100만년전 현인류 : 약 4만년전 지구는 4번의 빙하기와

Size: px

Start display at page:

Download "( 1.인터넷과 HTML의 개요) 1. 인터넷과 HTML의 개요 1.1. 불의 사용과 웹의 전파 불과 인류 인류 : 약 200만년전에 출현 인류의 불 흔적 : 약 100만년전 현인류 : 약 4만년전 지구는 4번의 빙하기와"

서운 전
6 years ago
Views:

1 () HTML5 훈련교사 박원기 1 / 89

2 ( 1.인터넷과 HTML의 개요) 1. 인터넷과 HTML의 개요 1.1. 불의 사용과 웹의 전파 불과 인류 인류 : 약 200만년전에 출현 인류의 불 흔적 : 약 100만년전 현인류 : 약 4만년전 지구는 4번의 빙하기와 3번의 간빙기를 거침 인류 문명 : 약 4~5천년전 4대 문명으로 부터 우리나라 : 약 70만년전 인터넷과 인류 네트워크 : 약 50년전 웹 : 약 25년전 우리나라 : 약 20년전 1.2. 인터넷과 HTML의 역사 년도 인터넷 1967 ARPAnet 군사용 구축 1982 인터넷에 TCP/IP 적용 HTML 대한민국 대한민국 최초 네트워크 접속 (서울대-한국과학 기술원) 1983 미국과 최초 접속 1984 유럽과 최초 접속 1986 학술 연구용 네트워크 분 리(NSFnet) 1989 유럽 핵물리학 연구소(CERN)에 서 연구소 내의 논문 연람 시스템 으로 www고안 1991 www 공개. 폭발적인 보급효과 HTTML 1.0 등장 NCSA 웹브라우저 'Mosaic' 공개 한국통신 인터넷 계정 서비스 시작으로 인터넷이 본적적으로 일반인에게 보급되기 시작. NSFnet 민간으로 이관. 인터넷 보급 브라우저 전쟁. Netscape / Explorer HTML4.01 W3C권고안. 2 / 89

3 ( 1.인터넷과 HTML의 개요) 1999 IE5 등장 2004 FireFox 등장. SNS 유행 2005 Ajax/Web2.0 주목 2006 Youtube가 google에 매수 2007 iphone 발매 2008 HTML5 초안공개. Android 스마트폰 발매 2013 ios, android 모바일 양대 산맥 으로 부상. 3 / 89

4 ( 2.브라우저별 점유율 추이) 2. 브라우저별 점유율 추이 분석 관련 사이트 : 4 / 89

5 ( 2.브라우저별 점유율 추이) 2.1. 브라우저별 세계 추이 2.2. 브라우저별 국내 추이 5 / 89

6 ( 2.브라우저별 점유율 추이) 2.3. 브라우저별 미국 추이 2.4. 브라우저별 일본 및 중국 추이 일본 중국 6 / 89

7 ( 2.브라우저별 점유율 추이) 2.5. 브라우저별 인도 추이 7 / 89

8 ( 2.브라우저별 점유율 추이) 2.6. 모바일 브라우저 세계 추이 8 / 89

9 ( 2.브라우저별 점유율 추이) 2.7. 국내 모바일 브라우저 추이 9 / 89

10 ( 3.HTML과 웹 표준) 3. HTML과 웹 표준 3.1. 등장 배경 1999년 IE5를 발표한 후 부터 MS사는 w3c의 웹표준 권고안 보다는 자사의 기술에만 의존하는 기 술을 채용(단적인 예, ActiveX) 2007년 아이폰이 발매되면서 모바일 브라우저 강세. 그간 군소 브라우저들로 치부되었던 사파리, 오페라, 파이어폭스 등의 브라우저들이 작고 빠른 처리 속도를 무기로 모바일 브라우저 점유. 2009년 IE8 버전을 발표하는 시점에 세계시장은 이미 사파리, 크롬, 오페라, 파이어폭스 등과 같은 브라우저들의 성장세 가속. 결국 MS는 IE의 차기 버전인 IE9에서는 w3c의 표준을 완벽하게 지원하겠다고 발표. 결국 모바일웹의 성장과 웹표준의 필요성이 맞아떨어지면서 웹표준의 일반화가 가속됨 웹표준의 필요성 HTML의 한계를 뛰어 넘는 리치 UI 등장 응용 프로그램 플랫폼으로 발전한 웹 브라우저 Flash, Silverlight, JavaFx, Google Gears YouTube, Facebook, Flicker(사진공유사이트), pixiv(일러스트 투고 사이트), Google Maps, 플러그인에서 벗어나고자 하는 HTML 3.3. html5 소개 HTML5는 웹 표준 기구인 W3C에서 만들고 있는 차세대 웹 표준안으로 MS, 모질라, 애플, 구글, 오페라등 거의 모든 웹 브라우저 벤더가 참여하고 있는 산업 표준이다. HTML5의 가장 큰 목적은 과거 HTML과 호환 성을 유지하면서 과거에서 발생하던 브라우저간의 비호환성을 해결하도록 하는 것이다. 과거의 브라우저들에게 나타났던 현상들은 HTML를 지원하되 자사에 특화된 비 표준 태그들을 난발하면서 호환성에 문제가 되었다. 이에 따라 거의 모든 웹 개발자들은 여러 가지의 브라우저를 대상으로 웹 프로그램 의 호환성을 테스트하기 위해 불필요한 자원을 소모하게 되었으며, 심지어는 MS의 독주로 인한 기형적인 웹 프로그램들이 나오기도 하였다. 이는 독주로 인한 패단은 HTML4버전 이후 새로운 버전이 나오기 까지 10년이 넘는 세월을 보내야 했다는 결과를 낳았다. 그만큼 혁식이 늦어졌다는 말이기도 하다. 다행스런운것은 이러한 혁신의 필요성이 모바일의 시장이 커지면서 시작되었다. 또한 HTML5가 인터넷 업 계에서 알려지게 된 계기는 2009년 구글의 웹개발자 컨퍼런스 와 스티브 잡스가 애플 아이폰에 플래시 탑 재를 거부하면서 대응 기술로 HTML5를 홍보하기 시작한 때 부터일 것이다. 10 / 89

11 ( 3.HTML과 웹 표준) 3.4. HTML5 디자인 원칙 HTML5를 디자인 하면서 설계자들이 갖고 있는 원칙은 다음과 같다. 기존의 HTML 문법과 사용법을 최대한 지원하면서 단계적으로 축소한다. 웹 개발자들이 겪고 있는 가장 중요한 문제들을 우선 순으로 나누고 문제점을 분리해서 독립적으로 해결하려는 유연성의 원칙. 웹 브라우저간의 상호 호환성 유지와 오류 처리 방법을 명시하도록 한다 HTML5의 작성 원칙 HTML5의 문서를 구분하기 위해 문서의 형식을 아래와 같이 지정한다. html특성상 대소문자는 구별하지 않 는다. <!doctype html> 기존 HTML4.x 버전대 에서는 문서의 형식을 지정할 때 보다 복잡한 구조를 갖고 있었다. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " 브라우저별 사용 엔진 엔진 이름 브라우저의 종류 게코(Gecko) 모질라에서 제작. 파이어폭스, 썬더버드, 시몽키 등 트라이던트(Trident) 마이크로소프트제작. 인터넷 익스플로러, 아웃룩 익스프레스, 마이크로 소프트 아웃룩, 그리고 윈앰프, 리얼플레이어의 미니 브라우저 등 프레스토(Presto) 오페라 소프트웨어의 사유엔진. 오페라 KHTML KDE의 컨커러 웹키트(WebKit) KHTML의 파생엔진. 사파리, 크롬 등 태즈먼(Tasman) 마이크로소프트 엔진. 맥용 인터넷익스플로러 [출처] HTML4와의 차이점 구조적인 요소 추가 구역을 나누는 div 태그를 대신하여 용도별로 요소들이 추가 됨. header nav 11 / 89

12 ( 3.HTML과 웹 표준) article section aside footer 멀티 미디어 요소 추가 외부 플러그인을 사용하지 않고 멀티 미디어를 실행할 수 있도록 추가. audio video 편의성을 극대화한 요소 추가 command datalist details embed figure gifcaption 요소의 의미를 변경 em : 강한 강조를 나타낼 때 hr : 각 section을 구분할 때 12 / 89

http://www.jobtc.kr ( 4.HTML 기본 골격) 4. HTML 기본 골격 4.1. html이란? html : Hyper Text Markup Language의 약자이다. SGML(Standard Generalized Markup Language)에 기반을 두고 있다. 표준화 기군인 W3C에 의해 관리된다. 현재 4.

13 ( 4.HTML 기본 골격) 4. HTML 기본 골격 4.1. html이란? html : Hyper Text Markup Language의 약자이다. SGML(Standard Generalized Markup Language)에 기반을 두고 있다. 표준화 기군인 W3C에 의해 관리된다. 현재 4.0이 일반적으로 사용된다 html 특징 대소문자 구별이 없다. 태그(<>)로 이루어져 있다. 2칸 이상의 공백과 줄바꿈을 인식하지 못한다. 태그에는 쌍을 이루는 태그와 단독태그가 존재한다. 일반적으로 확장자는 "htm" 또는 "html"을 사용한다 html 컨텐츠의 분류 4.4. html문서의 주소 html문서의 의미를 알아보자. 13 / 89

14 ( 4.HTML 기본 골격) http : Hyper Text Transfer Protocol로 대표적인 인터넷 프로토콜(통신규약)이다. www : Wold Wide Web을 나타내며 서버의종류이다. jobtc.kr : 도메인 /html/index.html : 브라우저에서 보여질 디렉토리와 파일을 나타낸다 HTML기본 골격 <html> <head> <title> 타이틀 내용 </title> <meta> 내용 </meta> </head> <body> 브라우저에 표시될 내용 </body> </html> <html>... </html> 웹 브라우저에게 html문서의 시작을 알려준다. 종료태그인 </html>을 문서의 마지막에 기술한다 <head>... </head> html문서의 헤드 부분을 나타내며 문서가 웹 브라우저에 표시되기전에 읽혀진다. 가장 많이 사용되 는 하위 태그로는 <title>과 <meta>태그가 있다 <title>... </title> 문서의 제목을 나타내며 웹 브라우저의 제목표시줄에 표시된다 <meta>... </meta> 일종의 HTML문서의 정보를 담아두는 요소를 정의할 때 쓰이는 태그 보통 HTML문서의 레이아웃에 직접적인 역할(즉 브라우저상에 보여지게 하는 역할을 하는 태그가 아니다라는 뜻)을 하는 태그는 아님. HTML문서에 일정부분의 부가적 요소를 정의해두는 태그. 검색엔진에게 관련 정보 제공 문자 인코딩할 때 14 / 89

15 ( 4.HTML 기본 골격) 자동으로 새로고침하고자 할때 세부 내용 <meta name="author" content="소유자명"> <meta name="description" content="간단한 설명"> <meta name="keywords" content="키워드"> <meta http-equiv="content-type" content="text/html; charset=euc-kr"> <meta http-equiv="refresh" content="10;url=comic1.html"> meta 태그는 <title>태그 뒤에 써주는게 좋다. 5. html 요소 5.1. body 속성 웹 브라우저 상에 보이는 실제 내용들이 기술되는 부분이다. 1) 속성들 속성명 설명 background 문서 배경에 출력되는 이미지 bgcolor 문서 배경 색상 text 기본 글자 색 link 링크색 vlink 한번 방문한 링크의 색 alink 현재 클릭하고 있는 링크의 색 바탕색 및 기본 글자색 지정 <!doctype html> <html> <head> <meta charset='utf-8'> <meta> 내용 </meta> <title> 타이틀 내용 </title> </head> <body bgcolor='#ffff00' text='#ff0000'> 브라우저에 표시될 내용 </body> </html> 15 / 89

http://www.jobtc.kr ( 5.html 요소) 브라우저 바탕에 이미지 표시하기 <!

16 ( 5.html 요소) 브라우저 바탕에 이미지 표시하기 <!doctype html> <html> <head> <meta charset='utf-8'> <meta> 내용 </meta> <title> 타이틀 내용 </title> </head> <body background='back.png' text='#ffffff'> 바탕에 이미지 띄우기 </body> </html> 5.2. 글꼴 태그 종류 h 16 / 89

17 ( 5.html 요소) font b i u s sub sup mark <Hn>... </Hn> Head Line을 의미하며 일반적으로 문단의 제목을 표시할 때 사용한다. 구조 <H1 align="left center right"> Heading </H1> align : 문장의 정렬 방식. 특징 문자는 자동으로 굵게 처리된다. 문단을 분리하여 한줄의 빈 공백이 발생한다. n의 값의 범위는 1~6까지이고 1이 가장 큰 사이즈이다. 예 head line 예제 <!DOCTYPE html> <html> <head> <title>html 연습</title> <meta charset="utf-8"> </head> <body> <section> <h1>가장 큰 글씨</h1> 관련 기사 내용 입니다. </section> <section> <h6>가장 작은 헤드라인</h6> 관련 기사 내용 입니다. </section> <section> <h1 align="center">최대크기로 가운데</h1> <h6 align="right">최소크기로 오른쪽</h6> </section> </body> </html> 17 / 89

18 ( 5.html 요소) <FONT>...</FONT> 글자의 크기와 색상,글꼴을 지정할 때 사용한다. 구조 <FONT size="n" face="글꼴" color="#rrggbb"> 문자 </FONT> size : 1~7까지 사용하고 1이 가장 작은 크기이다. face : 글꼴을 지정한다. color : 글자의 색상을 지정한다. 영어와 한글의 색상이름을 사용할 수도 있지만 모든 브라우저가 인 식한다는 보장이 없기 때문에 일반적으로 RGB색상 코드값을 사용한다. RR : red GG : green BB : blue 각각의 값은 16진수 00~ff까지 갖는다. 폰트 태그 예제 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>font test</title> </head> <body> <font size=1> 최소 크기</font><br/> <font size=7> 최대 크기</font><br/> <font size=3 color="#009900">보통 초록</font><br/> <font size=7 face='궁서체' color='#ff0000'>빨강 궁서체</font><br/> </body> </html> 18 / 89

http://www.jobtc.kr ( 5.html 요소) 5.2.3. <B>... </B> Bold체를 나타내며 문자를 굵게 표시한다. 5.2.4. <I>.

.. </S> 문자 중앙에 줄을 그어 표시한다. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>font

19 ( 5.html 요소) <B>... </B> Bold체를 나타내며 문자를 굵게 표시한다 <I>... </I> 이탤릭체를 나타내며 문자를 옆으로 기울려 표시한다 <U>... </U> 문자에 밑줄을 그어 표시한다 <S>... </S> 문자 중앙에 줄을 그어 표시한다. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>font test</title> </head> <BODY bgcolor="#ffffcc" text="#6600cc"> <b>볼드(굵은체)</b><p> <i>기울임체</i><p> <u>밑즐 좌~악</u><p> <s>취소...</s> </body> </html> 19 / 89

http://www.jobtc.kr ( 5.html 요소) 5.2.7. <S

20 ( 5.html 요소) <SUB>...</SUB> 아래 첨자로 표시한다 <SUP>... </SUP> 위 첨자로 표시한다. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>font test</title> </head> <BODY bgcolor="#ffffcc" text="#6600cc"> 물 : H<sub>2</sub>O <p> 원의 방정식 : X<sup>2</sup> * Y<sup>2</sup> = 1 </body> </html> mark 글자에 형광 효과를 준다 문단 모양 태그 종류 p div pre xmp hr br blockquote section article nav header aside footer p <P align = "left center right">... </P> 문단과 문단을 분리하여 표시한다. align : 문단의 정렬 방식을 정한다. 표함되어 있는 각종 태그는 번역되어 그 결과가 표시된다. 20 / 89

http://www.jobtc.kr ( 5.html 요소) <p/>만을 사용하여 단독으로 사용될 수 있다. 이때 주의할 사항은 반복사용하여도 하나밖에 인식하 지 않는다. p 태그 예제 <!

21 ( 5.html 요소) <p/>만을 사용하여 단독으로 사용될 수 있다. 이때 주의할 사항은 반복사용하여도 하나밖에 인식하 지 않는다. p 태그 예제 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>p 태그 예제</title> </head> <BODY bgcolor="#ffffcc" text="#6600cc"> 두 문단 위 아래에 여백이 있음을 유념하세요. <p>첫번째 문단</p> <p>두번째 문단</p> </body> </html> div <DIV align = "left center right">... </DIV> <P>태그와 그 기능이 동일하지만 문단과 문단을 분리하여 빈 줄은 만들어 내지 않는다. 레이어 의미로 가장 많이 사용됨. 반복 사용하여도 인식하지 않는다. div 태그 예제 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>div 태그 예제</title> </head> <BODY bgcolor="#ffffcc" text="#6600cc"> 두 문단 위 아래에 여백이 생기지 않습니다. <div>첫번째 문단</div> <div>두번째 문단</div> </body> </html> 21 / 89

http://www.jobtc.kr ( 5.html 요소) 5.3.3. pre <PRE>... </PRE> 공백과 줄띄기를 입력한 그대로 인식한다. 한 줄이 너무 길면 브라우저상에 좌우 스크롤바가 생겨 사용자에게 불편함을 안겨 줄 수 있다. pre 태그 예제 <!

22 ( 5.html 요소) pre <PRE>... </PRE> 공백과 줄띄기를 입력한 그대로 인식한다. 한 줄이 너무 길면 브라우저상에 좌우 스크롤바가 생겨 사용자에게 불편함을 안겨 줄 수 있다. pre 태그 예제 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>pre 태그 예제</title> </head> <BODY bgcolor="#ffffcc" text="#6600cc"> 일반 문서와 pre안의 문서를 비교해 보세요.<p> <div>첫번째 문단은 입력 한 모양이 아니군요. </div> <pre>두번째 문단 입력한 모양 그대로네... </pre> </body> </html> xmp <XMP>... </XMP> 일반적으로 문단을 만드는 태그들의 안쪽 내용중에 태그가 존재하면 그 태그의 결과물이 브라우저 에 표시되는데 <XMP> 태그는 태그마저 해석하지 않고 그대로 화면에 표시해 준다. 비 표준 태그 22 / 89

http://www.jobtc.kr ( 5.html 요소) xmp 태그 예제 <!

23 ( 5.html 요소) xmp 태그 예제 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>xmp 태그 예제</title> </head> <BODY bgcolor="#ffffcc" text="#6600cc"> 두눈 크게 뜨고 비교하세요<p> <pre>모양이 <b>그대로라도</b> 할건 합니다. </pre> <xmp>모양도 그대로 <b>문자도</b> 그대로... </xmp> </body> </html> hr <HR/> 수평선을 긋는 효과를 보이지만 html5에서는 section을 구분하는 역활로 그 의미가 바뀌었다. 속성 align= "left center right" : 수평선의 정렬상태 지정. size = n : 수평선의 굵기(픽셀단위) width = n : 수평선의 길이(픽셀단위) noshade : 음영이 없는 수평선. hr 태그 연습 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hr 태그 예제</title> </head> 23 / 89

24 ( 5.html 요소) <BODY bgcolor="#ffffcc" text="#6600cc"> <xmp><hr></xmp> <hr> <xmp><hr size=20></xmp> <hr size=20> <xmp><hr size=20 noshade></xmp> <hr size=20 noshade> <xmp><hr size=40 width="50%" noshade></xmp> <hr size=40 width="50%" noshade> </BODY> </html> br <BR/> 줄을 띄운다. 일반적으로 엔터기능 반복적으로 사용 가능 blockquote <BLOCKQUOTE>... </BLOCKQUOTE> 한 블록을 들여쓰기 한다. blockquote 태그 예제 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>blockquote 태그 예제</title> </head> <BODY bgcolor="#ffffcc" text="#6600cc"> 일반적인 문단입니다. <blockquote>이 문단은 blockquote를 사용하여 들여쓰기된 곳입니다.</blockquote> 일반적인 문단입니다. 24 / 89

http://www.jobtc.kr ( 5.html 요소) </body> </html> 5.3.8. section html5에서 추가된 태그. 문서나 어플리케이션의 영역을 구별하기 위한 태그. 하나의 section안에 여러 개의 article이 존재할 수 있음. section안에 nav, footer등의 요소를 사용할 수 있음.

25 ( 5.html 요소) </body> </html> section html5에서 추가된 태그. 문서나 어플리케이션의 영역을 구별하기 위한 태그. 하나의 section안에 여러 개의 article이 존재할 수 있음. section안에 nav, footer등의 요소를 사용할 수 있음. class나 id를 사용하여 보다 특정한 정보를 넣을 수 있음. h1~h6과 같이 사용할 수 있음. 하나의 섹션안에서는 묵시적으로 제목을 하나만 사용함. 스타일링이나 스크립트를 위해 영역을 나눌때는 사용할 수 없음. 만약 이를 위해 사용하려면 <div> 태그를 사용해야 함. section 예제 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>section</title> </head> <body> <article> <section> <h1>우리나라 명산</h1> <ol> <li>백두산</li> <li>한라산</li> <li>설악산</li> <li>치악산</li> <li>금강산</li> </ol> </section> <section> <h1>우리나라 명천</h1> <ol> 25 / 89

26 ( 5.html 요소) <li>한강</li> <li>두만강</li> <li>금강</li> <li>낙동강</li> <li>소금강</li> </ol> </section> </article> </body> </html> article 고유한 컨텐츠가 포함되어 있는 독립적인 글들을 나타낼 때 사용함. 하나의 article안에 여러 개의 section이 존재할 수 있음. article 예제 <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr"> <title>article 예제</title> </head> <body> <article> <header> 머릿글 </header> <section> 세상사는 이야기 </section> 26 / 89

27 ( 5.html 요소) <footer> 바닥글 </footer> </article> </body> </html> nav 메인 내비게이션 블럭이 들어 있는 section에만 사용. nav 예제 <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>nav 예제</title> </head> <body> <section> <h1>html5의 세계로</h1> <nav> <ul> <li><a href=" Training Center</a></li> <li><a href=" <li><a href=" </ul> </nav> </section> </body> </html> 27 / 89

http://www.jobtc.kr ( 5.html 요소) 5.3.11. header 업체의 로고나, 상호등을 표시 할 때. 굳이 페이지의 상단에 오지 않아도 됨. section, header, footer, nav 요소는 사용해서는 안됨. 5.3.12. aside 주된 내용과 연관되어지는 부수적인 내용을 표시 할 때.(팁, 보충설명등) 속성 5.3.13.

28 ( 5.html 요소) header 업체의 로고나, 상호등을 표시 할 때. 굳이 페이지의 상단에 오지 않아도 됨. section, header, footer, nav 요소는 사용해서는 안됨 aside 주된 내용과 연관되어지는 부수적인 내용을 표시 할 때.(팁, 보충설명등) 속성 align = "left right center" : 내용을 정렬 footer 굳이 문서 끝에만 두는 법은 없다. header, section, 또 다른 footer등을 포함 할 수 있다 html4와 html5의 구성 변화 출처 : 28 / 89

http://www.jobtc.kr ( 5.html 요소) 5.3.15. section과 article section과 article의 차이점 article은 대부분 독립적인 부분을 구성할 때 사용. 독립적인 부분이 하나의 컨텐츠로 만들어질 수 있음. sction은 메뉴, 컨텐츠의 일부분 등이 될 수 있음.

29 ( 5.html 요소) section과 article section과 article의 차이점 article은 대부분 독립적인 부분을 구성할 때 사용. 독립적인 부분이 하나의 컨텐츠로 만들어질 수 있음. sction은 메뉴, 컨텐츠의 일부분 등이 될 수 있음. 따라서 article과 다른게 독립적인 부분이 하 나의 컨텐츠가 될 수도 있지만 그렇지 않을 수도 있음 fieldset 웹페이지의 내용을 그룹화하고 영역을 표시해 준다. <legend/>를 사용하여 그룹화된 내용의 제목을 표시할 수 있다. legend의 주요 속성 align='top bottom left right' 구조 <fieldset> <legend> 제목 </legend> </fieldset> fieldset 예제 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>fieldset 예제</title> </head> <body> <h1>fieldset 예제</h1> <fieldset> 29 / 89

30 ( 5.html 요소) <legend> fielset의 제목 </legend> fieldset으로 구분된 영역의 내용입니다. </fieldset> </body> </html> </body> </html> 5.4. 링크 태그 html언어의 특징중에 하이퍼링크라는 특징이 있다. 이는 현재 문서에서 특정 URL의 특정 문서나 자 기 자신의 특정 위치로 이동할 수 있는 기능을 뜻한다. html의 사용성을 폭발적으로 증가시켰던 가장 중요한 명령중 하나이다 구조 <a href="url" target="position">설명</a> 다른 페이지 링크하기 1) 현재 페이지에 다른 문서 링크하기 <a href=" training center cafe</a> 2) 새페이지에 링크하기 <a href=" target="_blank">야후</a> 3) 다른 프레임에 링크하기 <a href=" target="frame_name">야후</a> 30 / 89

31 ( 5.html 요소) 동일한 문서내 링크하기 4) 동일한 문서내에서 링크하기 - 호출하는 부분 <a href="#call_name">그곳으로</a> - 호출되는 부분 <a name="call_name">이곳입니다.</a> 다른 문서의 특정한곳으로 링크하기 5) 다른 문서의 특정한 곳으로 링크하기 - 호출하는 부분 <a href="this.html#그곳으로 >그곳으로</a> - 호출되는 부분(this.html 문서) <a name="그곳으로 >이곳입니다.</a> 다른 프레임 링크하기 6) 다른 프레임으로 링크하기 - <a href="url" target="frame_name"> frame_name : frame 태그내에 name="frame_name"을 반드시 명기하여야 한다 부모 프레임 유형으로 링크하기 현재 frame을 생성하기전 frame 상태로 연결한다. - <a href="url" target="_parent"> - <a href="url" target="_top"> 이메일 전송창으로 연결 7) 다른 사람의 <a href="mailto:받는사람의 url">내용 </a> 5.5. 이미지 태그 웹 브라우저에 특정이미지를 특정 위치에 표시하거나 이미지의 특정 영역을 지정하여 Hyper Link로 연결할 수 있는 영역을 지정한다. 구조 <IMG src="이미지url" align = "top bottom middle left right" width=n height=n border=n vspace=n hspace=n lowsrc="이미지url" usemap="#맵이름"> 31 / 89

32 ( 5.html 요소) src="이미지 url" 표시할 이미지가 있는 위치를 지정한다. 절대 경로 : 일반적으로 웹상의 가상 디렉토리를 기준으로 한다. 상대경로 : 현재 디렉토리를 기준으로 상대 경로를 찾아 들어간다... : 한단계 상위 디렉토리부터 시작. : 현재 디렉토리부터 시작 [예] 특정 url src = " 절대 경로 src = "/img/test.gif" 상대 경로 src = "../img/test.gif" align align = "left right center" 텍스트나 화면과의 관계에서 이미지의 위치를 나타낸다 width, height 이미지의 크기를 정하는데 픽셀 단위나 비율단위로 정할 수 있다.. 필셀단위 : width="100px" 이미지 넓이는 100 필셀로 비율단위 : width="50%" 화면크기의 50% 크기로 border 이미지의 테두리 두께를 정한다. 이미지의 넓이와 높이 조절 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>image Test</title> </head> <body> <h1>이미지 넓이 높이 조절 예</h1> <h3>원본 이미지</h3> <img src="img.png"><p/> <h3>160 x 240</h3> <img src="img.png" width="160" height="240"><p/> <h3> 80 x 240</h3> <img src="img.png" width="80" height="240"><p/> 32 / 89

33 ( 5.html 요소) <h3>border='40px'</h3> <img src="img.png" border="40px" > <p/> <h3>width='60%' height='200'</h3> <img src="img.png" width="60%" height="200"><p/> <hr/> </body> </html> vspace, hspace 이미지의 외부 여백을 정한다. vspace : 위 아래 여백 hspace : 좌 우 여백 이미지와 텍스트의 조합 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>image Test</title> </head> <body> <h1>이미지와 문단</h1> <h3>기본 유형</h3> <img src="img.png"> 직종은 는 반면 저소득 직종은 준 것으로 나타났다. 자사고가 부유층의 자녀들이 주로 다니는 외국어고처럼 그들만의 리그 가 되는 것 아니냐는 우려가 현실이 되고 있다는 지적이 나온다. 올해 처음으로 자율형 사립고(자사고)로 전환한 서울 지역 13개 고교 신입생의 부모 직업을 조사했더니, <font color="#ff0000"> 일반고 시절 입학한 2학년 학생들과 견줘 고소득 </font> 직종은 는 반면 저소득 직종은 준 것으로 나타났다. 자사고가 부유층의 자녀들이 주로 다니는 외국어고처럼 그들만의 리그 가 되는 것 아니냐는 우려가 현실이 되고 있다는 지적이 나온다. <hr/> <div style='height:300px'> <h3>이미지를 오른쪽 정렬</h3> <img src="img.png" align='right'> 직종은 는 반면 저소득 직종은 준 것으로 나타났다. 자사고가 부유층의 자녀들이 주로 다니는 외국어고처럼 그들만의 리그 가 되는 것 아니냐는 33 / 89

34 ( 5.html 요소) 우려가 현실이 되고 있다는 지적이 나온다. 올해 처음으로 자율형 사립고(자사고)로 전환한 서울 지역 13개 고교 신입생의 부모 직업을 조사했더니, <font color="#ff0000"> 일반고 시절 입학한 2학년 학생들과 견줘 고소득 </font> 직종은 는 반면 저소득 직종은 준 것으로 나타났다. 자사고가 부유층의 자녀들이 주로 다니는 외국어고처럼 그들만의 리그 가 되는 것 아니냐는 우려가 현실이 되고 있다는 지적이 나온다. </div> <hr/> <div style='height:400px'> <h3>이미지 왼쪽 정렬 과 상하좌우여백 조절</h3> <img src="img.png" align="left" hspace="50" vspace="50" > 직종은 는 반면 저소득 직종은 준 것으로 나타났다. 자사고가 부유층의 자녀들이 주로 다니는 외국어고처럼 그들만의 리그 가 되는 것 아니냐는 우려가 현실이 되고 있다는 지적이 나온다. 올해 처음으로 자율형 사립고(자사고)로 전환한 서울 지역 13개 고교 신입생의 부모 직업을 조사했더니, <font color="#ff0000"> 일반고 시절 입학한 2학년 학생들과 견줘 고소득 </font> 직종은 는 반면 저소득 직종은 준 것으로 나타났다. 자사고가 부유층의 자녀들이 주로 다니는 외국어고처럼 그들만의 리그 가 되는 것 아니냐는 우려가 현실이 되고 있다는 지적이 나온다. </div> <hr> <div style='height:300px'> <h3>이미지 오른쪽 정렬 과 좌우 여백 조절</h3> <img src="img.png" align="right" hspace="20" > 직종은 는 반면 저소득 직종은 준 것으로 나타났다. 자사고가 부유층의 자녀들이 주로 다니는 외국어고처럼 그들만의 리그 가 되는 것 아니냐는 우려가 현실이 되고 있다는 지적이 나온다. 올해 처음으로 자율형 사립고(자사고)로 전환한 서울 지역 13개 고교 신입생의 부모 직업을 조사했더니, <font color="#ff0000"> 일반고 시절 입학한 2학년 학생들과 견줘 고소득 </font> 직종은 는 반면 저소득 직종은 준 것으로 나타났다. 자사고가 부유층의 자녀들이 주로 다니는 외국어고처럼 그들만의 리그 가 되는 것 아니냐는 우려가 현실이 되고 있다는 지적이 나온다. </div> <hr> </body> </html> 34 / 89

35 ( 5.html 요소) 35 / 89

http://www.jobtc.kr ( 5.html 요소) 5.5.6. lowsrc 이미지의 크기와 해상도를 줄여 미리보기 유형으로 서비스를 재공하기 사용.

이미지의 사이즈가 지정되지 않으면 src에 지정된 이미지의 크기에 맞게 lowsrc의 이미지를 보여 준다. 5.6.

36 ( 5.html 요소) lowsrc 이미지의 크기와 해상도를 줄여 미리보기 유형으로 서비스를 재공하기 사용. lowsrc를 사용하면 먼 저 lowsrc에 지정된 이미지를 브라우저에 나타내고 문서가 다 읽혀지면 src에 지정된 이미지를 화 면에 보여 준다. 이미지의 사이즈가 지정되지 않으면 src에 지정된 이미지의 크기에 맞게 lowsrc의 이미지를 보여 준다 usemap 이미지의 특정 부분을 나누어 하이퍼 링크로 사용하고자 할 때 사용한다. [구조] <img src="이미지 usemap="#맵이름 > : 이미지 맵 정의 <map name="맵이름 > <area shape="shape_type" coords="좌표 href="url"> </map> 36 / 89

37 ( 5.html 요소) shape_type 범위지정을 어떤 모양으로 하는가를 결정한다. SHAPE=CIRCLE, RECT, POLY circle : 원형으로 rect : 사각형으로 poly : 다각형으로 coords 범위를 지정한다. SHAPE="RECT"(사각)일 경우는 COORDS="left-x,top-y,right-x,bottom-y"로 정해지며, SHAPE="CIRCLE"(원)은 COORDS="centre-x, centre-y, radius" SHAPE="POLY"(불규칙)는 COORDS="x1,y1,x2,y2,x3,y3... "로 정해진다. use map 예제 <!doctype html> <HTML> <HEAD> <TITLE>map</TITLE> <meta charset='utf-8'> </HEAD> <BODY style="font-size:30;line-height=12mm"> <h1 align=center>map Share</h1> <hr> <center><img src="zorro.jpg" usemap="#zorro"> </center> <map name="zorro" > <area shape="rect" coords="0,0,400,87" title='상단 부분' href="a.html"> <area shape="rect" coords="0,88,400,174" title="중앙 부분" href="b.html"> <area shape="rect" coords="0,175,400,260" title="하단 부분" href="c.html"> </map> </BODY> </HTML> 37 / 89

http://www.jobtc.kr ( 5.html 요소) 5.7. 목록 태그 목록테그를 사용하게되면 항목이 중간에 삽입되었을 경우 뒤번호 전체를 바꾸지 않아도 된다는 장점이 있다. [구조] <OL>목록에 번호가 붙여진다. <UL> 목록에 기호가 붙여진다.

38 ( 5.html 요소) 5.7. 목록 태그 목록테그를 사용하게되면 항목이 중간에 삽입되었을 경우 뒤번호 전체를 바꾸지 않아도 된다는 장점이 있다. [구조] <OL>목록에 번호가 붙여진다. <UL> 목록에 기호가 붙여진다. <OL> <LI>목록1 <LI>목록1 <LI>목록1 </OL> <UL> <LI>목록1 <LI>목록1 <LI>목록1 </UL> OL <OL start=n type="type"> Ordered List 목록에 번호를 붙여 준다. 실제 목록은 <LI>태그를 사용하여 start 시작 번호를 정한다. type A : 영문자 대문자로 번호를 대신함. a : 영문자 소문자로 번호를 대신함. I : 로마자 대문자로 번호를 대신함. I : 로마자 소문자로 번호를 대신함. 1 : 숫자로 번호를 표시(기본값) UL <UL type="type">unordered List type circle : 속이빈 동그라미 disk : 속이찬 동그라미 square : 속이찬 네모 OL/UL 예제 <!DOCTYPE html> 38 / 89

39 ( 5.html 요소) <html> <head> <meta charset='utf-8'> <title>order/unorder List</title> </head> <body> <section> <header> <h1>order List</h1> </header> <article> <ol> <li>백두산 <li>금강산 <li>설악산 <li>지리산 <li>한라산 </ol> </article> <article> <ol start="5" type="a"> 산이름 <li>백두산 <li>금강산 <li>설악산 <li>지리산 <li>한라산 </ol> </article> <article> <ol start="5" type="i"> 산이름 <li>백두산 <li>금강산 <li>설악산 <li>지리산 <li>한라산 </ol> </article> </section> <hr/> <section> <header> <h1>unorder List</h1> </header> <article> <ul> 과일이름 <li> 수박 <li> 복숭아 <li> 자두 <li> 참외 <li> 사과 <li> 배 </ul> </article> 39 / 89

40 ( 5.html 요소) <article> <ul type="circle"> 과일이름 <li> 수박 <li> 복숭아 <li> 자두 <li> 참외 <li> 사과 <li> 배 </ul> </article> <article> <ul type="square"> 과일이름 <li> 수박 <li> 복숭아 <li> 자두 <li> 참외 <li> 사과 <li> 배 </ul> </article> </section> </body> </html> DL [구조] 40 / 89

41 ( 5.html 요소) <dl> Definition List <dt> ~ </dt> Definition Term(항목명) <dd> ~ </dd> Definition Description(항목설명) </dl> dl 예제 <!doctype html> <HTML> <HEAD> <TITLE> dl작성하기 </TITLE> <meta charset='utf-8'> </HEAD> <BODY> <center>dl 작성하기 </center><p> <dl> <dt>서울 <dd>대한민국의 수도. </dt> <dt>파리 <dd>여름에 매우 귀찮다. <dd>프랑스의 수도. </dt> </dl> </BODY> </HTML> 5.8. 폼 태그 일반적으로 서버와 정보를 주고 받기 위해 사용하며, 사용자로부터 입력작업이 필요할 경우 사용된 다. 한 문서안에 여러 개의 form을 사용할 수는 있지만, form안에 또다른 form을 넣을 수는 없다. 구조 <form> 하위 태그들... </form> 구조 41 / 89

42 ( 5.html 요소) <form action="서버주소 method="get/post" name="name" target="win_name">... </form> action : 폼안에 들어간 데이터를 수신하게될 서버의주소 target : 서버에서 처리되어 넘어온 데이터를 수신하게될 윈도우 이름 method="get" 데이터 길이에 제한이 있다. 데이터 노출의 위험이 많다. 데이터 값을 임의로 지정할 수 있다. method="post" 데이터 길이에 제한이 없다. 데이터 노출 위험이 적다 input type을 지정하여 값을 입력하거나 버튼을 만들어 낼 수 있음 text <input type="text" value="value" name="name" size="길이 maxlength="최대문자수 > 폼태그를 이용하여 데이터를 입력받는다. size : 입력 박스의 기본 길이를 정한다. maxlength : 입력값의 최대 길이를 정한다. ID <input type="text" name="userid" value="park" maxlength="10"> radio <input type="radio" [checked] value="value" name="name"> checked를 사용하면 기본값으로 특정 부분이 선택되어 표시된다. 특정 부분을 묶어 블록처리를 하려면 name값을 동일하게 처리한다. 성별 <input type="radio" name="gender" value="남자">남자 <input type="radio" name="gender" value="여자">여자 <input type="radio" name="gender" value="혹시">혹시 42 / 89

43 ( 5.html 요소) checkbox <input type="checkbox" [checked] value="value" name="name"> checked를 사용하면 기본값으로 특정 부분이 선택되어 표시된다. 여럭개의 선택 항목을 다중으로 선택하고자 할 때 사용한다. 취미<br/> <input type="checkbox" <input type="checkbox" <input type="checkbox" <br/> <input type="checkbox" <input type="checkbox" <input type="checkbox" name="hobby" value="독서">독서 name="hobby" value="낚시">낚시 name="hobby" value="등산">등산 name="hobby" value="스쿠버">스쿠버 name="hobby" value="글라이딩">글라이딩 name="hobby" value="여행">여행 file <input type="file" name= name" value="value"> 브라우져을 통해 파일을 업로드할수 있도록 파일을 선택하도록 한다. 보안상 초기값은 설정할 수 없다. 실제로 파일을 업로드하기 위해서는 서버스크립트나 외부 API를 사용해야 한다. 사진<br/> <input type="file" name="attach"> password <input type= password" value="value" ="name" size="길이 maxlength="최대문자수 > 문자는 화면에 표시되지 않는다. 암호 <input type="password" name="password" size="8"> 43 / 89

44 ( 5.html 요소) reset <input type="reset" value="value" name="name"> 버튼을 클릭하면 입력폼안에 있는 데이터들이 초기화 된다 button <input type="button" value="value" name="name"> 일반적인 버튼을 만든다 submit <input type="submit" value="value" name="name"> 입력된 데이터들이 action="url"에 지정된 서버로 데이터를 전송한다. 전송형식은 method에 의해서 결정된다. 서버 스크립트가 존재해야 한다. <input type="reset" value="초기화"> <input type="button" value="옵 션"> <input type="submit" value="전 송"> image <input type="image" src=""> 버튼을 이미지로 만들고 기본적인 기능은 submit버튼의 기능을 갖는다 search 현재 크롬과 사파리에서만 필드를 지우는 버튼을 제공한다. <input type= 'search' name= 'search' /> 이 타입에 multiple 논리 속성을 지정하면 콤마로 구분된 여러개의 이메일 주소를 입력할 수 있다. text와 은 사용자 인터페이스에는 시각적으로 차이가 없다. 모바일에선 이메일 입력에 최적화된 키보드를 표시한다. 파폭, 크롭, 오페라에는 오류 메시지도 제공한다. 44 / 89

http://www.jobtc.kr ( 5.html 요소) <input type='email' name='email'> 5.9.12. range 값의 범위를 슬라이더 형태로 표현해줌. <input type='range' min='0' max='10' step='1' value='5'/> min, max : 최소값과 최대값.

45 ( 5.html 요소) <input type=' ' name=' '> range 값의 범위를 슬라이더 형태로 표현해줌. <input type='range' min='0' max='10' step='1' value='5'/> min, max : 최소값과 최대값. step : 슬라이더를 옮겼을 때 이동되는 값. value : 초기값 number 숫자만 입력할 수 있도록 함. 숫자가 아닌 값을 입력하면 자동으로 모두 지워짐. 이동 버튼을 사용할 때는 'min<= x <= max' 범위 이지만 사용자가 직접 입력 할때는 범위를 상관하 지 않음. <input type='number' placeholder='숫자만'> min, max : 최소, 최대값 step : 증감값 date 날짜와 관련한 dialog 창을 생성하여 쉽게 날짜를 선택하도록 함. 날짜 형식이 아니면 자동으로 삭제됨. <input type='date' min=' ' max=' '> min, max : 날짜 최소, 최대값 45 / 89

http://www.jobtc.kr ( 5.html 요소) 5.9.15. time 지정된 시간을 표시하거나 입력할 수 있다. 속성 value="hh:mm:ss" 형태로 지정하며 기본적으로 24시각제를 사용한다. <input type='time' value='11:20:49'> 5.9.16.

46 ( 5.html 요소) time 지정된 시간을 표시하거나 입력할 수 있다. 속성 value="hh:mm:ss" 형태로 지정하며 기본적으로 24시각제를 사용한다. <input type='time' value='11:20:49'> color 색상을 선택할 수 있도록 색상 dialog 를 자동으로 생성. <input type='color' value='#0000'> 5.10.textarea <textarea cols="넓이 rows= 길이 name="name"> 초기 내용 </textarea> 여러줄의 데이터를 손쉽게 입력할수 있다. <textarea></textarea>사이의 어떤 내용이든 초기값으로 인식한다 select <form> <select> <option> 내용 <option> 내용 46 / 89

http://www.jobtc.kr ( 5.html 요소)... </select> </form> select 속성 multiple : list항목을 나열한후 다중 선택을 할수 있게 한다. size : 화면에 기본적으로 표시하게될 list의 길이 name : Select의 이름 align : left/center/right버튼의 위치를 지정한다.

47 ( 5.html 요소)... </select> </form> select 속성 multiple : list항목을 나열한후 다중 선택을 할수 있게 한다. size : 화면에 기본적으로 표시하게될 list의 길이 name : Select의 이름 align : left/center/right버튼의 위치를 지정한다. option Select 태그 안에서 사용되어지며 실제 목록을 나열할 때 사용한다. option 속성 selected : 기본적으로 선택하게될 list value : 스크립트에 전달할 실제 값 직종 <select name="job" size="6" multiple="multiple"> <option value="학생">학생 <option value="농업">농업 <option value="상업">상업 <option value="공업">공업 <option value="서비스">서버스 <option value="공무원">공무원 <option value="일반인">일반인 </select> 5.12.datalist 항목을 더블클릭하거나 일정 앞 단어와 일치하면 관련 내용을 보여줌. 하위 태그인 option을 사용하여 목록을 나열함. <label>homepage: <input name=hp type=url list=homepagelist> </label> <datalist id=homepagelist> 47 / 89

http://www.jobtc.kr ( 5.html 요소) <option value="http://www.google.com/" label="google"> <option value="http://www.naver.com/" label="네이버"> <option value="http://www.jobtc.kr/" label="jobtc.

48 ( 5.html 요소) <option value=" label="google"> <option value=" label="네이버"> <option value=" label="jobtc.kr"> </datalist> 5.13.details 항목들을 감추었다가 해당 항목을 클릭하면 세부 내용을 보여줌. 크롬에서만 구현됨. summary 태그에 의해 세부 요약을 표현할 수 있음. 속성 open = boolean <details> <summary>name & Extension:</summary> <p><input type=text id="fn" name="fn" value="pillar Magazine.pdf" /></p> <p><input type="checkbox" name="ext" checked="checked" /> Hide extension</p> </details> 5.14.meter progress 와 기능이 유사 속성 min, max : 최소 값, 최대 값. value : 현재 값 48 / 89

49 ( 5.html 요소) <meter value=10 mix=0 max=100 >나머지 용량 10%</meter> 5.15.output 계산된 결과등을 출력할 사용. 자리만 차지하고 UI는 표시되지 않음. function sum(){ ff = document.ff; ff.x.value=parseint(ff.a.value)+parseint(ff.b.value) + parseint(ff.c.value); } <form name='ff' oninput="sum()"> <input type="range" name="a" value="50"> + <input type="number" name="b" value="50"> + <input type="number" name="c" value="50"> = <output name="x" ></output> </form> 5.16.progress 진행 상태를 바로 나타냄. meter 태그와 유사함. 속성 max=n : value=초기값; <progress id="p" max="100" value='10'>진행.</progress> 5.17.optgroup select의 option 부분을 그룹지어 표시 할 수 있음. 49 / 89

http://www.jobtc.kr ( 5.html 요소) <p>html5 과정 <p><label>course: <select name="c"> <optgroup label="1. HTML5"> <option value="1.1">lecture 01: HTML 역사</option> <option value="1.

50 ( 5.html 요소) <p>html5 과정 <p><label>course: <select name="c"> <optgroup label="1. HTML5"> <option value="1.1">lecture 01: HTML 역사</option> <option value="1.2">lecture 02: HTML 구조</option> <option value="1.3">lecture 03: HTML 미래</option> </optgroup> <optgroup label="2. JavaScript"> <option value="2.1">lecture 01: Javascript 제어문</option> <option value="2.2">lecture 02: Javascript 함수</option> <option value="2.3">lecture 03: Javascript 이벤트</option> </optgroup> <optgroup label="3. CSS"> <option value="3.1">lecture 01: CSS가 뭐죠???</option> <option value="3.2">lecture 02: CSS와 자바스크립트</option> <option value="3.3">lecture 03: CSS 활용하기</option> </optgroup> </select> </label> 5.18.테이블 태그 틀을 만들어 주는 태그. 50 / 89

51 ( 5.html 요소) 웹표준에서는 전체 레이아웃을 만들때 사용해서는 안됨. 구조 <table> <tr> 행 생성 <td> 칸 생성</ td> </tr> </table> <table> align 테이블의 정렬 방법 bgcolor 테이블 내의 배경색 border 경계선의 두께 background 테이블내의 이미지 cellpadding 경계선과 셀내의 문자와의 간격 cellspacing 셀과 셀 사이의 여백 height 테이블의 높이 width 테이블의 넓이 bordercolor 경계선의 색상 bordercolorlight 경계선의 밝은 부분의 색상 bordercolordark 경계선의 어두운 부분의 색상 frame void : 기본형식 above : 위쪽선만 표시 below : 아랫쪽선만 표시 lhs : 왼쪽 rhs : 오른쪽 hsides : 상하 vsides : 좌우 box or border : 상하좌우 <tr> 하나의 행을 생성한다. (</tr>은 생략가능함) align center / left / rigth좌우 정렬 방식 지정 valign baseline / bottom / top /middle수직 정렬 방식 지정 bgcolor 줄의 배경색 지정 height 행의 높이를 조정하며 가강 큰 크기에 영향을 받는다. background 행 배경 이미지를 선언하며 NE 전용이다 <td> 하나의 셀을 만든다.(</td> 생략가능) align center / left / right /justify(ne전용)내용의 좌우 정렬을 지정 valign top / middle / bottom내용의 상하 정렬을 지정 51 / 89

52 ( 5.html 요소) bgcolor 셀의 배경색 colspan 지정된 개수 만큼 셀을 열로 합친다. rowspan 지정된 개수 만큼 셀을 열로 합친다. height 셀의 높이를 지정 width 셀의 넓이를 지정 background cell에 이미지 삽입 nowrap 문장을 자동으로 워드랩을 하지 않는다. 특징 : <tr>에서 지정된 것보다 우선권을 갖는다 <th> (Table Heading) 테이블의 머리말을 지정하여 표시한다. 볼드체이며 중앙정렬이 기분이다. align left / right / center valign bottom / top / middle bgcolor 바탕색 지정 [예1] 한칸의 테이블을 만들어 보자. 한칸 만들기 <table border=1> <tr> <td> 한칸 </td> </tr> </table> [예2] 행 병합하기 행 병합 <table border=1 width=100> <tr> <td rowspan=2> A </td> <td> B </td> </tr> <tr> <td> C </td> </tr> 52 / 89

53 ( 5.html 요소) </table> [예3] 열 병합하기 열 병합하기 <table border=1 width=100> <tr> <td colspan=2> A </td> </tr> <tr> <td> B </td> <td> C </td> </tr> </table> [예4] 셀 배경색 지정하기 셀 배경색 <table border=1 width=100> <tr> <td bgcolor="#ff9900"> A </td> <td bgcolor="#009900"> B </td> </tr> <tr> <td> C </td> <td> D </td> </tr> </table> [예5] 문자열 정렬과 테두리 설정 문자열 정렬과 테두리 색상 <table border=1 width=100 bordercolor="#ff0000"> 53 / 89

54 ( 5.html 요소) <tr> <td align="right"> A </td> <td> B </td> </tr> <tr align="center" bordercolor="#006600"> <td> C </td> <td> D </td> </tr> </table> [예6] 테두리 선 두께 조절과 셀 여백 지정 테두리 두께와 셀 여백 <table width=150 bordercolor="#ff0000" border=10 cellpadding=40 cellspacing=10> <tr> <td align="right"> A </td> <td> B </td> </tr> <tr align="center"> <td> C </td> <td> D </td> </tr> </table> 5.19.프레임 태그 Frame을 이용하여 화면을 분할하게 되면 이로 인해 필요로하는 파일이 3개 이상 필요한다. 만약 화면을 두 개로 나눈다고 가정했을 때 화면분할 정보를 가지고 있는 파일 1개, 각각 프레임에 들어갈 파일 1개씩... Frame를 나누는 메인 html문서에는 body가 없고 대신 framset으로 대신한다. <frameset rows="30%,*"> <frame scr="url" name="name1"> <frame scr="url" name="name2"> </frameset> <FRAMESET> 속성 : BORDER, BORDERCOLOR, COLS, FRAMESPACING, ROWS cols 화면을 좌우로 나눈다. 54 / 89

55 ( 5.html 요소) rows 화면을 상하로 나눈다. bordercolor 프레임 경계선의 색상을 지정한다. framespacing 프레임 사이의 간격을 조정한다.(실제로는 두께) frameborder yes, no, 0이것은 frame 창의 조절막대 부분을 나타내는 여백의 유무를 정한다.그런데, 이 여백없는 frame창은 IE와 NS가 지원하는 방식이 틀리다.NS에서는 BORDER="0"이 라고 설정하면 되지만, IE는 FRAMEBORDER와 FRAMESPACING을 함께 0으로 하여 야 한다.따라서 다음과 같이 하여야 두 브라우저를 동시에 만족하는 여백없는 frame창 을 만들 수 있다.<FRAMESET FRAMEBORDER="0" FRAMESPACING="0" BORDER="0" COLS="150,*" > 예) 화면을 좌우로 분할하기 <frameset cols= 30%,* /> : 좌우로 30% : 70%로 나뉜다. * : 나머지 부분 모두를 뜻한다. %를 쓰지 않으면 크기가 pixel 단위로 분할된다. 예) 화면을 상하로 분할하기 <frameset rows= 30%,* /> : 상하로 30% : 70%로 나뉜다 <FRAME> 속성 : FRAMEBODER, FRAMSPACING, MARGINHEIGHT, MARGINWIDTH, NORESIZE, SCROLLING, SRC src 출력할 문서 url scrooling yes, no, auto스크롤바의 생성 유무 noresize 창의 크기 조절을 불가능하게 함 <IFrame> 웹 페이지의 일정 영역을 논리적인 영역으로 나누어 다른 웹페이지를 로딩 할 수 있다. 구조 <iframe> 메시지 </iframe> "메시지"는 iframe를 실행할 수 없는 브라우저에 나타나는 내용이다. 속성 name 이름 scrolling yes/no/auto스크롤바 생성 유무 frameborder 1/0프레임 테두리의 생성 유무 src 페이지의 주소 사용예 1) <iframe src=" 브라우저 전용입니다.</iframe> 사용예 2) 55 / 89

56 ( 5.html 요소) <html> <head> <title> IFrame Example </title> </head> <body> <iframe width=100% height=300 name="if"></iframe><br> <a href=" target="if">job training center 홈</a> <a href=" target="if">네이버</a> </body> </html> 5.20.멀티미디어 태그 웹 브라우저에 동영상등 멀티 미디어 정보를 표시할 때 사용하는 태그 Applet 속성 code 자바 애플릿 파일 이름을 지정 codebase 자바 애플릿이 있는 디렉토리 지정 archive 자바 애플릿 파일이 포함된 압축파일 이름 지정 alt 풍선메뉴 align left / right / top / absmiddle / absbottom / texttop / middle / baseline / botttom애플릿 과 주변 텍스트와 정렬 방식 지정 height, width 자바 애플릿 윈도우의 크기 지정 hspace 수직 여백 지정 vspace 수평 여백 지정 mayscript 자바에서 자바 스크립트를 액세스한다는 것을 알려주는 정보 name 자바 객체 이름 [사용예] <table> <tr> <td> <applet code="xyzapp.class" width=270 height=300 codebase="example/applet/"> 56 / 89

57 ( 5.html 요소) <param name=model value="./example/applet/models/hyaluronicacid.xyz"> </applet> <td> <applet code=xyzapp.class width=270 height=300 codebase="example/applet/"> <param name=model value="./example/applet/models/buckminsterfullerine.xyz"> </applet> </table> 위의 예제는 실제 자바 클래스 파일이 존재해야 실행 결과를 볼 수 있습니다 embed src 삽입하고자 하는 멀티미디어 파일 url align left / right / top / botttom 주변 텍스트와 정렬 방식 지정 height, width 자바 애플릿 윈도우의 크기 지정 hspace 수직 여백 지정 vspace 수평 여백 지정 name 자바 객체 이름 object 가종 멀티미디어 파일을 링크한다. HTML4.0에서는 <applet>이나 <embed>대신 권장하는 새로운 태그이 다. classid 객체의 url codebase 애플릿 클래스 파일의 url data 객체 데이터의 위치 type 객체의 타입 codetype 객체의 타입 height, width 윈도우의 크기 지정 standby 스텐바이 문자열 usemap 이미지맵의 이름 name 자바 객체 이름 audio 음향에 관련된 파일을 별도의 플러그인 프로그램 없이 재생할 수 있다. <audio src='오디오 파일'></audio> 속성 autoplay = 'autoplay' or '' preload = 'none' or 'auto' or '' controls = 'controls' or '' loop = 'loop' or '' src = 'URL' 예) <audio src='실연.mp3' controls='controls'>오디오파일(실연)</audio> 57 / 89

58 ( 5.html 요소) video <video src='url'>비디오파일</video> 지원 포멧 : mp4, ogg, webm 속성 autoplay = 'autoplay' or '' preload = 'none' or 'auto' or '' controls = 'controls' or '' loop = 'loop' or '' poster = 'URL' width, height muted = 'muted' or '' src = 'URL' 5.21.기타 태그 외부 파일 링크 태그 <LINK REL="가져올 파일의 형태" TYPE="스타일 시트의 타입" HREF="파일의 url" TITLE="formal"> link는 문서의 형태에 일관성을 유지 시키기위해 사용되어지는 대표적인 태그이다. 특정의 내용을 따로 선언 한후 반복적으로 사용하고자 할 때는 이를 이용한다. rel : 가져올 파일의 형태를 지정한다. stylesheet / fontdef type : 스타일 시트의 타입 지정. "text/css" / "text/javascript" <marquee> marquee안에 텍스트는 물론 이미지, 링크등 다양한 속성을 지정하여 흐르게 할 수 있다. 1. 옵션 scrolldelay 스크롤 지연값을 정함 scrollamount 스크롤 이동값을 정함 loop 반복횟수. 생략하거나 infinite이면 무환 반복 hspace/vspace marquee의 바깥쪽 여백 지정 width / height marquee의 크기 지정 direction 이동 방향 지정(left right up down). befavior 2. 사용예 <html> <head></head> 58 / 89

59 ( 5.html 요소) <body> <font style="font-size:200">park</font> <p> <marquee width="415" height="50" scrolldelay="200" behavior="alternate" direction="right" style="position:absolute;left:10;top:15;z-index:0"> <font style="font-size:200;color:#c0c0c0">park</font> </marquee> <p> </body> </html> 59 / 89

60 ( 6.Canvas) 6. Canvas HTML5에 추가된 대표적인 태그 javascript를 통하여 각종 드로잉작업을 할 수 있도록 영역을 만들어 줌 canvas 사용 절차 html에서 <canvas/> 태그 추가 <canvas id= example width="400" height="300" /> 캔버스 객체 얻기 canvas = document.getelementbyid("example"); 캔버스 객체로 부터 렌더링 컨텍스트 얻기 cont = canvas.getcontext("2d"); 컨텍스트의 메서드와 속성을 사용하여 도형 그리기 cont.strokerect(10,10,100,100); 간단 구현예 canvas 예제 <!DOCTYPE html> <html> <head> <title> New Document </title> <script> window.onload=function(){ var canvas = document.getelementbyid("aaa"); var ctx = canvas.getcontext("2d"); ctx.strokestyle = "rgb(255,0,0)"; ctx.strokerect(10,10,100,100); } </script> </head> <body> <canvas id="aaa" width="400px", height="300px"></canvas> 60 / 89

61 ( 6.Canvas) </body> </html> 6.2. 색상 지정 방식 기존 HTML에서 사용하던 방법 #RRGGBB rgb 지정 방식 rgb(rr,gg,bb) rgba 지정 방식 alpha값을 추가하여 투명도를 조절할 수 있는 방법 투명도 : 0.0 ~ 1.0 (0=완전 투명) rgba(rr,gg,bb, aa); 6.3. context 요소 fillstyle 지정된 영역을 색상으로 채운다. fillstyle = '색상' fillstyle 예제 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>fillstyle</title> <script> window.onload = function(){ canvas = document.getelementbyid('canvas'); ctx = canvas.getcontext('2d'); color = 'rgb(255,0,0)'; ctx.fillstyle=color; ctx.fillrect(10,10,100,100); } </script> </head> <body> <canvas id='canvas' width='500' height='400'></canvas> </body> </html> 61 / 89

http://www.jobtc.kr ( 6.Canvas) [실행결과] 6.3.2. strokestyle 선의 색상을 정한다. ctx.strokestyle='색상' strokestyle 예제 <!

62 ( 6.Canvas) [실행결과] strokestyle 선의 색상을 정한다. ctx.strokestyle='색상' strokestyle 예제 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>strokestyle</title> <script> window.onload = function(){ canvas = document.getelementbyid('canvas'); ctx = canvas.getcontext('2d'); color = 'rgb(255,0,255)'; ctx.strokestyle=color; ctx.strokerect(10,10,100,100); ctx.fillrect(50,50,100,100); } </script> </head> <body> <canvas id='canvas' width='500' height='400'></canvas> </body> </html> [실행결과] linewidth 선의 굵기를 지정 linewidth=n 선의 굵기 <!DOCTYPE HTML> 62 / 89

http://www.jobtc.kr ( 6.Canvas) <html> <head> <meta charset="utf-8"> <title>linewidth</title> <script> window.onload=function(){ canvas = document.getelementbyid('canvas'); context = canvas.

63 ( 6.Canvas) <html> <head> <meta charset="utf-8"> <title>linewidth</title> <script> window.onload=function(){ canvas = document.getelementbyid('canvas'); context = canvas.getcontext('2d'); context.fillstyle='rgb(0,0,255)'; context.linewidth='1'; context.strokerect(30,30,100,100); context.linewidth='10'; context.strokerect(80,80,100,100); } </script> </head> <body> <canvas id="canvas" width="400" height="300"></canvas> </body> </html> [실행결과] strokerect 지정된 위치에 사각형을 그린다. 선색은 strokestyle를 사용하여 지정 한다. strokerect(x, y, w, h) 사각형 그리기 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>strokerect</title> <script> window.onload=function(){ canvas = document.getelementbyid('canvas'); context = canvas.getcontext('2d'); context.fillstyle='rgb(0,0,255)'; context.linewidth='1'; context.strokerect(30,30,100,100); context.linewidth='10'; context.strokerect(80,80,100,100); } </script> 63 / 89

64 ( 6.Canvas) </head> <body> <canvas id="canvas" width="400" height="300"></canvas> </body> </html> [실행결과] linewidth 실행결과 참조 fillrect 속이 채워진 사각형을 그린다. fillstyle에 의해서 채월질 색상을 미리 context에 전달해야 한다. fillrect(x, y, w, h) 채워진 사각형 그리기 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>fillstyle</title> <script> window.onload = function(){ canvas = document.getelementbyid('canvas'); ctx = canvas.getcontext('2d'); color = 'rgb(255,255,0)'; ctx.fillstyle=color; ctx.fillrect(10,10,100,100); color = 'rgba(255,0,255,0.5)'; ctx.fillstyle=color; ctx.fillrect(60,60,100,100); } </script> </head> <body> <canvas id='canvas' width='500' height='400'></canvas> </body> </html> [실행결과] beginpath / closepath 시작 선분의 위치와 끝 선분의 위치를 지정함. 64 / 89

65 ( 6.Canvas) 원호(arc)등을 그릴때 선분의 시작과 끝 위치를 변경하여 다양한 모양의 도형을 그릴 수 있음. 선분의 기준 위치는 traslate(x,y)를 사용하여 변경 가능 arc 원호를 그린다. 절차 beginpath() arc(x,y,r,s,e,d) [closepath()] stroke() x, y : 원, 원호의 중점 r : 반지름. s, e : 시작각과 끝각 d : 그려지는 방향(true:반시계방향, false:시계 방향) closepath()는 선택. 원호 패쇄선을 그으려고 할 때 사용. closepath()는 선택적으로 사용할 수 있음. moveto(x,y)를 사용하지 않으면 기본적으로 원의 시작 각 위치에서 선을 그음. [direction 예시] 65 / 89

http://www.jobtc.kr ( 6.Canvas) [월뿔그리기예] ctx = document.getelementbyid("canvas").getcontext('2d'); ctx.linewidth=5; ctx.strokestyle='rgb(255,0,0)'; ctx.

stroke(); [파이그리기 예] ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.linewidth=10; // 첫번째 파이 ctx.beginpath(); ctx.moveto(600,300); ctx.

66 ( 6.Canvas) [월뿔그리기예] ctx = document.getelementbyid("canvas").getcontext('2d'); ctx.linewidth=5; ctx.strokestyle='rgb(255,0,0)'; ctx.fillstyle='rgb(255,200,200)'; ctx.beginpath(); ctx.moveto(250,400); ctx.arc(250,250,100,0,math.pi*1,true); ctx.fill(); ctx.closepath(); ctx.stroke(); [파이그리기 예] ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.linewidth=10; // 첫번째 파이 ctx.beginpath(); ctx.moveto(600,300); ctx.arc(600,300,100,0, Math.PI*1.5, true); ctx.fillstyle='rgba(255,0,0,0.3)'; ctx.fill(); ctx.closepath(); ctx.stroke(); // 두번째 파이 이후엔 변경되는 부분만 기술 ctx.arc(600,300,100,math.pi*1.5, Math.PI*1, true); 66 / 89

67 ( 6.Canvas) ctx.arc(600,300,100,math.pi*1, Math.PI*0.5, true); // 세번째 파이 ctx.arc(600,300,100,math.pi*0.5, Math.PI*2, true); // 네번째 파이 fill 원호의 안쪽을 지정된 색상으로 채운다. context.fillstyle( #ff0000 ); context.fill(); filltext 텍스트 안쪽을 지정된 색상으로 채운다 clearrect 지정된 영역을 지운다. context.clearrect(10,10,300,200) // (10,10)~(300,200)의 영역을 지운다 translate /save /restore translate(x,y) : canvas의 원점을 지정된 위치 x,y 로 이동한다. translatex(v) : x축으로 v 만큼 이동 translatey(v) : y축으로 v 만큼 이동 save() : 현재 원점정보를 저장한다. restore() : save에 의해서 저장된 원점 정보를 되돌란다. 스택구조로 다단계로 사용할 수 있다.  <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>translate</title> <script> window.onload=function(){ canvas = document.getelementbyid('canvas'); ctx = canvas.getcontext('2d'); b = false; ctx.beginpath(); ctx.linewidth='1'; ctx.save(); ctx.strokerect(0,0,100,100); ctx.translate(200,100); ctx.strokerect(0,0,100,100); ctx.restore(); } </script> </head> 67 / 89

68 ( 6.Canvas) <body> <canvas id="canvas" width="400" height="300"></canvas> </body> </html> [결과] 동일한 좌표를 사용하더라도 translate로 기준 좌표를 이동하였기 때문에 도형의 위치가 이동되어 그려졌다 linecap 선의 끝 부분의 모양을 지정한다. 종류 butt(기본값) round square linejoin 선의 꺽이는 부분의 유형을 정함. 종류 68 / 89

http://www.jobtc.kr ( 6.Canvas) miter(기본) bevel round 6.3.14.

shadowcolor='#8080ff;' ctx2.shadowoffsetx='5'; ctx2.shadowoffsety='5'; ctx2.shadowblur='10'; ctx2.

69 ( 6.Canvas) miter(기본) bevel round 그림자 지정 그림자 관련 함수 shadowoffsetx /shadowoffsety shadowblur shadowcolor ctx2.fillstyle='#8000ff'; ctx2.shadowcolor='#8080ff;' ctx2.shadowoffsetx='5'; ctx2.shadowoffsety='5'; ctx2.shadowblur='10'; ctx2.fillrect(10,10,100,100); ctx.shadowoffsetx=15; ctx.shadowoffsety=15; ctx.shadowblur=5; ctx.linewidth='10'; ctx.miterlimit=50.5; ctx.strokestyle='red'; ctx.beginpath(); ctx.moveto(300,30); ctx.lineto(250,100); 69 / 89

70 ( 6.Canvas) ctx.lineto(350,100); ctx.closepath(); ctx.stroke(); gradient 지정된 영역에 선형이나 원형으로 그라디언트를 적용한다. 종류 createlineargradient(x1,y1,x2,y2) : 선형 그라디언트 createradialgradient(x1,y1, r1, x2,y2,r2) : 원형 그라디언트 addcolorstop(offset, color) : 그라디언트 효과를 주기 위한 색상을 추가 한다. addcolostop 의 offset은 0~1까지의 범위이며 1이면 전체 영역을 기준으로 절반 부터 색상이 다음 생상으로 변경되어진다. 다양한 그라디언트 효과 [선형그라디언트] vlinear = ctx.createlineargradient(0,0,500,200); vlinear.addcolorstop(0, '#ff0000'); vlinear.addcolorstop(1, '#0000ff'); vlinear.addcolorstop(0, '#ff0000'); vlinear.addcolorstop(0.5, '#0000ff'); gra = ctx.createlineargradient(0,0, 300,200); gra.addcolorstop(0, 'red'); gra.addcolorstop(.5, 'blue'); gra.addcolorstop(1, 'green'); ctx.fillstyle=gra; ctx.fillrect(10,10,300,200); gra = ctx.createlineargradient(0,0,100,0); gra.addcolorstop(0, '#ff0000'); gra.addcolorstop(0.5, '#ffff00'); gra.addcolorstop(1, '#0000ff'); gra = ctx.createlineargradient(0,0,0,300); 70 / 89

http://www.jobtc.kr ( 6.Canvas) [원형 그라디언트] gra = ctx.createradialgradient(150,100,50, 150,100,200); gra.addcolorstop(0, 'red'); gra.addcolorstop(.5, 'blue'); gra.

scale(1,2) : 세로 2배 확대 context.scale(0.5, 0.5) : 가로, 세로 2배 축소 context.strokestrle='#0000ff'; context.strokerect(0,0,100,100); context.save(); context.

71 ( 6.Canvas) [원형 그라디언트] gra = ctx.createradialgradient(150,100,50, 150,100,200); gra.addcolorstop(0, 'red'); gra.addcolorstop(.5, 'blue'); gra.addcolorstop(1, 'green'); ctx.fillstyle=gra; ctx.fillrect(0,0,300,200); scale 도형의 크기를 확대 또는 축소 한다. context.scale(2,1) : 가로 2배 확대 context.scale(1,2) : 세로 2배 확대 context.scale(0.5, 0.5) : 가로, 세로 2배 축소 context.strokestrle='#0000ff'; context.strokerect(0,0,100,100); context.save(); context.translate(150,100);//원점이동 context.scale(2,2);// 가로세로 2배확대 context.strokerect(0,0,100,100); rotate context의 회전각을 라디안형태로 지정하여 회전 시킨다.(기본값 시계 방향) rad = deg * Math.PI/180 로 계산 71 / 89

72 ( 6.Canvas) canvas = document.getelementbyid('canvas'); ctx = canvas.getcontext('2d'); ctx.linewidth='1'; ctx.strokestyle='#ff0000'; ctx.translate(200,200); cnt = 5;//도형의 개수 for(i=0 ; i<cnt ; i++){ // 도형의 개수에 따라 회전각 조절 ctx.rotate(math.pi/180*(360/cnt)); ctx.strokerect(10,10,70,70); } transform/settransform 변형 행렬을 지정하는 메서드이며 이를 통해 회전, 이동, 확대, 축소등을 정할 수 있다. settransform(m1,,m2,n1, n2, dx, dy) : 기존 설정을 지우고 새롭게 설정 transform(m1, m2, n1, n2, dx, dy) : 기존 설정에 추가 지정 transform을 사용하기 어렵기 때문에 rotate(), translate(), scale()을 별도로 제공한다고 볼 수 있 다 각 인수의 의미는 아래와 같이 행렬과 같다. m1 n1 dx m2 n2 dy / 89

http://www.jobtc.kr ( 6.Canvas) 6.3.19. todataurl 도형이 그려진 canvas를 통째로 복사하여 이미지 파일로 만든다. <!DOCTYPE html > <html> <head> <meta charset="utf-8"> <title>todataurl</title> <script> window.

73 ( 6.Canvas) todataurl 도형이 그려진 canvas를 통째로 복사하여 이미지 파일로 만든다. <!DOCTYPE html > <html> <head> <meta charset="utf-8"> <title>todataurl</title> <script> window.onload=function(){ var canvas = document.getelementbyid('canvas'); var context = canvas.getcontext('2d'); context.fillstyle='#0000ff'; context.fillrect(10,10,100,100); context.font='12pt normal 명조'; context.strokestyle="#ffffff"; context.stroketext('hi joctc', 30,50); document.getelementbyid('imagecopy').onclick=function(){ var img = document.getelementbyid('img'); img.src = canvas.todataurl(); } } </script> </head> <body> <canvas id='canvas' width='300' height='140'></canvas> <hr/> <input type='button' value='이미지로 복사' id='imagecopy'/><br/> <img src='a.png' alt='임시 이미지' id='img'> </body> </html> 73 / 89

74 ( 6.Canvas) drawimage canvas에 이미지를 그린다. img = new Image(); // 이미지 객체 생성 img.src='이미지파일명'; drawimage(img, sx, sy, sw, sh, dx, dy, dw, dh) 74 / 89

75 ( 6.Canvas) 75 / 89

76 ( 6.Canvas) 7. Web Storage 7.1. 필요성 HTTP 프로토콜은 저장성이 없기 때문에 웹 페이지가 갱신되면 현재값을 저장하지 못한다. 따라서 현재값을 저장하여 새로 고쳐진 페이지에 전달하려면 세션이나 쿠키 또는 폼정보에 현재 값을 저장 하여 전달해야 한다. 이런 불편함을 해소할 수 있는 대안이 될 수 있다. 또한 쿠키보다 사용이 간단하다. 데이터를 서버가 아닌 클라이언트에 저장한다.(브라우저가 제공하는 저장공간) 쿠키처럼 HTTP 헤더에 포함되지 않아 응답 속도를 높힐 수 있다 특징 클라이언트-사이드 데이터베이스라 함. key=value 형태로 저장, 수정이 가능함. 단점 : 브라우저가 바뀌면 저장된 데이터를 가져올 수 없다 종류 localstorage 클라이언트 컴퓨터에 저장되며 브라우저를 종료했더라도 추후에 저장된 데이터를 재사용할 수 있다 sessionstorage localstorage와 동일하지만 브라우저를 종료하면 저장된 데이터도 삭제됨. 세션에 저장된 값이 없는 경우 브라우저에 따라 입력 상자의 초기값을 표시해 주기도 함 형식 localstorage.setitem(key, value) 주의 사항 value : 항상 문자열 형식이여야 함. 할당량을 초과하여 오류가 발생할 경우를 대비하여 예외처리. 지원되지 않는 경우를 대비하여 예외처리 해당 브라우저 storage 지원여부 판단 window.localstorage!= null window.sessionstorage!= null typeof(localstorage)!= 'undefined' typeof(sessionstorage)!= 'undefined' 76 / 89

77 ( 7.Web Storage) 7.5. Storage에 Object 처리 자바스크립트 객체 생성 후 데이터 저장 obj = new Object() //객체를 문자열화 o = JSON.stringify(obj) //localstorage에 저장 localstorage.setitem(key, o); localstorage에서 자료 가져옴. obj = localstorage.getitem(key); // 문자열화 되어 있는 객체를 객체화. o = JSON.parse(obj) // 객체 사용 document.write(o.x);// x가 객체내에 있는 변수라면 77 / 89

78 ( 8.GeoLocation) 8. GeoLocation 8.1. 개요 geolocation은 웹상에서 구글맵을 구동시켜주는 새로운 api pc상에서는 구현하기 어려움 gps 센서가 없기 때문 이동시키기 어렵기 때문에 동일한 페이지를 구현하여 모바일폰에서 테스트 가능 8.2. 관련 메서드 navigator.geolocation.getcurrentposition() 현재 위치 정보 취득 navigator.geolocation.watchposition() 정기적으로 위치 정보 감시 navigator.geolocation.clearwatch() 정기적인 감시를 중단. 특이 사항 콜백 함수로서 호출되며 인수 position으로 위치 정보를 전달 안드로이드 1.6은 지원하지 않음 position 속성 position.coords.latitude: 위도 정보 position.coords.longutude: 경도 정보 position.coords.altitude: 고도 정보 position.coords.accuracy: 수평 방향의 오차 position.coords.altitudeaccuracy: 수직 방향의 오차 position.coords.heading: 방향 position.coords.speed: 속도 8.4. 정보 취득 방법 navigator.geolocation.getcurrentposition( 성공시 callback, 실패시 callback, [옵션] ); 옵션의 종류 정밀도 유효시간 위도 경도 정보 확인 78 / 89

79 ( 8.GeoLocation) 8.5. 구글맵 Overlay 위도/경도 좌표로 되어 있는 객체들. 종류 Marker :맵의 특정 위치에 아이콘 이미지를 표시하기 위한 객체 Polyline : 맵에 표시될 직선 좌표 객체 Polygon : 다각형 모양으로 연결된 직선 좌표 객체 Circle : 중심 원의 좌표 객체 Rectangle : 사각형 좌표 객체 InfoWindow : 맵 상단에 팝업풍선 모양으로 내용 표시 사용자 오버레이 <!DOCTYPE html> <html><head><meta charset="utf-8">  <meta name="viewport" content="initial-scale=1.0,user-scalable=no"/>  <script type="text/javascript" src="  <script type="text/javascript"> window.onload = function() { var map_div = document.getelementbyid("map_div"); // 표시 위치 결정 var latlng = new google.maps.latlng( , ); // 지도 표시 var gmap = new google.maps.map( map_div, { zoom:16, center: latlng, maptypeid: google.maps.maptypeid.roadmap }); // 아이콘 표시 var marker = new google.maps.marker({ position: latlng, map: gmap, title: "집합 장소" }); // 아이콘을 클릭했을 때 발생할 이벤트를 설정(리스너 유형) 79 / 89

http://www.jobtc.kr ( 8.GeoLocation) google.maps.event.

80 ( 8.GeoLocation) google.maps.event.addlistener(marker, 'click', function(event) { alert("집합 장소"); }); }; </script> </head> <body>  <div id="map_div" style="width:320px; height:480px;"></div> </body> </html> 80 / 89

81 ( 9.Web Worker) 9. Web Worker 9.1. 개요 웹 브라우저상에서 멀티 스레드를 구현하는 방법 메인 스레드와 변수를 공유할 수 없음.(windows나 document와 같은 화면 렌더링에 관련된 HTML 요소를 변경하는 것은 불가능) 스마트 폰에서는 아직 미 지원.(2012년 현재) 크롬에서는 지원하지 않음(12.10현재). 오페라, 파이어폭스, IE10 지원 9.2. 작성 절차 1) 워커로 실행한 자바스크립트 파일 지정 var worker = new Worker("스크립트파일"); 2) 워커로 부터 메시지 수신 worker.onmessage = callback함수 3) 워커 메시지 송신 postmessage("메시지"); [예]웹워커를 사용한 구구단 <!DOCTYPE HTML > <html> <head> <title> worker main </title> <meta charset='utf-8'> <script> var result; window.onload=function(){ result = document.getelementbyid('result'); //worker 생성 var worker = new Worker('gugudan.js'); // worker에 이벤트 핸들러 추가 worker.onmessage = checkmessage; 81 / 89

82 ( 9.Web Worker) } function checkmessage(ev){ result.innerhtml = ev.data; } </script> </head> <body> <h3>worker 처리 결과</h3> <div id='result'></div> </body> </html> 82 / 89

83 ( 9.Web Worker) 10. Web SQL Database 10.1.개요 html5 에 추가됨 대부분 비동시 시스템으로 운영된다. (non blocking) 리턴값에 의해 데이터를 받지 못한다. 따라서 콜백 함수에 의해 값을 전달하게 된다. HTML을 통해 트랜잭션을 한다. SQL문장은 트랜잭션 외부에서는 실행되지 않는다. 읽고 쓰기 위한 트랜잭션 : transaction() 읽기 전용 트랜잭션 : readtransaction() 데이터를 읽고 쓸때 전체 데이터베이스가 잠긴다. 오류처리를 위한 콜백을 만들어 준다. 현재는 표준화 작업에서 중지된 상태. 다른 대안을 모색중에 있음. 그러나 현재 android/iphone/ipad 에서와 크롬과 사파리에서 모두 사용될 수 있음. console.log(message) 를 사용하여 크롬 콘솔창에 log들을 남길 수 있다 Web Database Open 절차 open opendatabase(db, ver, comment, size,[ballback()]) 데이터베이스 개설을 위한 이름, 버전, 설명, 크기를 정한다. db : 데이터베이스명 ver : 버전명(생략가능) comment : 설명 size : 데이터베이스 크기 (byte단위) window.opendatabase == 'undefined' 라면 해당 브라우저에서는 데이터베이스를 사용할 수 없음 데이터 베이스 사용 가능 여부 체크 데이터 베이스를 연다. wb = opendatabase( ); 오류처리에 대한 callback wb.onerror = function(tx, e){ } 성공했을 경우의 callback wb.onsussess = function(tx, e){ } 83 / 89

84 ( 10.Web SQL Database) 10.3.transaction 절차 wb.transaction(callback, onerror, onsuccess) callback : 트랜잭션 중 실행할 내용 onerror : 에러가 발생했을 때 처리할 내용(생략가능) onsuccess : 트랜잭션이 성공했을 경우(생략가능) 10.4.주요 데이터 유형 integer :정수, 실수 모두 저장됨 text 10.5.sql 실행 절차 트랜잭션 메서드 내부에서 실행 트랜잭션 객체.executeSql(sql, args, onsuccess, onerror) sql : 실행할 sql문장 args : sql에 포함된?를 치환할 값의 배열 onsuccess : 성공했을 경우(생략가능) onerror : 실패했을 경우(생략가능) [예제] <!DOCTYPE HTML> <html> <head> <title> Web Database </title> <meta charset='utf-8'> <style> #result{ border:1px solid #aaaaaa; width:400px; height:100px; overflow:auto;} </style> <script> var rs; var wb; // web sql 지원 여부 판단. window.onload = function(){ rs = document.getelementbyid('result'); if(window.opendatabase == 'undefined'){ alert("web database를 지원하지 않음"); return; } // db 설정 정보 dbname="member"; dbver = 1.0; dbdoc = "member 테스트 db"; dbsize = 5*1024*1024;// 10MB 84 / 89

85 ( 10.Web SQL Database) // db 오픈 wb =opendatabase(dbname, dbver, dbdoc, dbsize, function(db){ rs.innerhtml +='database open success!!!<br/>' }); // // 이벤트 메시지 // wb.dbopensuccess = function(e){ rs.innerhtml+='database open success!!!<br/>'} wb.onerror = function(tx, e){ rs.innerhtml +=(" error!!!!!" + e.message); }; wb.onsuccess = function(tx, e){ rs.innerhtml=(e + "success!!!!"); }; wb.insertsuccess=function(tx, r){ rs.innerhtml+=r.insertid + '번째 저장 OK<br/>'} // 테이블 생성 wb.transaction( function(tx){ var sql = 'create table if not exists member(id integer, irum text, kor integer, mat number)'; tx.executesql(sql); rs.innerhtml+=("member 테이블이 생성됨<br/>"); console.log(sql); } ); } // 데이터 입력 function insert(){ wb.transaction( function(tx){ id = document.getelementbyid("id").value; irum = document.getelementbyid("irum").value; sql = 'insert into member(id, irum, kor, mat) values(?,?, 90.4, 90.5)'; tx.executesql(sql, [id, irum], wb.insertsuccess, wb.onerror); } ); } // 데이터 조회(선택) function select(){ var r = document.getelementbyid("result"); var str = ""; wb.transaction( function(tx){ sql = "select * from member"; tx.executesql(sql,[], function(tx, rs){ for(var i=0 ; i<rs.rows.length ; i++){ var row = rs.rows.item(i); str += row.id + " " + row.irum + " " + row.kor 85 / 89

모두 보기

HTML5

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