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

Size: px
Start display at page:

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

Transcription

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

2 Episode1: 우리사장님

3 PC Mobile

4 PC Mobile

5

6 기존모바일웹의문제 PC 웹과모바일웹을따로제작. 모바일브라우저로접속시모바일웹페이지로 redirection. 새로운모바일단말기또는브라우저가나올때마다서버측개발자는새단말기정보를추가한다음이를분기처리.

7 PC Mobile

8 PC Mobile

9 Episode2: 개념탑재

10 " 반응형웹디자인이란?" 사용자환경에따라 유익하게반응하는디자인 사용자환경 = PC, 모바일, OS, 화면크기

11 HTML5 Forms + CSS3 Media Queries Image Replacement Image Sprites

12 " 반응형웹디자인의장점 " 다양한해상도와단말기에서두루 잘보임 신형단말기가등장해도추가대응 필요없음 서버사이드개발이슈가적어투자 대비효율높음

13 " 반응형웹디자인의한계 " PC 와모바일환경을모두고려해야 하기때문에디자이너는성능과타협 할필요가있음 포털사이트와같이복잡하고무거운 사이트는구현이쉽지않음

14 " 반응형으로적합한곳 " 가볍고단순한사이트 블로그, SNS 이벤트페이지 기업홍보사이트

15 " 반응형으로적합하지않은곳 " 무겁고복잡한사이트 대형포털 한국형쇼핑몰 테이블레이아웃

16 Episode4: 현실은달라

17 반응형을고려하여 기초부터튼튼하게 다시짓고싶겠지만

18 " 우리의현실 " 반응형을고려한다고해서처음부터사이트를다시제작하는경우는드물고보통은 PC에최적화된사이트를반응형으로개선

19 Episode5: 가느냐마느냐

20 " 정팀장은분석중..." 우리회사웹사이트는... 가볍고단순한가? 테이블레이아웃인가? 유지보수가유연한구조인가?

21

22 우리회사웹사이트는... 가볍고단순 테이블레이아웃아님 Image Replacement Image Sprite 반응형으로개선하기쉬운체질

23 " 결론, Let's do it!"

24 향후반응형을고려하고있다면 PC 용웹사이트체질개선이선행 2. 테이블레이아웃걷어내기 3. Image Replacement 4. Image Sprite 5. HTML5

25 Episode6: 무엇부터하지?

26 " 그냥미디어쿼리사용하면되 는거아닌가?"

27 " 반응형웹을위한실행순서 " 1. 성능개선 CSS, JS, IMG 파일병합, 모바일용저용량이미지생성 2. HTML HTML5 로전환, 시멘틱마크업, forms 활용 3. CSS 모바일대응위한 CSS3 Media Queries 활용

28 Episode7: 성능개선

29

30 "JS 파일은병합후문서하단으로 " <head> 에서 JS 파일을참조하면 JS 해석이끝날때까지 <img> 파일을로드하지않으므로 JS 파일은 <body> 끝으로옮긴다. http 요청횟수를줄이기위해여러개의 JS 파일을하나로병합한다.

31 "JS 파일은병합후문서하단으로 " 개선전 <head> <script type="text/javascript" src="jquery min.js"></script> <script type="text/javascript" src="jquery-ui custom.js"></script> <script type="text/javascript" src="nhn.js"></script> <script type="text/javascript" src="default.js"></script> <script type="text/javascript" src="lcslog.js"></script> </head> 개선후 <body>... 어쩌구저쩌구... <script type="text/javascript" src="default.js"></script> </body>

32 " 이미지조각모음 " btn_on.gif btn_off.gif btn_over.gif 이렇게조각낸이미지는 http 요청수를 줄이기위해하나로병합한다.

33 " 이미지조각모음 " 개선전 btn_on.gif btn_off.gif btn_over.gif 개선후 btn.gif

34 " 모바일용저용량이미지생성 "

35 " 모바일용저용량이미지생성 "

36 " 동일한이미지로큰것과작은것을준비 한다음 IR 기법으로배경처리하고미디어 쿼리로해상도에따라분기하면모바일에 서큰이미지는전송요청하지않는다. 반 대의경우도마찬가지." ( 화면상으로만숨기는것이아니라실제로 http 요청을하지않음 )

37 Episode8: HTML 고치기

38 "HTML 도반응형?"

39 "HTML5 forms 는반응형 "

40 input type="search" input type="tel" input type="url" input type=" " input type="number"

41 "HTML5 로 DTD 바꾸기 " ( 어렵지않아요 ~)

42 수정전 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " 수정후 <!DOCTYPE html>

43 수정전 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 수정후 <meta charset="utf-8" />

44 수정전 <link rel="stylesheet" type="text/css" href="nhn.css"/> <style type="text/css">...</style> 수정후 <link rel="stylesheet" href="nhn.css"/> <style>...</style>

45 수정전 <script type="text/javascript" src="nhn.js"></script> 수정후 <script src="nhn.js"></script>

46 " 구조를더의미있게 "

47 Before

48 After

49 Before

50 After

51 Episode9: 그런데누구세요?

52 IE6

53 IE7

54 IE8

55 " 누구세요?" header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption

56 낡은브라우저는 HTML5 에새 로등장한태그를인식하지못해 제대로렌더링하지않음.

