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

Size: px
Start display at page:

Download "() HTML5 훈련교사 박원기 1 / 64"

Transcription

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

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 2 / 64

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

4 ( 2.브라우저별 점유율 추이) 2. 브라우저별 점유율 추이 분석 관련 사이트 : 부라우저별 세계 추이 2.2. 브라우저별 국내 추이 4 / 64

5 ( 2.브라우저별 점유율 추이) 2.3. 브라우저별 미국 추이 5 / 64

6 ( 2.브라우저별 점유율 추이) 2.4. 브라우저별 일본 및 중국 추이 일본 중국 2.5. 브라우저별 인도 추이 6 / 64

7 ( 2.브라우저별 점유율 추이) 2.6. 모바일 브라우저 세계 추이 2.7. 국내 모바일 브라우저 추이 7 / 64

8 ( 2.브라우저별 점유율 추이) 8 / 64

9 ( 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를 홍보하기 시작한 때 부터일 것이다. 9 / 64

10 ( 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 10 / 64

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

12 ( 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 컨텐츠의 분류 12 / 64

13 ( 4.HTML 기본 골격) 4.4. html문서의 주소 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문서의 시작을 알려준다. 종료태그인 을 문서의 마지막에 기술한다 <head>... </head> html문서의 헤드 부분을 나타내며 문서가 웹 브라우저에 표시되기전에 읽혀진다. 가장 많이 사용되 는 하위 태그로는 <title>과 <meta>태그가 있다 <title>... </title> 문서의 제목을 나타내며 웹 브라우저의 제목표시줄에 표시된다 <meta>... </meta> 일종의 HTML문서의 정보를 담아두는 요소를 정의할 때 쓰이는 태그 보통 HTML문서의 레이아웃에 직접적인 역할(즉 브라우저상에 보여지게 하는 역할을 하는 태그가 13 / 64

14 ( 4.HTML 기본 골격) 아니다라는 뜻)을 하는 태그는 아님. 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> 14 / 64

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

16 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> 16 / 64

17 <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> 17 / 64

18 <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> 18 / 64

19 <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> mark 글자에 형광 효과를 준다. 19 / 64

20 5.3. 문단 모양 태그 종류 p div pre xmp hr br blockquote section article nav header aside footer <P align = "left center right">... </P> 문단과 문단을 분리하여 표시한다. align : 문단의 정렬 방식을 정한다. 표함되어 있는 각종 태그는 번역되어 그 결과가 표시된다. <p/>만을 사용하여 단독으로 사용될 수 있다. 이때 주의할 사항은 반복사용하여도 하나밖에 인식하 지 않는다. p 태그 예제 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>p 태그 예제</title> </head> <BODY bgcolor="#ffffcc" text="#6600cc"> 두 문단 위 아래에 여백이 있음을 유념하세요. <p>첫번째 문단</p> <p>두번째 문단</p> </body> <DIV align = "left center right">... </DIV> <P>태그와 그 기능이 동일하지만 문단과 문단을 분리하여 빈 줄은 만들어 내지 않는다. 레이어 의미로 가장 많이 사용됨. 반복 사용하여도 인식하지 않는다. div 태그 예제 20 / 64

21 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>div 태그 예제</title> </head> <BODY bgcolor="#ffffcc" text="#6600cc"> 두 문단 위 아래에 여백이 생기지 않습니다. <div>첫번째 문단</div> <div>두번째 문단</div> </body> <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> 21 / 64

22 <XMP>... </XMP> 일반적으로 문단을 만드는 태그들의 안쪽 내용중에 태그가 존재하면 그 태그의 결과물이 브라우저 에 표시되는데 <XMP> 태그는 태그마저 해석하지 않고 그대로 화면에 표시해 준다. 비 표준 태그 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> <HR> 수평선을 긋는 효과를 보이지만 html5에서는 section을 구분하는 역활로 그 의미가 바뀌었다. 22 / 64

23 속성 align= "left center right" : 수평선의 정렬상태 지정. size = n : 수평선의 굵기(픽셀단위) width = n : 수평선의 길이(픽셀단위) noshade : 음영이 없는 수평선. hr 태그 연습 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hr 태그 예제</title> </head> <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> <BR> 줄을 띄운다. 일반적으로 엔터기능 반복적으로 사용 가능. 23 / 64

24 <BLOCKQUOTE>... </BLOCKQUOTE> 한 블록을 들여쓰기 한다. blockquote 태그 예제 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>blockquote 태그 예제</title> </head> <BODY bgcolor="#ffffcc" text="#6600cc"> 일반적인 문단입니다. <blockquote>이 문단은 blockquote를 사용하여 들여쓰기된 곳입니다.</blockquote> 일반적인 문단입니다. </body> 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> 24 / 64

25 <section> <h1>우리나라 명산</h1> <ol> <li>백두산</li> <li>한라산</li> <li>설악산</li> <li>치악산</li> <li>금강산</li> </ol> </section> <section> <h1>우리나라 명천</h1> <ol> <li>한강</li> <li>두만강</li> <li>금강</li> <li>낙동강</li> <li>소금강</li> </ol> </section> </article> </body> article 고유한 컨텐츠가 포함되어 있는 독립적인 글들을 나타낼 때 사용함. 하나의 article안에 여러 개의 section이 존재할 수 있음. article 예제 25 / 64

26 <!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> <footer> 바닥글 </footer> </article> </body> 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=" 26 / 64

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

28 html4와 html5의 구성 변화 출처 : section과 article section과 article의 차이점 article은 대부분 독립적인 부분을 구성할 때 사용. 독립적인 부분이 하나의 컨텐츠로 만들어질 수 있음. sction은 메뉴, 컨텐츠의 일부분 등이 될 수 있음. 따라서 article과 다른게 독립적인 부분이 하 나의 컨텐츠가 될 수도 있지만 그렇지 않을 수도 있음 fieldset 웹페이지의 내용을 그룹화하고 영역을 표시해 준다. <legend/>를 사용하여 그룹화된 내용의 제목을 표시할 수 있다. 28 / 64

29 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> <legend> fielset의 제목 </legend> fieldset으로 구분된 영역의 내용입니다. </fieldset> </body> </body> 5.4. 링크 태그 html언어의 특징중에 하이퍼링크라는 특징이 있다. 이는 현재 문서에서 특정 URL의 특정 문서나 자 29 / 64

30 기 자신의 특정 위치로 이동할 수 있는 기능을 뜻한다. html의 사용성을 폭발적으로 증가시켰던 가장 중요한 명령중 하나이다 구조 <a href="url" target="positon">설명</a> 다른 페이지 링크하기 1) 현재 페이지에 다른 문서 링크하기 <a href=" training center cafe</a> 2) 새페이지에 링크하기 <a href=" target="_blank">야후</a> 3) 다른 프레임에 링크하기 <a href=" target="frame_name">야후</a> 동일한 문서내 링크하기 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"> 30 / 64

31 - <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="#맵이름"> 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% 크기로 31 / 64

32 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/> <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> vspace, hspace 이미지의 외부 여백을 정한다. vspace : 위 아래 여백 hspace : 좌 우 여백 이미지와 텍스트의 조합 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>image Test</title> </head> 32 / 64

33 <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'> 직종은 는 반면 저소득 직종은 준 것으로 나타났다. 자사고가 부유층의 자녀들이 주로 다니는 외국어고처럼 그들만의 리그 가 되는 것 아니냐는 우려가 현실이 되고 있다는 지적이 나온다. 올해 처음으로 자율형 사립고(자사고)로 전환한 서울 지역 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> 직종은 는 반면 저소득 직종은 준 것으로 나타났다. 자사고가 부유층의 자녀들이 주로 다니는 외국어고처럼 그들만의 리그 가 되는 것 아니냐는 우려가 현실이 되고 있다는 지적이 나온다. 33 / 64

34 </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> 34 / 64

35 lowsrc 이미지의 크기와 해상도를 줄여 미리보기 유형으로 서비스를 재공하기 사용. 35 / 64

36 5.6. usemap 이미지의 특정 부분을 나누어 하이퍼 링크로 사용하고자 할 때 사용한다. [구조] <img src="이미지 usemap="#맵이름 > : 이미지 맵 정의 <map name="맵이름 > <area shape="shape_type" coords="좌표 href="url"> </map> 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> 36 / 64

37 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 : 속이찬 네모 37 / 64

38 OL/UL 예제 <!DOCTYPE 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> 사과 38 / 64

39 <li> 배 </ul> </article> <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> 39 / 64

40 DL [구조] <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> 40 / 64

Javascript

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

More information

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

( 1.인터넷과 HTML의 개요) 1. 인터넷과 HTML의 개요 1.1. 불의 사용과 웹의 전파 불과 인류 인류 : 약 200만년전에 출현 인류의 불 흔적 : 약 100만년전 현인류 : 약 4만년전 지구는 4번의 빙하기와 http://www.jobtc.kr () HTML5 훈련교사 박원기 hipwg@naver.com http://www.jobtc.kr 1 / 89 http://www.jobtc.kr ( 1.인터넷과 HTML의 개요) 1. 인터넷과 HTML의 개요 1.1. 불의 사용과 웹의 전파 1.1.1. 불과 인류 인류 : 약 200만년전에 출현 인류의 불 흔적 : 약 100만년전

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

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

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

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

쉽게 풀어쓴 C 프로그래밍

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

More information

네트워크 명령 실습

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

More information

미쓰리 파워포인트

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

More information

PowerPoint 프레젠테이션

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

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

Week8-Extra

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

More information

PowerPoint 프레젠테이션

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

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

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

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

Microsoft PowerPoint HTML.ppt

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

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

SIGIL 완벽입문

SIGIL 완벽입문 누구나 만드는 전자책 SIGIL 을 이용해 전자책을 만들기 EPUB 전자책이 가지는 단점 EPUB이라는 포맷과 제일 많이 비교되는 포맷은 PDF라는 포맷 입니다. EPUB이 나오기 전까지 전 세계에서 가장 많이 사용되던 전자책 포맷이고, 아직도 많이 사 용되기 때문이기도 한며, 또한 PDF는 종이책 출력을 위해서도 사용되기 때문에 종이책 VS

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

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

More information

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

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

More information

e-비즈니스 전략 수립

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

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

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을 동 향 제 23 권 5호 통권 504호 HTML5가 웹 환경에 미치는 영향 이 은 민 * 16) 1. 개 요 구글(Google)은 2010년 5월 구글 I/O 개발자 컨퍼런스에서 HTML5를 통해 플러 그인의 사용이 줄어들고 프로그램 다운로드 및 설치가 필요 없는 브라우저 기반 웹 플랫폼 환경이 점차 구현되고 있다고 강조했다. 그리고 애플(Apple)은 2010년

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