57 " 철지난브라우저구하기 " HTML5 IE 6~8 enabling script

58 "HTML5 shim" <head> <!--[if lt IE 9]> <script src=" <![endif]--> </head>

59 "IE 조건부주석 " <!--[if lt IE 9]> if lt IE 9 = If less than IE 9 <![endif]--> 표준계열브라우저는이부분을주석으로처리하고 IE9 미만버전의브라우저는포함된내용을해석함. HTML 요소를읽기전에참조해야하므로 <head>...</head> 사이에넣는다.

60 Episode10: 산넘어산

61 "HTML5 shim 적용결과 "

62 IE6

63 IE7

64 IE8

65 " 여전히깨지는이유 " HTML5 enabling script로 HTML 요소를해석했지만새로추가된태그는 'display:inline' 상태로렌더링한다.

66 새로운태그를바르게 표시하는방법

67 "CSS Reset" header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption { display: block }

68 IE6

69 IE7

70 IE8

71 HTML5 shim과 CSS reset을통해더이상낡은브라우저에서깨지지않음

72 Episode11: 너무작거나큰

73 모바일기기에서어떻 게보일까?

74 " 너무작아서보이지않음 "

75 " 화면을크게만들자 "

76 " 너무커서보이지않음 "

77 " 화면을크게만든다음 CSS 를걷어내자 "

78 Episode12: 크게만들기

79 " 모바일뷰포트적용 " <head>...</head>

80 " 모바일뷰포트적용?" 휴대폰해상도와웹페이지 해상도를일치시키는작업.

81 " 모바일뷰포트적용 " <head>...</head>

82 예를들면, 휴대폰해상도는 640px 인데 1024px 웹페이지화면을구 겨넣어보여주려니자글자글 어색함. ( 휴대폰해상도와웹페이지해상도가다름 )

83 그래서, 휴대폰해상도가 640px이면한화면에딱 640px 크기만보여주도록설정하자.

84 " 모바일뷰포트적용?" 휴대폰해상도와웹페이지 해상도를일치시키는작업.

85 <meta name= "viewport" content= "width=device-width, initial-scale=1, inimum-scale=1, maximum-scale=2, user-scalable=yes" />

86 <meta name="viewport" content="width=device-width, initial-scale=1, inimum-scale=1, maximum-scale=2, user-scalable=yes" />

87 Viewport width = "640px" Page width = "320px" " 일단화면을크게만드는데성공 " iphone4 경우 640px 해상도를갖고있어페이지는 640px 크기만큼보일것으로기대했으나실제로는 320px 크기로확대되었음. 기대치보다 2 배확대된것인데이는다른기종에비해해상력 ( 픽셀을더잘게쪼개는능력 ) 이 2 배좋기때문에충분한크기를표시하기위해절충한결과.

88 Episode13: CSS 조건분기

89 좁은화면에서는 CSS 를해석 하지않도록질의설정 CSS Media Queries