1809_2018-BESPINGLOBAL_Design Guidelines_out

1809_2018-BESPINGLOBAL_Design Guidelines_out 베스핀글로벌 디자인 가이드라인 베스핀글로벌은 경험과 기술을 바탕으로 고객에게 신뢰를 주는 기업이기를 지향합니다. 모든 서비스와 소통채널에서 우리의 가치를 일관되게 표현하도록 합니다. SIGNATURE SIGNATURE + SLGAN SIGNATURE [CHINA] SIGNATURE + SYMBL 2018년 1.ver 베스핀글로벌 디자인 가이드라인 디자인 가이드라인을

More information

네트워크 명령 실습

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

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

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

쉽게 풀어쓴 C 프로그래밍

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

More information

(Microsoft PowerPoint \277\243\305\315\307\301\266\363\300\314\301\356 \260\374\301\241\300\307 HTML5)

(Microsoft PowerPoint \277\243\305\315\307\301\266\363\300\314\301\356 \260\374\301\241\300\307 HTML5) - W3C 가개발중인차세대 HTML 표준, HTML5 - 엔터프라이즈관점의 HTML5 2 HTML5 관련최근주요업계동향은? HTML5 vs (Flash vs Silverlight) 3 4 5

More information

SBR-100S User Manual

SBR-100S User Manual ( 1 / 13 ) SBR-100S 모델에 대한 사용자 펌웨어 업그레이드 방법을 안내해 드립니다. SBR-100S 는 신규 펌웨어가 있을시 FOTA(자동업데이트) 기능을 통하여 자동 업그레이드가 되며, 필요시 사용자가 신규 펌웨어를 다운받아 수동으로 업그레이드 할 수 있습니다. 1. 준비하기 1.1 연결 장치 준비 펌웨어 업그레이드를 위해서는 SBR-100S

More information

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

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

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

예스폼 프리미엄 템플릿

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

More information

HTML5 인터넷보충학습자료 (2014) 1 강. HTML5 알아보기 1 강. HTML5 알아보기 1. HTML5 개요 1.1 HTML Ÿ HTML(HyperText Markup Language) 월드와이드웹 (World Wide Web) 에서사용하는마크업언어 인터넷망

HTML5 인터넷보충학습자료 (2014) 1 강. HTML5 알아보기 1 강. HTML5 알아보기 1. HTML5 개요 1.1 HTML Ÿ HTML(HyperText Markup Language) 월드와이드웹 (World Wide Web) 에서사용하는마크업언어 인터넷망 1. HTML5 개요 1.1 HTML HTML(HyperText Markup Language) 월드와이드웹 (World Wide Web) 에서사용하는마크업언어 인터넷망에서사용하는웹페이지구조를표한하기위한언어 마크업 (Markup) 언어마크업 ( 태그, 문서의구조와내용에추가적인정보를부여하기위해삽입되는일련의문자또는기호 ) 의형식과규칙을정의한언어 문서내용자체에대한정보가아닌이들이어떻게배치되고어떠한크기와모양등을가지는지에대한정보를표현하기위한언어

More information

2009년 상반기 사업계획

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