90 only all and ( 조건문 ){ 실행문 all and ( 조건문 ){ 실행문 ( 조건문 ){ 실행문 } 위는모두같은표현.

91 "641px (min-width:641px){ /* 뷰포트너비가 641px 이상이면해석 */... body { margin:0 } img { border:0 }... /* 기존의 PC 용 CSS 를이곳에몽땅 */ }

92 " 적용결과 " " 섹시하지만예쁘지는않다 "

93 "CSS 를 완전히벗겨낼수는없다 "

94 "640px 이하 해상도를위한 CSS 를작성하자 "

95 "utf-8"; /* 해상도 640px 이하라면이부분을해석 */ /* 모바일용 CSS 코드를이곳에작성 (min-width:641px){ /* 해상도 641px 이상이면이부분을해석 */ /* 기존의 PC 용 CSS 코드를이곳에몽땅 */ }

96 "utf-8"; img { max-width:100% (min-width:641px){ img { max-width:auto } }

97 before after

98 before after

99 Episode14: Mobile First

100 Quiz: 작은해상도에대응하는모바일용 CSS 코드를조건문안에넣지않은이유는?

101

102

103

104

105

106 Smartphone global market share Q.

107 Answer: 모바일용코드를조건문안에포함하지않는이유는미디어쿼리 (CSS3) 를지원하지않는모바일브라우저에서잘볼수있도록고려하기때문. 미디어쿼리를지원하지않는브라우저는모바일화면이디폴트로표시된다.

108

109 Mobile First

110 Episode15: IE6~8?

111 IE6~8 브라우저는 CSS3 미 디어쿼리지원안함 ( 앗, 그렇다면 IE6~8 브라우저는???)

112

113 respond.min.js

114 HTML5 shim + respond.min.js <head> <!--[if lt IE 9]> <script src=" <script src="respond.min.js"></script> <![endif]--> </head> 주의 : 이파일은 IE 브라우저에서오류가있을수있음

115 Summary: RWD

116 " 반응형웹디자인이란?" 사용자환경에따라 유익하게반응하는디자인

117 " 반응형으로적합한곳 " 가볍고단순한사이트

118 " 향후반응형을고려하고있다면 " PC 용웹사이트체질개선이선행

119 " 반응형웹을위한실행순서 " 1. 성능개선 ( 제일중요 ) 2. HTML5 3. CSS3 Media Queries

120 "HTML5 shim" <head> <!--[if lt IE 9]> <script src=" <![endif]--> </head> HTML5 Markup IE 6~8 지원

121 "CSS Reset" header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption { display: block }

122 <meta name= "viewport" content= "width=device-width, initial-scale=1, inimum-scale=1, maximum-scale=2, user-scalable=yes" />

123 CSS Media "utf-8"; (min-width:641px){ PC... }

124 HTML5 shim + respond.min.js <head> <!--[if lt IE 9]> <script src=" <script src="respond.min.js"></script> <![endif]--> </head> CSS3 Media Queries IE 6~8 지원

125 Thank you. blog: me2day: twitter: facebook: naradesign naradesign naradesign

쉽게 풀어쓴 C 프로그래밍

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

More information

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

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

More information

PowerPoint 프레젠테이션

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

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

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

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

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

Building Mobile AR Web Applications in HTML5 - Google IO 2012

Building Mobile AR Web Applications in HTML5 - Google IO 2012 Building Mobile AR Web Applications in HTML5 HTML5 -, KIST -, UST HCI & Robotics Agenda Insight: AR Web Browser S.M.AR.T: AR CMS HTML5 HTML5 AR - Hello world! - Transform - - AR Events 3/33 - - - (Simplicity)

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

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

More information

쉽게 풀어쓴 C 프로그래밍

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

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 \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

Web Scraper in 30 Minutes 강철

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

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

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

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

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

More information

WEB HTML CSS Overview

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

More information

PowerPoint 프레젠테이션

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

슬라이드 1

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

More information

C H A P T E R 2

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

More information

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

쉽게 풀어쓴 C 프로그래밍

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

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

다른 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

PowerPoint 프레젠테이션

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

More information

슬라이드 1

슬라이드 1 4. Mobile Service Technology Mobile Computing Lecture 2012. 10. 5 안병익 (biahn99@gmail.com) 강의블로그 : Mobilecom.tistory.com 2 Mobile Service in Korea 3 Mobile Service Mobility 4 Mobile Service in Korea 5 Mobile

More information

2009방송통신산업동향.hwp

2009방송통신산업동향.hwp 제 1 절인터넷포털 53) 목차 1. 163. 163. 166 2. 168 176 1. 시장동향 가. 시장규모. 2008 2009. PWC 2008 / 15.6% 599. 2009 1.9% 587. *, (02) 570-4112, byjung@kisdi.re.kr 163 제 3 장 인터넷콘텐츠 < 표 3-1> 세계온라인광고시장규모추이 ( :, %) 2007

More information

기업들의 SNS마케팅 전략 사례연구

기업들의 SNS마케팅 전략 사례연구 SNS를 이용한 마케팅 사례연구 : 성공과 실패사례 중심으로 이 은 애 남서울대학교 멀티미디어학과, 010-2659-8084, yiea417@naver.com 김 병 곤 남서울대학교 경영학과, 010-2477-7898, bgkim@nsu.ac.kr Social Mdia가 기하급수적인 증가세를 보이며 사람들의 관심을 끌고 있 가입자가 6 억 명을 넘어선

More information

HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API

HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API WAC 2.0 & Hybrid Web App 권정혁 ( @xguru ) 1 HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API Mobile Web App needs Device APIs Camera Filesystem Acclerometer Web Browser Contacts Messaging

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

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

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

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

<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

혼자서일을다하는 JSP. 이젠일을 Servlet 과나눠서한다. JSP와서블릿의표현적인차이 - JSP는 <html> 내에서자바를사용할수있는수단을제공한다. - 서블릿은자바내에서 <html> 을작성할수있는수단을제공한다. - JSP나서블릿으로만웹페이지를작성하면자바와다양한코드가

혼자서일을다하는 JSP. 이젠일을 Servlet 과나눠서한다. JSP와서블릿의표현적인차이 - JSP는 <html> 내에서자바를사용할수있는수단을제공한다. - 서블릿은자바내에서 <html> 을작성할수있는수단을제공한다. - JSP나서블릿으로만웹페이지를작성하면자바와다양한코드가 혼자서일을다하는 JSP. 이젠일을 Servlet 과나눠서한다. JSP와서블릿의표현적인차이 - JSP는 내에서자바를사용할수있는수단을제공한다. - 서블릿은자바내에서 을작성할수있는수단을제공한다. - JSP나서블릿으로만웹페이지를작성하면자바와다양한코드가웹페이지내에뒤섞여있어서웹페이지의화면설계가점점어려워진다. - 서블릿이먼저등장하였으나, 자바내에

More information

정도전 출생의 진실과 허구.hwp

정도전 출생의 진실과 허구.hwp 鄭 道 傳 의 出 生 에 관한 考 察 鄭 柄 喆 著 머리말 정도전은 麗 末 鮮 初 정치적 격동기에 시대적 矛 盾 을 克 復 하기 위하여 낡은 弊 習 을 타파하고 조선왕조개창에 先 驅 的 으로 역할한 實 踐 的 정치사상가 이다 그는 뛰어난 자질과 學 問 的 재능으로 과거에 급제하여 官 僚 가 되었으며 자신 의 낮은 지위를 잊고 執 權 層 의 불의에 맞서 명분을

More information

e-비즈니스 전략 수립

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

More information

슬라이드 1

슬라이드 1 교육시간 (3일/20시간) [ 월 ~ 화 ] 09:00 ~ 18:00 [ 수 ] 09:00 ~ 13:00 / 중식제공 교육장소 광화문소재강의장 - 3호선경복궁역바로연결 - 5호선광화문역 1번출구도보 5분거리 교육일정 1차 : 2014-04-28( 월 ) ~2013-04-30( 수 ) 2차 : 2014-09-15( 월 ) ~2013-09-17( 수 ) 3차 :

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

PowerPoint 프레젠테이션

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

More information

1-1Çؼ³

1-1Çؼ³ 14~15 1 2 3 4 5 6 8~9 1 2 3 4 5 1 2 3 4 5 1 3 5 6 16~17 1 2 3 11 1 2 3 1 2 3 1 2 18 1 2 3 4 5 12~13 1 2 3 4 5 6 1 2 3 4 5 6 19 1 2 3 4 5 6 1 2 3 4 5 19 1 19 1 2 3 4 20~21 1 2 3 4 5 1 2 3 4 5 6 1 2 3 4

More information

SBR-100S User Manual

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

More information

<FEFF11121162110211611106116E002D1107116911B71112116900330036002E0069006E0064006400000000000093782FC816B427590034001CBDFC1B558B202E6559E830EB00000000937C28D9>

<FEFF11121162110211611106116E002D1107116911B71112116900330036002E0069006E0064006400000000000093782FC816B427590034001CBDFC1B558B202E6559E830EB00000000937C28D9> 02 04 06 14 16 19 24 26 27 28 31 3 4 5 세상과 (소통)하다!! 세상과 (소통)하다!! 세상과 (소통)하다!! 6 7 건강지원 프로그램으로 굳어져가는 몸과 마음을 풀어보아요~ 8 9 새해 복 많이 받으세요~ 10 11 12 13 14 15 14 14 14 14 15 15 16 17 18 19 20 21 방과 후 교실(해나무 주간보호센터

More information

치밀한 시간 계산으로 한 치의 오차 없이 여행일정을 계획하지만, 상황이 항상 뜻대로 돌 아가지는 않는다. 인도에서는 철로가 끊겨 있기도 하고, 미국에서는 인디언의 공격을 받 기도 한다. 하지만 그는 항상 침착하고 냉정한 태도를 유지하며, 때로는 일정에 차질이 생 겨도

치밀한 시간 계산으로 한 치의 오차 없이 여행일정을 계획하지만, 상황이 항상 뜻대로 돌 아가지는 않는다. 인도에서는 철로가 끊겨 있기도 하고, 미국에서는 인디언의 공격을 받 기도 한다. 하지만 그는 항상 침착하고 냉정한 태도를 유지하며, 때로는 일정에 차질이 생 겨도 한글 번역 Grade 3-9 80일간의 세계일주 p. 4 이 책의 저자 쥘 베른 (1828~1905) 과학 모험 소설가로 유명한 쥘 베른은 1828년 프랑스의 항구도시 낭트에서 태어났 다. 그는 어렸을 때부터 바다와 모험을 동경하고 독서와 글쓰기를 좋아하였으나, 아버지 의 뜻에 따라 파리에서 법률을 공부하고 졸업 후에는 사업가, 주식 중개인 등으로 일하였 다.

More information

는 우연히 안나를 알게 되고, 이후 두 사람은 서로 격렬한 사랑에 빠진다. 결국 안나가 브 론스키의 아이를 임신하게 되자, 브론스키는 안나가 카레닌과 이혼하고 자기와 함께 새로 운 생활을 하길 바라지만, 안나는 아들 때문에 망설인다. 한편, 카레닌은 브론스키를 사랑 한

는 우연히 안나를 알게 되고, 이후 두 사람은 서로 격렬한 사랑에 빠진다. 결국 안나가 브 론스키의 아이를 임신하게 되자, 브론스키는 안나가 카레닌과 이혼하고 자기와 함께 새로 운 생활을 하길 바라지만, 안나는 아들 때문에 망설인다. 한편, 카레닌은 브론스키를 사랑 한 한글 번역 Grade 5-9 안나 카레니나 p. 4 이 책의 저자 톨스토이 (1828~1910) 19세기 러시아 문학을 대표하는 세계적 작가인 동시에 사상가. 유서 깊은 백작 집안의 넷째 아들로 태어났다. 대학을 중퇴한 후 고향으로 돌아와 지주로서 영지 내 농민생활의 개선을 위해 노력하였으나, 그의 이상주의는 실패로 끝나 모스크바에서 방탕한 생활에 빠 져들었고

More information

Microsoft PowerPoint 웹 연동 기술.pptx

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

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 워드프레스의 커스텀 포스트 타입 활용법 カスタム 投 稿 タイプの 活 用 Agenda chapter 0 프로필 自 己 紹 介 chapter 1 워드프레스에 대해 WordPressについて chapter 2 포스트와 고정 페이지 投 稿 と 固 定 ページ chapter 3 커스텀 포스트 타임과 사용자정의 분류 カスタム 投 稿 タイプとカスタム 分 類 chapter 4

More information

2 국어 영역(A 형). 다음 대화에서 석기 에게 해 줄 말로 적절한 것은? 세워 역도 꿈나무들을 체계적으로 키우는 일을 할 예정 입니다. 주석 : 석기야, 너 오늘따라 기분이 좋아 보인다. 무슨 좋은 일 있니? 석기 : 응, 드디어 내일 어머니께서 스마트폰 사라고 돈

2 국어 영역(A 형). 다음 대화에서 석기 에게 해 줄 말로 적절한 것은? 세워 역도 꿈나무들을 체계적으로 키우는 일을 할 예정 입니다. 주석 : 석기야, 너 오늘따라 기분이 좋아 보인다. 무슨 좋은 일 있니? 석기 : 응, 드디어 내일 어머니께서 스마트폰 사라고 돈 20학년도 6월 고2 전국연합학력평가 문제지 제 교시 국어 영역 형 (A ) [ ~ 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

OVERVIEW 디트라이브는 커뮤니케이션 환경의 다변화에 대응하기 위한 고객들의 다양한 욕구를 충족시키기 위해, TV광고부터 온라인 광고 및 프로모션과 웹사이트 구축은 물론 뉴미디어까지 아우르는 다양한 IMC 기능을 수행하는 마케팅 커뮤니케이션 회사입니다. 대표이사 설

OVERVIEW 디트라이브는 커뮤니케이션 환경의 다변화에 대응하기 위한 고객들의 다양한 욕구를 충족시키기 위해, TV광고부터 온라인 광고 및 프로모션과 웹사이트 구축은 물론 뉴미디어까지 아우르는 다양한 IMC 기능을 수행하는 마케팅 커뮤니케이션 회사입니다. 대표이사 설 leads the way to power brand OVERVIEW 디트라이브는 커뮤니케이션 환경의 다변화에 대응하기 위한 고객들의 다양한 욕구를 충족시키기 위해, TV광고부터 온라인 광고 및 프로모션과 웹사이트 구축은 물론 뉴미디어까지 아우르는 다양한 IMC 기능을 수행하는 마케팅 커뮤니케이션 회사입니다. 대표이사 설립일 직원수 주소 연락처 정치헌 2001년

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

Orcad Capture 9.x

Orcad Capture 9.x OrCAD Capture Workbook (Ver 10.xx) 0 Capture 1 2 3 Capture for window 4.opj ( OrCAD Project file) Design file Programe link file..dsn (OrCAD Design file) Design file..olb (OrCAD Library file) file..upd

More information

쿠폰형_상품소개서

쿠폰형_상품소개서 브랜드이모티콘 쿠폰형 상품 소개서 카카오톡 브랜드이모티콘 잘 만든 브랜드이모티콘 하나, 열 마케팅 부럽지 않다! 카카오톡 브랜드이모티콘은 2012년 출시 이후 강력한 마케팅 도구로 꾸준히 사랑 받고 있습니다. 브랜드 아이덴티티를 잘 반영하여 카카오톡 사용자의 적극적인 호응과 브랜딩 지표 향상을 얻고 있는 강력한 브랜드 아이템입니다. Open

More information

CMS-내지(서진이)

CMS-내지(서진이) 2013 CMS Application and Market Perspective 05 11 19 25 29 37 61 69 75 81 06 07 News Feeds Miscellaneous Personal Relationships Social Networks Text, Mobile Web Reviews Multi-Channel Life Newspaper

More information

단위: 환경정책 형산강살리기 수중정화활동 지원 10,000,000원*90%<절감> 형산강살리기 환경정화 및 감시활동 5,000,000원*90%<절감> 9,000 4,500 04 민간행사보조 9,000 10,000 1,000 자연보호기념식 및 백일장(사생,서예)대회 10

단위: 환경정책 형산강살리기 수중정화활동 지원 10,000,000원*90%<절감> 형산강살리기 환경정화 및 감시활동 5,000,000원*90%<절감> 9,000 4,500 04 민간행사보조 9,000 10,000 1,000 자연보호기념식 및 백일장(사생,서예)대회 10 2013년도 본예산 일반회계 환경위생과 ~ 환경위생과 세 출 예 산 사 업 명 세 서 부서: 환경위생과 단위: 환경정책 환경위생과 8,231,353 3,622,660 4,608,693 국 2,472,543 기 144,000 도 976,102 시 4,638,708 자연환경보호(환경보호/환경보호일반) 5,910,247 1,462,545 4,447,702 국 1,817,800

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Web Browser Web Server ( ) MS Explorer 5.0 WEB Server MS-SQL HTML Image Multimedia IIS Application Web Server ASP ASP platform Admin Web Based ASP Platform Manager Any Platform ASP : Application Service

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

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Verilog: Finite State Machines CSED311 Lab03 Joonsung Kim, joonsung90@postech.ac.kr Finite State Machines Digital system design 시간에배운것과같습니다. Moore / Mealy machines Verilog 를이용해서어떻게구현할까? 2 Finite State

More information

Week13

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

More information

오늘날의 기업들은 24시간 365일 멈추지 않고 돌아간다. 그리고 이러한 기업들을 위해서 업무와 관련 된 중요한 문서들은 언제 어디서라도 항상 접근하여 활용이 가능해야 한다. 끊임없이 변화하는 기업들 의 경쟁 속에서 기업내의 중요 문서의 효율적인 관리와 활용 방안은 이

오늘날의 기업들은 24시간 365일 멈추지 않고 돌아간다. 그리고 이러한 기업들을 위해서 업무와 관련 된 중요한 문서들은 언제 어디서라도 항상 접근하여 활용이 가능해야 한다. 끊임없이 변화하는 기업들 의 경쟁 속에서 기업내의 중요 문서의 효율적인 관리와 활용 방안은 이 C Cover Story 05 Simple. Secure. Everywhere. 문서관리 혁신의 출발점, Oracle Documents Cloud Service 최근 문서 관리 시스템의 경우 커다란 비용 투자 없이 효율적으로 문서를 관리하기 위한 기업들의 요구는 지속적으로 증가하고 있다. 이를 위해, 기업 컨텐츠 관리 솔루션 부분을 선도하는 오라클은 문서관리

More information

<5BC6EDC1FD5DBFA9BCBAC0C720BFC2B6F3C0CE20C0CEB1C7C7C7C7D820C7F6C8B2B0FA20B0B3BCB1B9E6BEC82E687770>

<5BC6EDC1FD5DBFA9BCBAC0C720BFC2B6F3C0CE20C0CEB1C7C7C7C7D820C7F6C8B2B0FA20B0B3BCB1B9E6BEC82E687770> 이 발표는 진행중인 연구이므로 인용 및 복제를 금함 초대의 글 INVITATION 안녕하십니까? 여성가족부와 한국여성정책연구원은 여성의 온라인 인권피해 현황과 개선방안 을 주제로 제89차 여성정책포럼을 공동 개최합니다. 최근 빈번하게 발생하고 있는 온라인 인권피해 사례들은 시민들의 온라인 활동을 위축시킬 뿐만 아니라 사회적, 심리적, 경제적으로도 심각한 타격을

More information

歯MW-1000AP_Manual_Kor_HJS.PDF

歯MW-1000AP_Manual_Kor_HJS.PDF Page 2 Page 3 Page 4 Page 5 Page 6 Page 7 Page 8 Page 9 Page 10 Page 11 Page 12 Page 13 Page 14 Page 15 Page 16 Page 17 Page 18 Page 19 Page 20 Page 21 Page 22 Page 23 Page 24 Page 25 Page 26 Page 27 Page

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

제 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

서현수

서현수 Introduction to TIZEN SDK UI Builder S-Core 서현수 2015.10.28 CONTENTS TIZEN APP 이란? TIZEN SDK UI Builder 소개 TIZEN APP 개발방법 UI Builder 기능 UI Builder 사용방법 실전, TIZEN APP 개발시작하기 마침 TIZEN APP? TIZEN APP 이란? Mobile,

More information

제 31회 전국 고교생 문예백일장 산문 부문 심사평.hwp

제 31회 전국 고교생 문예백일장 산문 부문 심사평.hwp 제 31회 전국 고교생 문예백일장 산문 부문 심사평 *당선자 : 장원-울산효정고등학교 이예슬 차상-수리고등학교 전하영 차하-안양예술고등학교 이본느 가작-은평고등학교 강보미 가작-고양예술고등학교 강보민 배우고( 知 ), 좋아하고( 好 ), 즐기며( 樂 ) 쌓아가는 삶의 피라미드! 단국대 제 31회 전국고교생 백일장 산문부 심사위원들의 가장 큰 아쉬움은 글제 삼각

More information

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

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

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

AGENDA 01 02 03 모바일 산업의 환경변화 모바일 클라우드 서비스의 등장 모바일 클라우드 서비스 융합사례

AGENDA 01 02 03 모바일 산업의 환경변화 모바일 클라우드 서비스의 등장 모바일 클라우드 서비스 융합사례 모바일 클라우드 서비스 융합사례와 시장 전망 및 신 사업전략 2011. 10 AGENDA 01 02 03 모바일 산업의 환경변화 모바일 클라우드 서비스의 등장 모바일 클라우드 서비스 융합사례 AGENDA 01. 모바일 산업의 환경 변화 가치 사슬의 분화/결합 모바일 업계에서도 PC 산업과 유사한 모듈화/분업화 진행 PC 산업 IBM à WinTel 시대 à

More information

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

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

More information

Javascript

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

More information

슬라이드 1

슬라이드 1 HTML5 & CSS3 Html5 와 CSS3 의기본이해와이를응용한모바일웹사이트와더나아가반응형웹사이트를제작이가능해진 다. PC 와다양한모바일기기에서보여지는웹사이트를각각의해상도에맞춰서제작할필요없이하나의반 응형웹사이트를만들면이미지, 폰트, UI 등이자동으로변환되어이용할수있다. 1 차시 HTML5 기반의 Web App HTML5 기반의 Web App 소개 2 차시

More information

LG Business Insight 1409

LG Business Insight 1409 LGERI 리포트 성숙기 스마트폰 시장의 주목할 움직임들 조직을 쪼개는 기업, 사업을 붙이는 기업 배은준 연구위원 eunjun.bae@lgeri.com 1. 스마트폰 조직을 쪼개는 기업들 2. 스마트폰 사업을 붙이는 기업들 3. 시사점 스마트폰 시장이 성숙기에 접어들면서 경쟁력을 높이려는 스마트폰 기업과 사업모델을 강화하려는 인터넷 서비스 기업의 전 략도 다양해지고

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

포맷

포맷 19차시 : SNS 활용사례와 의미 1) SNS의 정의와 유형 1 SNS의 정의와 역할 소셜 네트워크 서비스(Social Network Service, SNS)는 인터넷과 SNS에 올리는 투표 인증샷 행위로도 이미 사회적 영향력이 확인된 서비스 형태이다. 여기에 포함 되는 미디어는 트위터(twitter)와 페이스북(facebook), 마이스페이스(MySpace),

More information

아이폰/아이팟 터치용 웹 애플리케이션 개발 팁 12개

아이폰/아이팟 터치용 웹 애플리케이션 개발 팁 12개 Created by Firejune at 2009/12/14 아이폰/아이팟 터치용 웹 애플리케이션 개발 팁 12개 Stoyan Stefanov씨는 아이폰/아이팟 터치에서 제공하는 사파리 브라우저(이하 모바일 사파리)용 웹페이지를 구축할 때 알아두면 유용한 팁 12가지를 작성했습니다. 아시다시피 모바일 사파리는 데스크탑용 브라우저와 견주어도 손색없을 정도의 풀브라우징을

More information

ca 17회 컨퍼런스 후기

ca 17회 컨퍼런스 후기 2012년을빛낼웹기술 : HTML 5, CSS3, jquery 2012년을빛낼웹기술 : HTML 5, CSS3, jquery 01 02 01 02 CA conference 17 01 일반적인웹기획의과정. 보통어떤웹기술을활용할지의여부는 S1, C1의구현단계에서선택된다. 2012년을웹기획과웹기술클C1 C2 C3 라화면운영산출물이언일반적인웹기획이라하면무엇이떠오르는가?

More information

untitled

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

More information

Contents 읽고 싶은 기사를 클릭하시면 바로 연결됩니다. 03 한국출판문화산업진흥원 소식 05 빅데이터 기반 미디어 SNS연구소 설립 05 출판사가 만든 맛집, 식품편집샵 05 미국 뒤흔든 베스트셀러 국내 출간 06 어도비, 모바일 출판 솔루션 출시 06 저작권

Contents 읽고 싶은 기사를 클릭하시면 바로 연결됩니다. 03 한국출판문화산업진흥원 소식 05 빅데이터 기반 미디어 SNS연구소 설립 05 출판사가 만든 맛집, 식품편집샵 05 미국 뒤흔든 베스트셀러 국내 출간 06 어도비, 모바일 출판 솔루션 출시 06 저작권 출판이슈 2015 09 - CONTENTS - 독서캘린더 출판 트렌드 발행인 이재호 주 소 전라북도 전주시 덕진구 중동로 63 전 화 063)219.2700 홈페이지 www.kpipa.or.kr Contents 읽고 싶은 기사를 클릭하시면 바로 연결됩니다. 03 한국출판문화산업진흥원 소식 05 빅데이터 기반 미디어 SNS연구소 설립 05 출판사가 만든 맛집,

More information

Photo News 02 DOOSAN_2007 02 Yonkang Hall CONTENTS 2007 02 vol. 513 DOOSAN vol. 513 03 Doosan News 04 DOOSAN_2007 02 DOOSAN vol. 513 05 Doosan News 06 DOOSAN_2007 02 DOOSAN vol. 513 07 With Doosan 08 DOOSAN_2007

More information

Lab10

Lab10 Lab 10: Map Visualization 2015 Fall human-computer interaction + design lab. Joonhwan Lee Map Visualization Shape Shape (.shp): ESRI shp http://sgis.kostat.go.kr/html/index.html 3 d3.js SVG, GeoJSON, TopoJSON

More information

미쓰리 파워포인트

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

More information

Macaron Cooker Manual 1.0.key

Macaron Cooker Manual 1.0.key MACARON COOKER GUIDE BOOK Ver. 1.0 OVERVIEW APPLICATION OVERVIEW 1 5 2 3 4 6 1 2 3 4 5 6 1. SELECT LAYOUT TIP 2. Add Page / Delete Page 3. Import PDF 4. Image 5. Swipe 5-1. Swipe & Skip 5-2. Swipe & Rotate

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

슬라이드 1

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

More information

10월1일자.hwp

10월1일자.hwp 동 향 제 23 권 18호 통권 517호 영국 BBC의 온라인 미디어 사업 동향과 전략 12) 신 호 철 * 1. 개 요 영국의 지상파방송 사업자인 BBC는 그동안 창의적인 아이디어와 고품질의 방송콘 텐츠로 세계 공영방송의 선두 주자로 인정받아 왔다. 그러나 Blinkbox, Lovefilm과 같 은 온라인 비디오 사업자의 등장과 시청자의 TV 시청행태 변화