More information

컴퓨터프로그래밍 - HTML

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

More information

<3036B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770>

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

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

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

슬라이드 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

"Responsive web design" ( 우리회사웹사이트반응형으로리모델링하기 ) 정찬명

Responsive web design ( 우리회사웹사이트반응형으로리모델링하기 ) 정찬명 "Responsive web design" ( 우리회사웹사이트반응형으로리모델링하기 ) 정찬명 Episode1: 우리사장님 http://www.nhncorp.com/nhn/index.nhn PC Mobile http://recruit.nhncorp.com/main/recruit_ing.jsp PC Mobile 기존모바일웹의문제 PC 웹과모바일웹을따로제작. 모바일브라우저로접속시모바일웹페이지로

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

아이콘의 정의 본 사용자 설명서에서는 다음 아이콘을 사용합니다. 참고 참고는 발생할 수 있는 상황에 대처하는 방법을 알려 주거나 다른 기능과 함께 작동하는 방법에 대한 요령을 제공합니다. 상표 Brother 로고는 Brother Industries, Ltd.의 등록 상

아이콘의 정의 본 사용자 설명서에서는 다음 아이콘을 사용합니다. 참고 참고는 발생할 수 있는 상황에 대처하는 방법을 알려 주거나 다른 기능과 함께 작동하는 방법에 대한 요령을 제공합니다. 상표 Brother 로고는 Brother Industries, Ltd.의 등록 상 Android 용 Brother Image Viewer 설명서 버전 0 KOR 아이콘의 정의 본 사용자 설명서에서는 다음 아이콘을 사용합니다. 참고 참고는 발생할 수 있는 상황에 대처하는 방법을 알려 주거나 다른 기능과 함께 작동하는 방법에 대한 요령을 제공합니다. 상표 Brother 로고는 Brother Industries, Ltd.의 등록 상표입니다. Android는

More information

Web Scraper in 30 Minutes 강철

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

More information

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

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

More information

PowerPoint 프레젠테이션

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

More information

PowerPoint 프레젠테이션

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

More information

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

More information

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

Microsoft PowerPoint - ch02_인터넷 이해와 활용.ppt

Microsoft PowerPoint - ch02_인터넷 이해와 활용.ppt 컴퓨터 활용과 실습 원리를 알면 IT가 맛있다 chapter 2. 윈도우XP, 한글25, 엑셀23, 파워포인트23 인터넷 이해와 활용 www.hanb.co.kr -1- 학습목표 목차 통신과 네트워크의 개념 통신과 네트워크 컴퓨터 통신망 인터넷정의및역사 인터넷주소체계 인터넷 정의와 역사 인터넷 주소 웹서비스의정의및특징 웹 서비스 웹 브라우저의 기능 웹 브라우저

More information

리포트_23.PDF

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

More information

歯

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

More information

<4D6963726F736F667420506F776572506F696E74202D2030342E20C0CEC5CDB3DD20C0C0BFEB20B9D720BCADBAF1BDBA20B1E2BCFA2831292E70707478>

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

More information

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

WebRTC 플러그인이 필요없는 웹폰 새로운 순수 VoIP 클라이언트 기반의 최신 WebRTC 기술은 기존 레가시 자바 클라이언트를 대체합니다. 새로운 클라이언트는 윈도우/리눅스/Mac 에서 사용가능하며 Chrome, Firefox 및 오페라 브라우저에서는 바로 사용이

WebRTC 플러그인이 필요없는 웹폰 새로운 순수 VoIP 클라이언트 기반의 최신 WebRTC 기술은 기존 레가시 자바 클라이언트를 대체합니다. 새로운 클라이언트는 윈도우/리눅스/Mac 에서 사용가능하며 Chrome, Firefox 및 오페라 브라우저에서는 바로 사용이 WebRTC 기능이 채택된 ICEWARP VERSION 11.1 IceWarp 11.1 은 이메일 산업 부문에 있어 세계 최초로 WebRTC 음성 및 비디오 통화 기능을 탑재하였으며 이메일 산업에 있어 최선두의 제품입니다. 기업의 필요한 모든 것, 웹 브라우저 하나로 가능합니다. WebRTC 플러그인이 필요없는 웹폰 새로운 순수 VoIP 클라이언트 기반의 최신

More information

쉽게 풀어쓴 C 프로그래밍

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

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

소규모 비즈니스를 위한 플레이북 여기서 다룰 내용은 다음과 같습니다. 1. YouTube 소개 2. YouTube에서 비즈니스를 위한 채널 만들기 3. 눈길을 끄는 동영상 만들기 4. 고객의 액션 유도하기 5. 비즈니스에 중요한 잠재고객에게 더 많이 도달하기

소규모 비즈니스를 위한 플레이북 여기서 다룰 내용은 다음과 같습니다. 1. YouTube 소개 2. YouTube에서 비즈니스를 위한 채널 만들기 3. 눈길을 끄는 동영상 만들기 4. 고객의 액션 유도하기 5. 비즈니스에 중요한 잠재고객에게 더 많이 도달하기 소규모 비즈니스를 위한 YouTube 플레이북 YouTube에서 호소력 있는 동영상으로 고객과 소통하기 소규모 비즈니스를 위한 플레이북 여기서 다룰 내용은 다음과 같습니다. 1. YouTube 소개 2. YouTube에서 비즈니스를 위한 채널 만들기 3. 눈길을 끄는 동영상 만들기 4. 고객의 액션 유도하기 5. 비즈니스에 중요한 잠재고객에게 더 많이 도달하기

More information

*074-081pb61۲õðÀÚÀ̳ʸ

*074-081pb61۲õðÀÚÀ̳ʸ 74 October 2005 현 대는 이미지의 시대다. 영국의 미술비평가 존 버거는 이미지를 새롭 게 만들어진, 또는 재생산된 시각 으로 정의한 바 있다. 이 정의에 따르 면, 이미지는 사물 그 자체가 아니라는 것이다. 이미지는 보는 사람의, 혹은 이미지를 창조하는 사람의 믿음이나 지식에 제한을 받는다. 이미지는 언어, 혹은 문자에 선행한다. 그래서 혹자는