More information

책에서도알려주지않는, 반응형웹의비밀! 작성 : 수정 : (3 판 ) 분류 : 웹표준, 참고자료 작성 : 고남현 (Naver ID - isc7981) - 개요이글에서는일반시중에팔리고있는웹개발서적에서다루지않는, 반응형웹에대한

책에서도알려주지않는, 반응형웹의비밀! 작성 : 수정 : (3 판 ) 분류 : 웹표준, 참고자료 작성 : 고남현 (Naver ID - isc7981) - 개요이글에서는일반시중에팔리고있는웹개발서적에서다루지않는, 반응형웹에대한 책에서도알려주지않는, 반응형웹의비밀! 작성 : 2014. 04. 06. 수정 : 2014. 04. 08.(3 판 ) 분류 : 웹표준, 참고자료 작성 : 고남현 (Naver ID - isc7981) - 개요이글에서는일반시중에팔리고있는웹개발서적에서다루지않는, 반응형웹에대한역사 를풀이하는글이다. 이전의고정형웹과최근의반응형웹이어떠한관계에있는지알아본다. 최근에이야기되는반응형웹의근간이어디서왔는지를이해하면,

More information

歯Phone

歯Phone UI (User Interface) Specification for Mobile Phone Version 1.1.1 2003116 a j k e f y p t u v w 2 n Contrast Zoom In Out Kang