More information

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

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

More information

C스토어 사용자 매뉴얼

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

More information

슬라이드 1

슬라이드 1 웹프로그래밍소개 류관희 충북대학교 강사소개 충북대학교소프트웨어학과 khyoo@chungbuk.ac.kr 컴퓨터그래픽스및콘텐츠연구실 http://cgac.chungbuk.ac.kr 강의교재 한번에배우는 HTML5+ 자바스크립트, 지닌마이어 ( 김지원옮김 ), 한빛미디어, 2011 HyperText 1965, Nelson HyperCard 1987 Apple 4

More information

슬라이드 1

슬라이드 1 Best Practice of HTML5 Semantic Markup Toby Yun Blog E-mail http://tobyyun.com tobyyun@gmail.com Index 용어정리 시맨틱마크업이란 시맨틱마크업을통해얻을수있는이점 좋은마크업을위한방법들 HTML5의시맨틱요소 HTML5의컨텐츠모델 HTML5 마크업의실제적용 시맨틱웹의과제 용어정리 Element

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 멀티미디어이해와활용 원리를알면 IT 가맛있다 디지털생활과연계된실용학습 - 1 - Chapter 03. 멀티미디어를위한소프트웨어 - 2 - 학습목표 멀티미디어재생을위한컴퓨터에서사용하는재생프로램의종류를알아본다. 멀티미디어의편집을위한전용프로그램에대해알아본다. 인터넷에서멀티미디어를사용할때필요한플러그인을이해한다. 인터넷에서제공되는멀티미디어관련사이트와서비스를이해한다.

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

52 l /08

52 l /08 Special Theme_임베디드 소프트웨어 Special Report 모바일 웹 OS 기술 현황과 표준화 동향 윤 석 찬 다음커뮤니케이션 DNALab 팀장 1. 머리말 디바이스에 애플리케이션을 배포할 수 있다. 본 고에서는 모바일 웹 OS의 현황과 임베디드 환 오늘날 인터넷에서 웹 기반 콘텐츠가 차지하는 부 경에서 채용되고 있는 최적화 기술을 살펴보고, 웹

More information

Windows Live Hotmail Custom Domains Korea

Windows Live Hotmail Custom Domains Korea 매쉬업코리아2008 컨퍼런스 Microsoft Windows Live Service Open API 한국 마이크로소프트 개발자 플랫폼 사업 본부 / 차세대 웹 팀 김대우 (http://www.uxkorea.net 준서아빠 블로그) Agenda Microsoft의 매쉬업코리아2008 특전 Windows Live Service 소개 Windows Live Service

More information

0. 들어가기 전

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

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 4. CSS 스타일시트기초 CSS 의개념 문서의구조 -> HTML 문서의스타일 ->? CSS 의역할 만약 CSS 가없다면 CSS CSS(Cascading Style Sheets): 문서의스타일을지정한다. CSS 의장점 거대하고복잡한사이트를관리할때에필요 모든페이지들이동일한 CSS 를공유 CSS 에서어떤요소의스타일을변경하면관련되는전체페이지의내용이한꺼번에변경

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

사용설명서를 읽기 전에 안드로이드(Android)용 아이디스 모바일은 네트워크 연결을 통해 안드로이드 플랫폼 기반의 모바일 기기에서 장치 (DVR, NVR, 네트워크 비디오 서버, 네트워크 카메라) 에 접속하여 원격으로 영상을 감시할 수 있는 프로그램입니다. 장치의 사

사용설명서를 읽기 전에 안드로이드(Android)용 아이디스 모바일은 네트워크 연결을 통해 안드로이드 플랫폼 기반의 모바일 기기에서 장치 (DVR, NVR, 네트워크 비디오 서버, 네트워크 카메라) 에 접속하여 원격으로 영상을 감시할 수 있는 프로그램입니다. 장치의 사 IDIS Mobile Android 사용설명서 Powered by 사용설명서를 읽기 전에 안드로이드(Android)용 아이디스 모바일은 네트워크 연결을 통해 안드로이드 플랫폼 기반의 모바일 기기에서 장치 (DVR, NVR, 네트워크 비디오 서버, 네트워크 카메라) 에 접속하여 원격으로 영상을 감시할 수 있는 프로그램입니다. 장치의 사양 및 버전에 따라 일부

More information

PowerPoint 프레젠테이션

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

More information

HTML Basic & Advanced

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

More information

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

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

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 1 장. 인터넷과웹환경의발전 목차 1.1 인터넷의역사 1.2 HTML의발전 1.3 인터넷의기본개념 1.4 웹브라우저의종류 소스코드실행사이트 주소 : http://webclass.me/html5_2e 폴더 ch02/ ~ ch14/ 에각장의예제가있어서실행결과확인및소스보기가가능합니다. 1.1 인터넷의역사 1.1.1 인터넷의발전과정 1.1.2

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

쉽게 풀어쓴 C 프로그래밍

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

More information

SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES HTML 연동가이드 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone Fax Co

SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES HTML 연동가이드 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone Fax Co SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES 2012.02.18 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone 02-2108-8030 Fax 02-2108-8031 www.softbase.co.kr Copyright 2010 SOFTBase Inc. All rights reserved 목차 1 장 : HTML 연동개요...

More information

mobile_guide_SA

mobile_guide_SA 네이버 모바일배너 모바일 네트워트 GUIDE AD GUIDE Version 1.0 03. 적용위치 04. Appendix 목차 네이버 모바일배너 개요 1. 텍스트형 광고 2. 이미지형 광고 3. 롤링형 광고 네이버 모바일배너 개요 1. 텍스트형 광고 2. 이미지형 광고 3. 롤링형 광고 01/03 네이버 모바일배너 개요 네이버 모바일배너는 네이버 모바일 서비스

More information

Cookie Spoofing.hwp

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

More information

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

Microsoft Word - ijungbo1_13_02

Microsoft Word - ijungbo1_13_02 [ 인터넷정보관리사필기 ] 기출문제 (11) 1 1. 지금부터인터넷정보관리사필기기출문제 (11) 를풀어보겠습니다. 2. 홈페이지제작할때유의할점으로가장거리가먼것은무엇일까요? 3. 정답은 ( 라 ) 입니다. 홈페이지제작시유의할점으로는로딩속도를고려하며, 사용자중심의인터페이스로제작하고, 이미지의크기는적당하게조절하여야한다. [ 인터넷정보관리사필기 ] 기출문제 (11)

More information

정부3.0 국민디자인단 운영을 통해 국민과의 소통과 참여로 정책을 함께 만들 수 있었고 그 결과 국민 눈높이에 맞는 다양한 정책 개선안을 도출하며 정책의 완성도를 제고할 수 있었습니다. 또한 서비스디자인 방법론을 각 기관별 정부3.0 과제에 적용하여 국민 관점의 서비스 설계, 정책고객 확대 등 공직사회에 큰 반향을 유도하여 공무원의 일하는 방식을 변화시키고

More information

게시판 스팸 실시간 차단 시스템

게시판 스팸 실시간 차단 시스템 오픈 API 2014. 11-1 - 목 차 1. 스팸지수측정요청프로토콜 3 1.1 스팸지수측정요청프로토콜개요 3 1.2 스팸지수측정요청방법 3 2. 게시판스팸차단도구오픈 API 활용 5 2.1 PHP 5 2.1.1 차단도구오픈 API 적용방법 5 2.1.2 차단도구오픈 API 스팸지수측정요청 5 2.1.3 차단도구오픈 API 스팸지수측정결과값 5 2.2 JSP

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 09 장 문서객체모델 1. 문서객체모델관련용어 2. 웹페이지생성순서 3. 문서객체선택 4. 문서객체조작 5. 이벤트 문서객체와문서객체모델의개념을이해한다. 문서객체를선택하고조작할수있다. 이벤트의종류를알아보고문서객체에이벤트를연결해본다. 1 문서객체모델관련용어 문서객체모델 (DOM) Document Object Model 웹브라우저가 HTML 파일을분석하고표시하는방법

More information

01장 웹 개요와 실습 환경 구축

01장 웹 개요와 실습 환경 구축 01 장 웹개요와실습환경구축 목차 1. 인터넷과웹소개 2. 웹의동작원리 3. 보조웹표준기술소개 4. HTML5 주요기능소개 5. 실습환경구축 학습목표 1. 웹의개념과특징을이해한다. 2. 웹의동작원리를이해한다. 3. 대표적인웹표준기술의특징을이해한다. HTML5, CSS3, 자바스크립트 4. 웹프로그래밍을위한개발환경을구축한다. 1. 인터넷과웹소개 인터넷 (Internet)

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

160322_ADOP 상품 소개서_1.0

160322_ADOP 상품 소개서_1.0 상품 소개서 March, 2016 INTRODUCTION WHO WE ARE WHAT WE DO ADOP PRODUCTS : PLATON SEO SOULTION ( ) OUT-STREAM - FOR MOBILE ADOP MARKET ( ) 2. ADOP PRODUCTS WHO WE ARE ADOP,. 2. ADOP PRODUCTS WHAT WE DO ADOP,.

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 CSS 개요 1.1 DHTML(CSS) 란? Dynamic Hyper Text Markup Language 의약자이다. 홈페이지를좀더다이나믹하게만들고자고안해낸방법중하나이다. Nevigator 의 DHTML 은 JSS 라불리고 Explorer 의 DHTML 은 CSS

1 CSS 개요 1.1 DHTML(CSS) 란? Dynamic Hyper Text Markup Language 의약자이다. 홈페이지를좀더다이나믹하게만들고자고안해낸방법중하나이다. Nevigator 의 DHTML 은 JSS 라불리고 Explorer 의 DHTML 은 CSS jtc 와함께하는수월한 DHTML(CSS) http://www.jobtc.kr 훈련교사박원기 1 CSS 개요 1.1 DHTML(CSS) 란? Dynamic Hyper Text Markup Language 의약자이다. 홈페이지를좀더다이나믹하게만들고자고안해낸방법중하나이다. Nevigator 의 DHTML 은 JSS 라불리고 Explorer 의 DHTML 은 CSS

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

Run 봄 연습 Mar 18 Mar 24, 2018, Week 3 문제 1. 초코바 입력 파일: 출력 파일: 시간 제한: 메모리 제한: standard input standard output 1 seconds 128 megabytes H W 격자 모양의 초콜릿이 있다.

Run 봄 연습 Mar 18 Mar 24, 2018, Week 3 문제 1. 초코바 입력 파일: 출력 파일: 시간 제한: 메모리 제한: standard input standard output 1 seconds 128 megabytes H W 격자 모양의 초콜릿이 있다. 문제. 초코바 H W 격자 모양의 초콜릿이 있다. 이 초콜릿을 개의 직사각형으로 격자를 따라서 잘라서, 최대 넓이의 초콜릿과 최소 넓이의 초콜릿의 넓이 차이를 최소화 하고 싶다. 이 차이의 최솟값을 구하여라. 첫째 줄에 H와 W 가 공백으로 구분되어 주어진다. 초콜릿을 개의 직사각형으로 자를 때, 최대 넓이의 초콜릿과 최소 넓이의 초콜릿의 넓이 차이의 최솟값을

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

Microsoft Word - 문필주.doc

Microsoft Word - 문필주.doc 포커스 포커스 모바일 광고기능을 갖는 아이폰 애플리케이션 문필주* 이요섭** 최근의 모바일 광고 시장은 이동통신사 중심의 SMS 발송 형태에서 아이폰의 등장과 앱 스토어(App Store)의 성공에 의한 콘텐츠 내의 플랫폼(App-vertising) 형태로 변해 가고 있다. 본 고에서는 모바일 광 고 아이폰 애플리케이션을 활용할 수 있는 방법에 대해 논의하고자

More information