More information

이제는 쓸모없는 질문들 1. 스마트폰 열기가 과연 계속될까? 2. 언제 스마트폰이 일반 휴대폰을 앞지를까? (2010년 10%, 2012년 33% 예상) 3. 삼성의 스마트폰 OS 바다는 과연 성공할 수 있을까? 지금부터 기업들이 관심 가져야 할 질문들 1. 스마트폰은

이제는 쓸모없는 질문들 1. 스마트폰 열기가 과연 계속될까? 2. 언제 스마트폰이 일반 휴대폰을 앞지를까? (2010년 10%, 2012년 33% 예상) 3. 삼성의 스마트폰 OS 바다는 과연 성공할 수 있을까? 지금부터 기업들이 관심 가져야 할 질문들 1. 스마트폰은 Enterprise Mobility 경영혁신 스마트폰, 웹2.0 그리고 소셜라이프의 전략적 활용에 대하여 Enterpise2.0 Blog : www.kslee.info 1 이경상 모바일생산성추진단 단장/경영공학박사 이제는 쓸모없는 질문들 1. 스마트폰 열기가 과연 계속될까? 2. 언제 스마트폰이 일반 휴대폰을 앞지를까? (2010년 10%, 2012년 33%

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

PowerPoint 프레젠테이션

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

More information

<4D6963726F736F667420576F7264202D205B4354BDC9C3FEB8AEC6F7C6AE5D39C8A35F32303131B3E220435420C0AFB8C1B1E2BCFA20B5BFC7E2>

<4D6963726F736F667420576F7264202D205B4354BDC9C3FEB8AEC6F7C6AE5D39C8A35F32303131B3E220435420C0AFB8C1B1E2BCFA20B5BFC7E2> 목차(Table of Content) 1. 2011년 문화기술(CT)을 둘러싼 트렌드... 2 1.1 3D 기술의 적용범위 확대... 2 1.2 웹 브라우저 게임의 특징... 2 1.3 스마트 단말에서의 콘텐츠 소비 증가... 4 1.4 인터페이스의 진화... 5 1.5 LBS, SNS와 콘텐츠의 결합... 5 2. 2011년 10대 CT 유망기술... 7

More information

Microsoft PowerPoint - web-part03-ch19-node.js기본.pptx

Microsoft PowerPoint - web-part03-ch19-node.js기본.pptx 과목명: 웹프로그래밍응용 교재: 모던웹을 위한 JavaScript Jquery 입문, 한빛미디어 Part3. Ajax Ch19. node.js 기본 2014년 1학기 Professor Seung-Hoon Choi 19 node.js 기본 이 책에서는 서버 구현 시 node.js 를 사용함 자바스크립트로 서버를 개발 다른서버구현기술 ASP.NET, ASP.NET

More information

3월16일자.hwp

3월16일자.hwp 동향 * 16) 1. 개요 구글 (Google) 은 2010년 5월구글 I/O 개발자컨퍼런스에서 HTML5를통해플러그인의사용이줄어들고프로그램다운로드및설치가필요없는브라우저기반웹플랫폼환경이점차구현되고있다고강조했다. 그리고애플 (Apple) 은 2010년 2월에출시한아이패드에서처리속도를지연시키는플래시 (flash) 를지원하지않고 HTML5 를이용하여웹브라우저에서오디오,

More information

공공기관 지식경영

공공기관 지식경영 269 일본 지방정부의 소셜 미디어 정책 및 지역 SNS의 운영사례 이자성(경남발전연구원) Ⅰ. 서 론 인터넷 기술과 스마트 폰의 등장은 개인간 커뮤니케이션 방식을 변화시키는 가운데 이를 활용한 마케팅 기법을 적용하려는 기업이 증가하고 있다. 이러한 현상은 공공기관에도 나타 나고 있으며 소셜 네트워크 서비스 등 소셜 미디어를 활용한 시민의 정책참여와 협업을

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Reasons for Poor Performance Programs 60% Design 20% System 2.5% Database 17.5% Source: ORACLE Performance Tuning 1 SMS TOOL DBA Monitoring TOOL Administration TOOL Performance Insight Backup SQL TUNING

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 웹프로그래밍 1 2 강의목표 1. HTML5의문서구조화의목적과시맨틱태그에대해이해한다. 2. HTML5 시맨틱태그로구조화된웹페이지를만들수있다. 3. 웹폼의목적을이해한다. 4. 웹폼의각요소를활용하여사용자로부터입력받는웹페이지를작성할수있다. 문서의일반적인구조사례 3 페이지번호 장제목 소제목 본문텍스트 문단 설명섹션 그림 HTML5 의문서구조화 4 기존 HTML의한계

More information