HTML5 적용과 IE 11 웹호환성

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "HTML5 적용과 IE 11 웹호환성"

Transcription

1 HTML5 적용과브라우저 - 웹환경변화에대한기업의대응방법 이완근

2 목차 1. HTML5 등장및현황 2. 최신브라우저기술트랜드 3. IE 11 호환성변경사항 4. HTML5 웹표준적용 5. CSS 퍼블리싱 6. 주요 SW 대응현황 7. 브라우저표준전환전략

3 주요기사 웹환경의빠른변화 HTML5 기반 RIA 솔루션 Nexacro 출시 HTML5 표준제정공표 HTML5 Canvas 기반 exbuilder 5 출시 출시 Windows 10의최신브라우저 Edge 크롬브라우저 NPAPI 지원중단 Silverlight, FLEX 지원중단

4 HTML5 웹기술과 Internet Explorer 의변화 HTML5 와 IE 11 을이해하고기존시스템대응과신규개발전략모색 HTML5 기술현황 기술변화 신규시스템개발표준 향후방향 IE 11 변경사항 환경변화 기존시스템대응전략 문제해결

5 1. HTML5 등장및현황

6 차세대웹표준 HTML 5 확정 W3C 공식권고안 (W3C Recommandation) 지정으로재부각됨 ( ) 표준지정이전에이미주요브라우저에서사용가능 ( 현장적용가능 ) W3C 는 'write-once, run-anywhere' 라는개념으로미래오픈웹플랫폼의초석이될것으로기대 (One Source Multi Use) 별도플러그인없이도다양한어플리케이션을웹에서구현가능 지속적표준기능추가예정 ( 표준확정이기능 Fix를의미하진않음 )

7 웹환경의변화 Cross Browsing 해결과 Multi Device 지원서비스플랫폼의필요 차세대웹표준 HTML5 HTML5 장점 기존웹기술의보완 고질적인호환성이슈해결 RIA SW 대체 UI 제공 만능서비스플랫폼 OSMU 서비스플랫폼제공 Application 기능제공 Cross Browsing 미려한 UI Cloud 컨텐츠 IoT 서비스

8 Device 환경과개발환경의변화 컨텐츠제공과 Device 연결을위한표준플랫폼필요 1) Mobile - ios 와다양한버전의 Android 플랫폼 - 다양한화면 Size 2) Cloud - 다양한컨텐츠 Viewer 연동 ( 다양한프로토콜과코덱 ) 3) IOT/IOE - 비표준의다양한 Device/OS SSPL IOT, IOE Cloud Contents 스마트카등이미산업계전반에적용중

9 HTML5 의현실과이슈 For HTML5 mobile applications, please rank your satisfaction Web 은 Multi OS 지원과즉시배포만장점으로고려됨 Neutral to Dissatisfied Satisfied 1. Monetization (83.4%) 2. Security (81.8%) 3. Fragmentation (75.4%) 4. Performance (72.4%) 5. Timeliness of new updates (67.9%) 6. User experience (62%) 7. Distribution control (60.3%) 1. Cross-development capabilities (83.4%) 2. Immediate updates (81.8%) IDC-08/2012

10 차세대플랫폼이되기위한노력 HTML5는웹개발언어가아닌산업계표준플랫폼이되기위하여표준스펙, 기능, 성능, 개발도구측면에서대대적인혁신이반영 : HTML5는웹이가진기술적한계에대한모든해답은아니지만현실적인대안으로써의미있는기술적진화를보여주고있음 Web 의단점 HTML5 대응 (Web 단점극복 ) 1. Cross Browsing 취약 2. 기능부족 - Application 기능미지원 3. 느린성능 1. 강력한표준스펙정의 2. 다양한 API 제공 - 별도개발 X 3. 고성능엔진개발 - 화면렌더링엔진 (HTML 태그를화면에그림 ) - 고성능 JavaScript 엔진 ( 이벤트및로직계산 ) 4. 개발난이도高 4. 강력한개발자도구기본제공 - Debug 취약

11 History of Web Standard (W3C) HTML5 의경우 W3C 에의하여 Draft Recommend Recommend of HTML5 발표됨 CSS1 JavaScript CSS2 AJAX 버전 X HTML HTML2 HTML4 XHTML1 HTML5 버전단위가아닌기능단위로 Upgrade 되며계속기능추가진행중 W3C 에서표준화한기능스펙을브라우저제작사에서구현 - HTML5 & CSS3 지원여부확인 : 시사점 HTML5 언어의지속적인개선기대 단계적계획하에점진적인도입전략필요

12 웹플랫폼구조와브라우저엔진 2 Web Browser HTML5 ( 일반 ) 4 1 표준강화로 Cross Brousing 2 다양한기능추가 3 성능개선 4 개발자도구로개발생산성향상 HTML5 CSS3 Java Script 1 Rendering Engine 3 JS Engine 브라우저랜더링엔진자바스크립트엔진 익스플로러 Trident jscript(9은챠크라 ) 파이어폭스 Gecko tracemonkey 크롬 Webkit V8 사파리 Webkit SquirrelFish 오페라 Presto futhark

13 HTML5 시장현황 HTML5 의표준화및확대는 Multi Device 에 Contents 를서비스하기 위한 Platform 으로브라우저제작사가아닌 Contents 업체가주도 웹기반정보유통단일화로검색시장확장 웹 OS 주도권방어 웹기반컨텐츠판매시장통합 컨텐츠판매플랫폼확대

14 엔터프라이즈웹사용환경 대부분기업은 IE 브라우저종속적상황으로 HTML5 적용이미흡 HTML5 표준지연 HTML5 기반 SW 및개발도구부족 HTML5 적용미흡배경 HTML5 개발자부족 기업 HTML5 수요부족으로 HTML5 전문인력육성미흡 브라우저하위호환성제공 브라우저들의하위호환기능제공으로호환성이슈감소 생태계미성숙 HTML5 기반의개발도구및 Software 부족 전사모든시스템 HTML5 일괄전환불가

15 고려사항 웹브라우저표준변경시고려사항 Internet Explorer 브라우저다중버전동시설치불가 ( 일괄전환 ) HTML5, Windows10 : 버전개념이없어짐 ( 기능단위 Online Upgrade만존재 ) IE 11 : 하위호환을위해남겨진 Internet Explorer의마지막버전 (Win 10 Edge) IE 10까지의브라우저지원중단및 Windows10에서설치불가 ActiveX SW 대체기술부족 ( 보안정책반영 ) HTML5 기반 SW 성숙도부족 ( 표준솔루션도입곤란 ) HTML5 숙련개발자부족 기존시스템 IE 11 적용 신규시스템 HTML5 적용

16 2. 최신브라우저기술트랜드

17 Web Browser Trend 웹어플리케이션에대한중장기방향성정의가요구됨 [ 고민해야할것 ] [ 다양한브라우저경쟁 ] 기존 IE 중심의웹브라우징환경에서크롬등다양한브라우저시장확대 기존개발형태인사내에서허용하는웹브라우저렌더링엔진특성에맞춰각각개발할것인가? 크로스브라우징기술을사용할것인가? [ 다양한디바이스출시 ] 다양한해상도의다양한브라우저환경출시 성능 VS 표준화 사내표준에정의한모바일환경에최적화된모바일웹개발? (MEAP 기반 ) 반응형웹브라우저기술을사용한다양한표준지원할것인가?

18 Market Perception 사용자선입관혹은이슈중 브라우저속도 측면과 Old Version IE 사용에따른사용자경험측면 이슈가가장부각됨 오페라파이어폭스크롬사파리 블랙베리와함께모 넷스케이프파이어 속도!! 애플표준브라우저 바일타겟 폭스로 Linux 타겟 MS 는 Windows 10 Edge 브라우저로반격예정 기업형환경에서 IE 의기득권유지고려

19 History of Internet Explorer Windows OS 의하부기능으로써, 제품에대한관리형태를가져감. IE 11 의경우성능및웹표준에주안점을두어개발됨 Windows 7 Windows Vista IE 6 IE 7 IE 8 IE 9 IE 10 IE 11 EDGE Windows 8 Windows 8.1 Windows XP EOS Windows 10 Windows 10 에서는 Edge 브라우저가 기본브라우저이며 IE 11 만지원함

20 브라우저 Upgrade 방식 최신브라우저는자동 Upgrade 방식을통하여기존브라우저퇴출 을유도하고있으며, 하위호환성을제공하여사용자불편을최소화함 브라우저구분 Upgrade 방식하위호환성대응 Internet Explorer 사용자수동선택 브라우저별변화많음 (IE6, IE7, IE8, IE10, IE11) 호환성보기, 쿼크모드, EMIE 타브라우저 자동 Upgrade 일관성으로이슈적음 하위호환모드 시사점 HTML5 를기점으로하위브라우저지원중단시도 (ex. NPAPI 지원중단등 )

21 기존웹개발방식단절 웹표준의등장으로최신브라우저는 ActiveX와 Plugin (NPAPI) 의지원중단을선언함 IE 11의기본모드에서는 ActiveX 미지원 ( 現, 하위호환모드로구동되고있음 ) IE 11 및 Chrome 브라우저의기본모드에서는 NPAPI 미지원 ( 現, 하위호환모드로지원 ) : Chrome NPAPI 지원중단기사 Windows 10 기본브라우저 Edge에서 NPAPI 지원중단 ( 출시예정 ) NPAPI 지원중단으로 ActiveX 뿐만아니라 Plugin 기반 Software 도전환고려대상이됨

22 멀티 OS 지원기술 운영체제및브라우저개발사는상호지원방식에따라고유의확장방식을제공함 이러한브라우저개발사의확장기술은보안취약점및이용자서비스선택권을제약하는한계로인해최근에는브라우저개발사의통제 ( 승인 ) 를거쳐안전성이보장된권고기술로개발, 배포하는방향으로정책으로유도하고있다. (Sandbox 보안모델을준수하는확장기술이나 HTML5 기반의웹앱기술을권고 ) -> Acrobat Reader 브라우저별확장기술요약 구분기반기술플러그인기술웹앱기술 Internet Explorer (MS) ActiveX Silverlight, Java 애플릿, Flash Player 커스텀 URI Scheme 연동 (Protocol Handler 레지스터등록 ) HTML5 WinJS Chrome ( 구글 ) NPAPI ( 폐기예정 ) Native Client Java 애플릿, Flash Player, Native Messaging 커스텀 URI Scheme 연동 (Protocol Handler 레지스터등록 ) Legacy Browser Support HTML5 Chrome App Firefox ( 모질라 ) NPAPI ( 폐기예정 ) Native Client Java 애플릿, Flash Player 커스텀 URI Scheme 연동 (Protocol Handler 레지스터등록 ) HTML5(Web GL, WebSocke ts,webrtc) asm.js

23 Chrome 브라우저 HTML5 선두주자구글의브라우저 간단하고효율적인사용자인터페이스를제공하며현존하는다른웹브라우저들에비해나은안정성과속도, 그리고보안성을갖는것을목표하고있다 크롬이란뜻은원래그래픽사용자인터페이스에서창틀을가리키는데, 여기서는브라우저틀영역을가리키며, 이영역을최소화시키자는목표로크롬이라고이름을지었다고한다 스탯카운터통계기준으로 2012년 5월부터인터넷익스플로러를제치고현재전세계에서가장많이쓰이는웹브라우저이다 HTML5 기능을가장많이지원 버전 27 까지웹키트레이아웃엔진이용, 버전 28 이후웹키트의포크인블링크를사용

24 Internet Explorer 11 개요 Internet Explorer 의마지막버전 IE는기업고객을타겟으로 OS 연동기반의다양한서비스제공하였고, 하위호환성유지를위해서점점무거워짐 2013년 7월 25일개발자버전공개 2013년 10월 17일 Windows 8.1과함께출시 (Windows 7용은 2013년 11월 8일정식버전출시 ) 윈도우 7 서비스팩 1부터지원, 윈도우 8.1의기본브라우저 CSS3는거의지원, HTML5는아직미흡 User Agent 등여러부분에서호환성변경 엔터프라이즈모드제공 (EMIE)

25 Windows 10 기본브라우저 Microsoft Edge Web 시장주도권탈환을위한 MS 의반격 2015년 1월 21일 Windows 10 프리뷰행사에서공개 - Windows 10 에 IE 11과스파트탄을동시에탑재할계획 - IE 11는기존의웹사이트를, 스파르탄은모던웹앱을지원 코드명스파르탄 HTML5 전용브라우저 최신고성능렌더링엔진탑재 - 엣지 (Edge), IE의 Trident 엔진보다고성능 윈도우앱스토어를통해배포예정 (2015년 9월. Windows 10 출시예정 ) MS가 IE라는브랜드를사용하지않는것은사용자들에게형성되고있는부정적인이미지때문 매우간소화된인터페이스 ( 크롬과거의유사 ) 빠른캡처기능 다양한탭기능 ( 개인, 업무, 비밀탭등 ) 향상된읽기모드 ( 광고를포함해웹페이지의불필요한요소를정리 ) 읽기목록기능으로기사를저장했다가나중에오프라인사용가능

26 3. IE 11 호환성변경사항

27 IE 11 기준기존시스템호환성확보 웹표준준수로 IE11 의호환성측면에서변경된사항대응법 웹브라우저특히 Internet Explorer와그버전에따라다르게동작하는페이지들은 User Agent String의변화로인해서오동작할수있습니다. 향상된보호모드로인해서 ActiveX 컨트롤, BHO, 툴바등이영향을받습니다. 호환성도구 IE 11 에서제공하는하위버전호환성도구를사용하여기존시스템의호환성을확보한다. 기존시스템호환성확보 최소비용으로호환성확보 - 전면재개발지양 - 오동작원인수정권장 호환성보기 EMIE 소스수정 UA String, 향상된보호모드변경으로인한오동작을소스코드를수정하여대응한다. IE 11 변경 API 수정 SW 패치

28 IE 11 호환성변경항목 IE11 호환성변경항목 Internet Explorer 11 에서는웹표준, 다른브라우저, 실제웹사이트와의호환성을위해일부기능이변경됨 User Agent 문자열변경 브라우저버전확인에사용되는리턴값이변경되어, ActiveX 설치오류등의문제를야기함. 문서모드변경 IE11 부터는 Edge 모드가기본문서모드입니다. 이모드는브라우저에서사용할수있는최신표준에대한최고의지원을나타냅니다. 레거시 API 추가 / 변경 / 제거 화면 Windows, Document 객체에서제공하는 API 및각종함수들이변경되었습니다. URL 문자인코딩 쿼리문자열과 XHR 요청이 UTF-8 문자인코딩을사용하게되어, 다른브라우저의동작과일치하고브라우저간 XHR 코드를간소화합니다.

29 User Agent String(UA String) 변경 웹표준에맞춰제작된웹문서들이브라우저종속성을두지않기위해 UA String 의리턴값이변경됨 호환가능 ("compatible") 및브라우저 ("MSIE") 토큰이제거되었습니다. "like Gecko" 토큰이추가되었습니다 ( 다른브라우저와의일관성을위해 ). 이제브라우저버전이새수정 ("rv") 토큰에의해보고됩니다. IE 11 에서는 MSIE 라는브라우저명칭은사용하지않으므로서향후 IE 에따라서혹은버전에따른변경되는기능은사용하지않겠다는의지의표현 Windows 8.1 Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko Windows 7 Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko

30 User Agent String 사용대체방법 기존 Cross Browsing 처리를위해서사용하던브라우저및버전체 크로직을기능단위지원여부로변경 [ 브라우저체크분기문 ] [ 기능체크분기문 ] var IS_IE = navigator.useragent.indexof( MSIE ) > -1; var IS_FF = navigator.useragent.indexof( Firefox ) > -1; var IS_OP = navigator.useragent.indexof( Opera ) > -1; var IS_SF = navigator.useragent.indexof( Apple ) > -1; var IS_CH = navigator.useragent.indexof( Chrome ) > -1; function getinternetexplorerversion() { var rv = -1; if(navigator.appname == Microsoft Internet Explorer ) { var ua = navigator.useragent; var re = new RegExp( MSIE ([0-9]{1,}[\.0-9]{0,}) ); if(re.exec(ua)!= null) { rv = parsefloat(regexp.$1); } } } function registerevent( stargetid, seventname, fnhandler ) { var otarget = document.getelementbyid( stargetid ); if ( otarget!= null ) { if ( otarget.addeventlistener ) { otarget.addeventlistener( seventname, fntoberun, false ); } else { var sonevent = "on" + seventname; if ( otarget.attachevent ) { otarget.attachevent( sonevent, fnhandler ); } } } } 이예제는이벤트명을호출하여기능이사용가능 한지여부만확인합니다. ( 브라우저버전무관 )

31 User Agent String 사용호환성예제 XPlatform 은기능단위가아니므로브라우저체크적용 => Active X 설치에사용 <script language= javascript > function fn_onload() { if (navigator.useragent.indexof( MSIE ) > -1 navigator.useragent.indexof( Trident )!= -1) { window.location.href =./Install/x_installAX.html ; } else { window.location.href =./Install/x_installPlugin.html ; } } </script> IE 11 을위한 XPLATFORM 분기처리 : index.html 의 browser 체크구문 Internet Explorer 를체크하는조건에서 User Agent String 반환값에대해 MSIE' 대신 'Trident' 문자열을사용하는것을마이크로소프트에서권장함 => Windows 10 에서는 Edge 엔진을사용하며 Active X 사용불가

32 브라우저모드 DOCTYPE meta 요소의 content 값으로 IE=EmulateIE7 을입력하면 IE8 이 IE7 처럼작동하게되어호환성을유지할수있음 - IE 만을고려한코드 - 이코드가있으면 HTML 유효성검사를통과할수없음 IE 7 로렌더링해라. <meta http-equiv= X-UA-Compatible content= IE=EmulateIE7 /> IE8 이상웹브라우저엔진의렌더링모드를 IE7 로변경하여호환성을유지하는설정입니다. <meta http-equiv= X-UA-Compatible content= IE=edge, chrome=1 /> IE=edge : 설치된 IE 중현재브라우저가표현할수있는가장최신버전을렌더링에사용호환성보기아이콘이생기지않는다. chrome=1 : 크롬프레임 (ActiveX) 사용 (IE 에서만작동 ). 크롬이설치되어있다면 IE 에서도크롬렌더링을사용한다. IE11부터는 Edge 모드가기본문서모드입니다. IE11부터는문서모드가사용되지않으며일시적인경우를제외하고더이상사용하면안됩니다. 최신표준을반영하도록레거시기능및문서모드를사용하는사이트를업데이트해야합니다.

33 브라우저모드 DOCTYPE - Quirks Mode DTD 가없는페이지는 IE 8 이상에서 Quirks Mode 로렌더링 (DTD 를표준에따라인식하지못했던과거의 IE 5 브라우저의렌더링을흉내내는모드 ) DOCTYPE 태그가없을경우 DOCTYPE 태그가있을경우

34 URL 문자인코딩 IE11 에서는 URL 에대한문자인코딩을변경함. 특히, 이제쿼리문자 열과 XHR 요청이 UTF-8 문자인코딩을사용하여인코딩됨. 이변경내용은다음을제외하고모든 URL 에영향을줌. 앵커이름구성요소 ( 조각이라고도함 ) 사용자이름및암호구성요소 file:// 또는 ftp:// 프로토콜링크 이러한변경내용은다른브라우저의동작과일치하고브라우저간 XHR 코드를간소화합니다. 브라우저 WEB/WAS 서버 DBMS UTF-8 UTF-8 UTF-8 UTF-8 XHR (XML HttpRequest) : 브라우저와서버사이에서 HTTP 요청과전송및응답을서버측에서제어가능

35 향상된보호모드 (Enhanced Protected Mode) Internet Explorer 11에서향상된보호모드를기본값으로설정함에따라서 ActiveX 컨트롤들은실행에제약을받음. [ 추가기능실행 (R)] 버튼을누르면ActiveX 컨트롤을실행할수있으며해당웹사이트에서는더이상동일한내용을묻지않습니다. 사용자가선택적해제가능 향상된보호모드는각종스파이웨어나애드온이나악성코드가사용자의의지와상관없이설치가되는것을방지하는기능 Windows 7 용 IE 11 에서는향상된보호모드가적용되지않음

36 Legacy API 변경 웹표준준수와성능향상을위해서기존지원하던 API 를지원하지않거나, 새로운 API 를추가하여, 이를사용한소스수정이필요 기존 API IE 11 대응설명 Event attachevent addeventlistener 특정객체에이벤트부여 Window Document execscript eval 다른언어로개발된스크립트실행 doscroll scrollleft, ~Top Scroll Bar 사용제어 all 참조사이트 : getelementbyid 화면상모든객체를포함하는배열값 ( 개별객체단위로선택되도록변경 ) createstylesheet createelement( style ) 객체를 Style Sheet 에연결 filesize XMLHttpRequest 객체크기리턴 Script readystate onload 이벤트셋팅 Style stylesheet sheet 객체속성에 Style Sheet 를저장 이진실행 C++ 개발 Canvas, SVG, CSS3 C++ 이나컴파일된요소실행 기타 W3C 는이러한표준 API 변경이재발되는것을막기위해, HTML5 표준수립시엄격하고폭넓은스펙을제공함

37 JavaScript 호환성변경 IE 11 에서일부 JavaScript 함수리턴값이변경되어소스수정필요 구분 배열인덱스처리 JavaScript 속성열거 호출된간접 eval 함수가이제전역범위로지정됨 내용 배열길이속성의초기값이 2E+31-1( 즉, ) 보다큰경우 Windows Internet Explorer 8 은 ECMAScript( 제 3 에디션 ) 사양을따르지않습니다. Internet Explorer 9 은 2E+31-1 과 2E+32-2 사이의인덱스를사용하는배열요소를올바르게처리합니다. 어떤문서모드에서든 for in 문을사용할경우속성열거순서가 Windows Internet Explorer 8 에서반환되는순서와다를수있습니다. 예를들어이제숫자속성이숫자가아닌속성보다먼저열거됩니다. eval 함수는 IE5( 쿼크 ) 모드, IE7 표준모드및 IE8 표준모드에서는예상대로작동하지만, IE9 모드에서는 " 정의되지않음 " 을반환합니다. 수학정밀도및 SSE2 차이점 IE 9 에포함된 JavaScript 엔진인 Chakra 는 SSE2 를사용합니다. 이경우연산속도는빨라지지만 IE 8 의 Microsoft JScript 엔진과정밀도가차이납니다. Math.sin( ) - IE8 의모든모드 : e-16 - 플랫폼이 SSE2 를지원하는 IE 9 의모든모드 : e-16 SSE2 : Streaming SIMD Extensions 2

38 EMIE 모드 (Enterprise Mode) Internet Explorer 11 엔터프라이즈모드로최신상태유지 기업의기존시스템호환성대응을위해, EMIE 는 IE11 에서 IE8 엔진으로에뮬레이션하면 서성능, 보안및 IE 8 바이너리실행과관련된여러문제들을방지함 IE 8 과 IE 11 간호환기능통합 ~IE 8 : 호환성보기 ( 개인 ) ~IE 11 : EMIE ( 기업 ) 값 사용자에이전트문자열의차이 설명 브라우저버전검색기능에대응하여 IE8 사용자에이전트문자열을복제하여제공 ActiveX 컨트롤및기타바이너리일부 ActiveX 컨트롤은브라우저버전을쿼리하고예상하지않은응답을받은경우백그라운드에서실행되지않기때문에엔터프라이즈모드는 IE8 의응답을모방하여이러한현상을완화 제외된기능 사전캐싱및사전렌더링 CSS Expression( 개체동적배치 ) 과같은 IE11 에서제외된 IE8 고유기능몇가지를그대로유지 IE11 에추가된사전캐싱및사전렌더링기능해제 EMIE(Enterprise Mode Internet Explorer) : IE 11 상에서지정사이트에대해 IE 8 엔진으로구동지원

39 AD 서버관리환경에서 EMIE 설정 AD 환경에서 EMIE 정책을배포하면, 정책을내려받는클라이언트 PC(Windows 7 + IE11) 에서는 EMIE 설정이자동적용됨. 1. 사이트주소등록 2. EMIE 작동 1. AD 서버에접속 서버관리자 도구 그룹정책관리 2. Tested.lab Default Domain Policy 편집을클릭 3. 그룹정책관리편집기컴퓨터구성 정책 관리템플릿 4. 템플릿을추가 5. 다운로드받은정책파일에서 KB 폴더에서 inetres.adm 파일을선택후열기 6. inetres 항목이추가된것을확인후닫기 7. 그룹정책관리편집기를닫은후다시실행 8. 컴퓨터구성 정책 관리템플릿 Windows 구성요소 Internet Explorer 로이동 9. 엔터프라이즈모드 IE 웹사이트목록사용을더블클릭 10. 엔터프라이즈모드 IE 웹사이트목록사용을사용으로선택 11. 해당위치에 Sites.xml 파일의위치를입력 12. 테스트 3. 사이트주소연결

40 5. 호환성보기 Internet Explorer 업그레이드로인하여아래와같은오류를경험 - 특정웹페이지와익스플로러와의호환성이문제가되는경우임. 호환성깨짐현상 이전에정상적으로접속했던페이지접속불가 이미지혹은페이지전체가깨져서나오는현상 특정페이지의편집기능오류현상 Active X 설치를계속묻는현상 매번호환성보기설정을하는것이귀찮은경우에는 IE11 호환성보기강제설정 을하 시면항상 IE9 환경으로실행이됩니다. ( 사이트의보안설정에따라정상적으로동작하 지않는경우도있습니다.)

41 향상된보호모드 향상된보호모드환경에서는툴바나 BHO 등이실행되지않음 1) ActiveX 컨트롤이설치되지않는다면, 개발자도구에서 [Emulation] 영역에서 User Agent String 을 [Internet Explorer 10] 이나그이하버전으로바꿔서설치해보고, 설치되지않으면 ActiveX 컨트롤내의코드가호환되지않는경우이므로해 당웹사이트또는 ActiveX 컨트롤제작업체에문의 2) ActiveX 컨트롤이설치는되었지만향상된보호모드로인하여실행되지않는다면, [ 추가기능실행 ] 버튼을클릭하여동작하면, ActiveX 컨트롤이향상된보호모드를인식하여실행되 도록수정합니다. 동작하지않는다면, 제작업체에문의 3) ActiveX 컨트롤실행도중에 IE 가비정상종료 (Crash) 되는경우, ActiveX 컨트롤내의코드가호환되지않는경우이므로제작업체에문의 BHO (Browser Helper Object) : IE 기능을외부플러그인을이용해확장할수있게설계된기술 ( 네이버, 야후툴바등 )

42 개발자도구활용가이드 개발자도구에서 [ 에뮬레이션 ] 영역에서 User Agent String 을 [Internet Explorer 10] 이나그이하버전으로바꿔서 Test 시도 테스트가능한옵션제공

43 테스트수행절차 IE11 설치및실행 ActiveX 컨트롤설치및실행확인 URL 입력후페이지이동 ActiveX Layout Event 렌더링이정상적으로동작하는지확인 버튼클릭등의기능확인 잘안됨 User Agent String 바꿈 잘안됨 User Agent String 바꿈 잘안됨 User Agent String 바꿈 ActiveX 컨트롤설치및실행다시확인 설치, 실행잘됨 렌더링이잘되는지다시확인 렌더링잘됨 버튼클릭등의기능이잘되는지다시확인 EPM( 향상된보호모드 ) 에맞도록수정 웹표준에맞게수정또는버전인식문제수정 웹표준에맞게수정또는버전인식문제수정 테스트종료

44 4. HTML5 웹표준적용 - 신규시스템개발시 HTML5 개발표준적용 -

45 웹표준, 웹접근성, 웹호환성 규격 ( 문법 ) 대로쓰고 ( 웹표준 ) 웹접근성과웹호환성과관련된부가적인부분을다듬는다. - 똑같은화면에집착해서시간을소비하거나표준을벗어나는일이없도록주의. 브라우저가다르게표현하는데구태여그것을다맞출필요는없음. 중요한건정보. 누구나, 어떤환경에서나 웹호환성 웹표준 웹접근성 ( 법규 ) 구분 웹표준웹접근성웹호환성 정의 (X)HTML 등에대해 W3C 가정해놓은규격 ( 문법 ), 또는이를준수하는것을의미 원하는정보에접근하고제어가가능한구현하는부분에초점 ( 대체텍스트의올바른사용, 색만이아닌패턴과동시사용등고려필요, 장애인차별금지법 ) 어떤브라우저에서보더라도같은정보를제공 (Cross Browsing 처리 : 브라우저의표현, 해석방식이제각각. 핵, 필터등부가조치필요 )

46 웹표준준수지침 IE 11 표준선정시시스템개발및운영의대원칙 1. 웹표준을기준으로개발하되, 범용적이지않은기능은 Cross Browsing 처리를한다. 2. 웹표준에서대응지침이없는기능은기존방식을유지해도되나, 최신트랜드를반영할수있다면반영함이원칙이다. 대상기업권장정책비고 HTML5 HTML5 태그스펙준수 Media Tag 권장 Canvas, SVG 권장 Device 제어지양 Offline Storage 금지 HTML5 스펙으로개발시 IE8에서미지원기능이발생하므로 HTML5shiv 같은 Library를이용하여임시대응가능 보안정책에위반이되는기능사용금지 (Offline Storage 등 ) HTML5 제공 Graphics 사용권장 CSS3 RIA 플랫폼 단계적향상기법 CSS2.1 준수 Media Query 허용 JavaScript 기반권장 최신버전 RIA 허용 CSS3.0의성숙도를고려하여 CSS2.1 기반으로개발하는것을권장하며, 동일환경에서일부 CSS3.0 기능사용가능 JavaScript 기반개발을권장하나, 생산성이나기술성숙도문제시상용 RIA 솔루션사용권장 (C/S 아키텍처 ) 적용 SW JavaScript 기반권장 Plugin 허용 Active X 금지 웹에서일부기능영역을제외하고는 JavaScript 기반의 SW 가이미출시되어있어서최신의 JavaScript 기반 SW 권장

47 웹표준 관심사의분리 웹페이지개발은 W3C 에서규정한웹표준을따라웹문서의구조 와표현그리고동작을구분해서사용해야함 일반적으로말하는 HTML5 무슨의미인가? 어떻게보이는가? 어떤동작을하는가? HTML5 데이터내용전달문서의구조표현 문서구조의상세화 멀티미디어 폼과이벤트등 CSS3 웹브라우저에서비주얼표현 기능의모듈화 웹폰트 JavaScript 각종 API 를통해기능을표현 웹스토리지 웹워커스 웹소켓 문서구조의의미를명확히하여디자인과프로그램의독립성을확보 서로다른다양한웹브라우저상에공통적인느낌을구현 ( 글꼴, 크기, 색상, 이벤트등 ) 풍부한기능과표현등을활용한로컬애플리케이션 웹표준문서 상호관계 동작이나표현이없더라도사용할수있어야한다. 표현은.css 파일로, 동작은.js 파일로분리한다. 마우스가없어도, 키보드만으로도사용되어져야한다.

48 HTML5 적용 모든브라우저가 HTML5 스펙에정의된모든기능을지원하고있지 는않으므로현재아래기능범위안에서 HTML5 활용을권고함 Reporting CSS2.1 구글맵 Cross Browsing 고려필요 각브라우저별 HTML5 및 CSS3 지원상태정보사이트 :

49 HTML5 적용 HTML5 기본템플릿 - 간단해진독타입 : html 의진화의과정일뿐이므로굳이숫자로버전을표시하지않음 <!doctype html> - html 요소 <html lang= ko > </html> - head 요소 : 문자인코딩선언은문서에서처음의 512 자이내에지정해야함 <meta charset= utf-8 > - 브라우저선택적적용 (IE 브라우저만해당 ) : 조건부주석 (IE 10 까지기능 ) <!--[if lt IE 9]> <script src= <![endif]--> - No More Type : 불필요한구문제거 <link rel= stylesheet href= main.css type= text/css > <script src= script.js type= text/javascript > - 대등한상황으로만들기 : John resig 이개발한 HTML5 를 IE 에서도인식하게만드는 HTML5Shiv.js 를사용하여 IE9 이전버전에서적용하도록설정. 레미샤프 Modernizr

50 HTML5 적용개요 HTML5 에서이용해볼만한몇가지가이드라인 - 엄격한 xhtml의방법을따를필요는없지만, 일관되고단순한코딩스타일을고수. XHTML에서처럼모든요소와속성에서소문자를사용.. 콘텐츠가없는빈요소는 <meta img input...> 닫는태그와뒤에붙는사선을생략한다. <img>. 콘텐츠를포함하는모든요소는닫는태크를써준다. <p></p>. 속성값에는다중클래스나링크값등이포함될수있으므로일관되게따옴표를써준다. - 논리속성에대해중복값을제공하지않는다.. <input type= check checked= checked > 보다는 <input type= check checked> 로표기

51 절제된스크립트처리 (unobtrusive scripting) 자바스크립트와 DOM을완벽히지원하지않는브라우저에서도웹사이트나웹애플리케이션이제대로동작하도록신중히 DOM 스크립트를작성한다는뜻 ( 많은기능을지원하는브라우저를사용할경우좀더나은사용자경험을제공하고, 많은기능을지원하지않는브라우저를사용해도사이트의기본적인정보제공에는문제가없도록한다는것 ) 자바스크립트사용최소화 (CSS 와 HTML 로대체 ) 마우스오버이벤트처리 (CSS 만으로구현가능 ) 얼룩말줄무늬테이블 ( 짝수행과홀수행의배경색을따로지정, CSS3 구조선택자사용 ) 페이지의마크업및디자인영역과기능영역분리하기 이벤트리스너를활용하여마크업문서와기능을담당하는코드 (DOM 스크립팅 ) 를분리

52 JavaScript Library 선택하기 Brian Reindel이자바스크립트라이브러리선택기준을발표 - 사용하고자하는라이브러리가주요브라우저전부를지원하는가? (Cross Browsing) - 라이브러리와관련된핵심개발팀이있는가? - 사용하려는라이브러리가충분히검증되었는가? ( 성숙도 ) - 공식적인업데이트가얼마나자주진행되는가? - 문서화가어느정도진행되었는가? - 활성화된커뮤니티가있는가? - 정기적으로벤치마크테스트가이루어지고있는가? - 사용자가직접확장가능한라이브러리인가? ( 난이도 ) - API 스타일이마음에드는가? ( 선호도 )

53 개발을쉽게도와주는 JS Framework 유티리티모듈 프레임워크 빌드도구 백엔드 테스트 파생언어 데이터베이스 underscore RequireJS 범용 MVC Full Stack GruntJS gulp.js Node.js socket.io Mocha QUnit CoffeeScript Dart Redis MongoDB Sizzle jquery AngularJS Meteor Broccoli express Karma TypeScript CouchDB Async YUI Backbone.js bsjs node-mysql Jasmine Jade OrientDB ZeptoJS Ext JS UPPERCASE node-oracle PhantomJS DBSlayer Dojo Toolkit CoreChain KnockOut Ember.js 패키지매니저 그래픽 connect Yeoman CasperJS Kendo UI TipJS npm.js bower D3.js three.js 참고 : Enyo processing.js Bootstrap No Data Binding No templating Routing via History API Basic persistence Data Binding Keep View in sync with Model Built-in templating Built-in view helpers Form handling Full Stack Framework End-to-end persistence Backbone Can JS Ember JS Meteor Spine JS Batman JS Angular JS

54 웹호환성 - CrossBrowsing 웹호환성은모든브라우저에서동일하게보이는것을의미 웹표준준수 표준 (X)HTML 문법준수 표준 CSS 문법준수 표준 DOM, Script 등문법준수 브라우저내장프로그램호환성 웹호환성준수지침 크로스브라우징 모든브라우저에서동일한서비스제공 기존시스템의 IE 하위버전브라우저호환성제공 웹호환성의확보 웹표준을준수하여특정브라우저에대한종속성을탈피하고, 최신웹기술사용을가능하게한다. 단, 정보외의브라우저개성이반영된사소한부분까지동일할필요는없다.

55 웹호환성파괴현상 Layout 파괴클릭무반응로그인불가 페이지레이아웃이흐트러지거나특정부분이표시되지않음 웹사이트안의단추를눌러도반응하지않음 로그인을해도로그인을하지않은상태로되돌아감 이밖에도작성된비표준코드에따라사용자가미처예상할수없는황당한현상이나타날수있다. 문제가되는 웹호환성파괴현상

56 5. CSS 퍼블리싱 - HTML5 기반웹퍼블리싱

57 CSS3 적용원칙 디자인을구현할때, 반드시동일한화면일필요는없이브라우저별특징 ( 초기값, 제약사항 ) 을반영할수있으면서내용의전달과기능사용이적절하게유지될수만있으면괜찮음. 단계적향상 등의원칙을적용하여개발하면생산성이향상됨 CSS 단계적기능향상 (Progressive Enhancement) 모든사용자에게반드시제공할정보와기능은기본으로모두제공하고좋은성능을가진브라우져를사용하는사용자에게는좀더멋진화면과추가적인기능을제공최근기기가다양해지면서현실적으로구버전브라우저도똑같은화면을제공하는것은비효율적위키북 : JavaScript 적절한기능축소 (Graceful Degradation) 어떤브라우저가어떤기능을지원하지않을때그러한기능결여가사용자에게최대한영향을미치지않아야한다는개념자바스크립트가동작하지않는브라우저에서도최소한콘텐츠가보이고동작하도록만드는것자바스크립트를정확하게사용하면, 해당기능이없는브라우저사용자들도동일하게서비스를이용할수있다. 이것을자바스크립트의단계적기능축소라고한다.

58 단계적향상 (Progressive Enhancement) 단계적향상적용예 섀도이펙트 구버전브라우저 (IE 8) 웹표준브라우저 ( 크롬 ) 내용만보임 효과까지보임 CSS3 에는 text-shadow, box-shadow 가추가됨. ( 기존에이미지로만처리할수있던기능임 ) 잘못된사례 Here, Are the texts you see? Here, Are the texts you see?

59 CSS3 적용 현재 CSS3 는데스크탑웹에서는범용적이지못하므로 CSS3 에서제 공하는기능중보편화된기능을일부만선별하여적용하도록권고함 반응형 UI

60 IE 11 하위버전브라우저호환성확보기법 API 명 조건부주석 (Conditional stylesheets) IE 버전별조건문제공 조건부클래스명 (Conditional classnames) Class 명을여러개사용 장점단점장점단점 내용 유효한 HTML 문법 CSS hack 대체가능 다수의 HTTP 요청이발생하기때문에브라우저의성능이감소 하나의조건부주석을로드하는동안다운로드를차단 반복사용시파일크기커짐 유지보수불리 ( 기본스타일시트변경시 IE의스타일시트도변경해야함 ) IE에정상 HTTP 요청을늘리지않음 (html 및 body 태그에 class 명부여 ) 조건부주석이다운로드를차단않음 HTML 파일의크기를늘림 스타일시트의셀렉터를늘림 메인과는별도로 IE의스타일을정의해야함 meta의문자코드선언은 HTML 문서의첫 1024 바이트에배치해야하는한도를초과하게됩니다. 예 : <meta charset= utf-8 > IE의호환성뷰 (X-UA-Compatible) 를제대로작동하지않을수있음

61 조건부주석 (Conditional stylesheets) 특정한버전에서만작동하는코드를위한태그제공 ( 타브라우저는주석으로인식함, IE 구버전대응은핵보다는조건부주석을권장 ) HTML CSS. foo { color : black ;} <!-- [if lte IE 8] <link rel = stylesheet href= lte-ie-8.css > <! [endif] --> <!-- [if lte IE 7] <link rel = stylesheet href= lte-ie-7.css > <! [endif] --> <!-- [if lte IE 6] <link rel = stylesheet href= lte-ie-6.css > <! [endif] -->. foo { color : green ;} / * lte-ie-8.css, for IE8 and older * /. foo { color : blue ;} / * lte-ie-7.css, for IE7 and older * / 장점 조건부주석을사용하여스타일시트를지정하는방법은유효한 HTML 문법 CSS hack을사용할필요가없음 단점. foo { color : red ;} / * lte-ie-6.css, for IE6 and older * / 다수의 HTTP 요청이발생하기때문에브라우저의성능이감소 하나의조건부주석을로드하는동안다운로드를차단 조건부주석은모든 HTML 파일에반복하여사용하면파일크기가커집니다. HTML 안에만사용할수있고, CSS에는이런식으로조건에따른주석사용불가. 여느편법과마찬가지로조건부조석역시가능하면적게사용해야합니다.

62 조건부클래스명 (Conditional classnames) CSS hack 을사용하는것을원하지않는경우, 주로다음과같은 <html> 및 <body> 에 class 이름을부여하는방법을사용 HTML <! [if lt IE7] <html class= ie6 > <! [endif] --> <! [if IE7] <html class= ie7 > <! [endif] --> <! [if IE8] <html class= ie8 > <! [endif] --> <! [if gt IE8] <! --> <html> <! -- <! [endif] --> CSS.foo { color: black; }.ie8.foo { color: green; } /* IE8 */.ie7.foo { color: blue; } /* IE7 */.ie6.foo { color: red; } /* IE6 & IE5 */ 장점 IE 에정상 HTTP 요청을늘리지않습니다. 특정경우조건부주석이다운로드를차단하지않습니다. 단점 이방법을사용하는 HTML 파일의크기를늘림 IE 의각버전에 class 이름을늘리기위해스타일시트의셀렉터를늘림 IE 의스타일을위해메인과는별도로 IE 의스타일을정의해야함 meta 의문자코드선언은 HTML 문서의첫 1024 바이트에배치해한도초과. 예 : <meta charset= utf-8 > IE 의호환성뷰 (X-UA-Compatible) 를제대로작동하지않을수있음

63 브라우저핵 브라우저이해, 버그해결, 선별적용 지난 10 년간브라우저버그와단점을해결해주는각종브라우저핵이개발되었지만, 이 러한핵사용이지금은어느정도효과가있을지몰라도다음버전의브라우저에서는먹 히지않을가능성이있으니될수있으면핵사용을자제해야합니다. 브라우저의문제점 어떤기능에대한지원이아예없음 ( 단계적향상기법에따르면, 그기능을지원하지않는브라우저는그냥무시 ) 어떤기능에대한지원이버그투성이. ( 똑같은기능의명세와구현이브라우저마다다름 ) 브라우저업체별 CSS 접두어 최신기능을먼저지원할수있도록제공. 브라우저업체별접두어는속성명, 선택자, 기 타 CSS 기능앞에붙습니다. 특정접두어가붙은기능은그접두어를지원하는브라우저 만이인식할수있습니다. 표준속성명도함께 지정하면브라우저의향후버전에서속성이 완전하게지원될때코드를수정하지않아도 됩니다. p { -webkit-border-radius: 1em; border-radius: 1em; }

64 FolyFill HTML5, CSS3 지원플러그인 Internet Explorer 이하의구현브라우저에서 HTML5 와 CSS3 에서제 공하는기능을사용하기위해서는플러그인을사용할수있음 HTML5 플러그인 1 HTML5 의새로운요소인 article, aside, hgroup, header, footer, figure, figcaption, nav, section 을인식할수있게만듬 ( 용량 2KB) <!--[if lt IE 9]> <script type= text/javascript src= html5shiv.js ></script> <![endif]--> HTML5Shiv.js 2 CSS3 플러그인 CSS3의 border-radius 속성, box-shadow 속성, linear-gradient 속성을사용가능 ( 모든 CSS3 속성을지원하는것은아님 ) CSS3 Pie IE9.js : HTML5 태그는물론일부 CSS3 선택자도인식하게해줌 ( 용량 41KB)

65 FolyFill IE7, IE8 에서미디어쿼리플러그인 IE6, IE7, IE8에서 CSS3 MediaQueryies.js 플러그인으로미디어쿼리사용가능 (CDN 대신다운로드하여내부링크권장 ) <!-- [if lt IE 9]> <script src= ></script> <script src= mediaqueries.js ></script> <! [endif] --> <link> 나 <script> 요소를사용하도록권장함 <link> 의 {~} screen and (min-width: 1200px) {} 와 media type이없으면효과가없는경우가있음

66 CSS 초기화 브라우저는브라우저마다약간씩다른 Default Style Sheet를이용하여마진, 패딩, 링크색상등을표시한후, 개별스타일시트를적용함. CSS 초기화를사용하면, 각브라우저별로다르게설정된스타일값을동일하게하여원하는스타일을표현하기쉬움 웹페이지의스타일시트적용 Step 1 Step 2 Step 3 Step 4 브라우저가웹 각브라우저별 웹페이지에설 최종스타일이 페이지파일을 디폴트스타일 정된개별스타 입혀진웹페이 메모리에로딩한 시트를웹페이 일시트를적용 지를화면에표 다. 지에적용한다. 한다. 현한다. 웹페이지를크기와두께가전부같은글자로구성된한개의긴단락으로표시 제목, 단락등블록요소에디폴트스타일적용 개별사용자가지정한모든설정을추가로적용 ( 추가된스타일만덮어쓰기 ) 브라우저화면사이즈에따라최종스타일이적용된웹페이지의내용을표시

67 CSS 초기화명령문의형태 수석 CSS 전문가인 Eric Meyer 가개발한초기화파일 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbdoy, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline } 이명령문을보면많은요소의 margin, padding, border가전부 0으로지정돼있어서모든요소의너비와높이는그안의콘텐트에따라서만결정됩니다. 이명령문에는전체선택자 (*) 가사용되지않아서사이트성능을고려했습니다. 브라우저내장스타일시트의기본 font-family, font-weight, 글자크기를무효화합니다. 이것은대부분의초기화명령에들어가는핵심요소입니다. Linked Style : <link rel= stylesheet type= text/css href= css파일명 />

68 CSS3 적용 기본적으로하나의 html 에다음 4 가지 CSS 가들어간다. CSS 이 css 들을 main.html 에모두링크시키는게아니라, main.html styles/main.css layout.css base.css reset.css 식으로들어간다. 이렇게 CSS 를외부파일로작성시꼭 CSS utf-8 ; 이라고선언을해주어야하지만위의경우처럼여러파일을불러올때에는제일처음불러오는파일 (reset.css) 에만 charset 선언을하면된다. ( CSS 작성순서 : position -> width -> height -> border -> margin -> padding) 전체선택자 : * {} 전체선택자는해당페이지에서사용하지않는태그들까지모두검색하기때문에속도가느려진다. 특히포털사이트처럼컨텐츠가많으면많을수록더더욱느려지기때문에절대사용하지않는다. CSS 적용테스트 : Acid Test 웹브라우저별로렌더링시어떤차이를보이는지확인함으로써, 웹표준 ( 크로스브라우징 ) 을준수했는지를체크. - Acid2 : css 만체크 - Acid3 : html, xhtml, dom, css2, css3 모두체크 용도 reset.css 모든요소들이가지고있는스타일을초기화 (ex. 블럭요소여백없애기 ) base.css layout.css main.css 모든페이지에공통적으로적용되는기본스타일 레이아웃을잡아줌 각페이지의 CSS

69 CSS 와사이트의성능문제 CSS 를이미지, 스크립트등과같은외부자원으로써사용하면, 두 가지측면에서사이트의성능문제에관여함 CSS 파일자체의크기 링크를통해사용한 CSS 파일개수 보통 CSS 파일은이미지같은외부자원에비해파일크기가작습니다. 하지만, 빈글자열과주석문을제거하고속기법을적극적으로사용하면파일크기를더압축할수있습니다. CSS 코드압축도구 : 실제필드에배포할때는스타일시트파일하나에모든속성선언문을모아서파일개수를줄이는것이성능에유리합니다.

70 CSS 프레임워크 글자, 레이아웃, 그밖의기능을대상으로하는재사용가능한주요 CSS 스타일을미리설정하여제공 - 코드재사용으로복잡한격자레이아웃을간단히제작가능하나디자인다양성제약 - 여러개의 CSS 파일로사이트성능저하 ( 파일병합압축으로해결 ) Christian Mortoya Blueprint CSS 초기화, 글자크기조절과기준선, 격자레이아웃, 폼요소스타일지정, 인쇄스타일등의기능 위지위그방식의웹기반격자레이아웃빌더 단점 : 탄력 / 유동레이아웃기능없음, 무의미한클래스명명법 ( 예 : push-12나 prepend-8 같은클래스명 ) YAML 탄력레이아웃과유동레이아웃기능우수 (vs Blueprint) 단점 : Blueprint의섬세한활자스타일기능이없음 (vs Blueprint) 비주얼레이아웃빌더 IE5 이상의모든브라우저지원 YUI Library CSS 툴 developer.yahoo.com/yui YUI 라이브러리에는 CSS 브라우저초기화, 정교한격자레이아웃 ( 비주얼격자빌더이용 ) 기능, 폰트배치기능을비롯한각종 CSS 도구가들어있습니다.

71 글꼴계통 CSS 는사용자의시스템에이미설치되어있는글꼴만사용가능 ( 웹글꼴 (web font) 은예외 ) CSS font-family 에하나이상의글꼴지정 가능 하나의 font-family에지정하는글꼴은비슷한글꼴을선택하는것이좋습니다. 비슷한글꼴의대표적인예는 Helvetica와 Arial입니다.( 대부분플랫폼에서지원함 ) font-family : Helvetica, Arial font-family : Times, Times New Roman, serif serif, sans-serif, monospace, cursive, fantasy 글꼴은 CSS가제공하는공통글꼴입니다. 사용자의컴퓨터에서글꼴을지원하지않을경우를대비하여비슷한글꼴을준비해야합니다. 여기서비슷한글꼴이라함은단순히서로모습이비슷한글꼴만을의미하는것이아니고, 크기또한비슷한글꼴을의미합니다. 글꼴의크기가비슷해야하나의글자가비슷한공간을차지하기때문입니다.

72 유효성검사 validator.w3.org 유효성검증기는마크업문서의 DOCTYPE 을확인해서해당 DOCTYPE 에맞는마크업구 문을적용해제공된문서의유효성을검증 HTML 구문에러원인 URL 을표현하거나혹은일반콘텐츠를표현하는곳에서앰퍼샌드기호 (&) 를사용한경우 ( 앰퍼샌드기호는특수문자, 숫자형문자참조에서만사용해야함 ) XHTML DOCTYPE 에서비어있는요소를표현할때닫는기호 (>) 앞에슬래시 (/) 를빠드린경우 XHTML DOCTYPE 에서요소의태그명과속성을작성할때대문자를사용한경우 요소를비정상적으로중첩한경우 ( 예를들어 <strong><a href= index.html >Home</strong></a> 처럼작성했을때 ) 인라인요소안에서블록요소를포함한경우 폼컨트롤과레이블이 form 요소바로아래직계자손으로포함된경우 ( 폼컨트롤과레이블은블록요소에포함된상태로 form 요소안에있어야함 ) img 요소처럼 alt 속성을반드시포함해야하는요소가 alt 속성을포함하지않는경우 font 또는 color 처럼폐기예정된요소와속성을사용한경우 문서최상단에선언된 DOCTYPE 지시자를대문자로작성하지않은경우 XHTML DOCTYPE 에서속성값에따옴표를빠뜨린경우 링크검사 validator.w3.org/checklink : 깨진링크를검사하는일

73 6. 주요 SW 대응현황

74 IE 11 적용권장 SW 선정기준 HTML5 기반의최신버전이나와있는 SW 는최신버전사용을권장 ( 단, SW 의성숙도를고려하고, HTML5 의기술적한계를고려하여선정 ) 기존 / 신규시스템에대한 SW 적용방침 IE 11, EMIE, 호환성보기로가능할경우기존 SW 를유지 기존시스템 단순패치로호환성확보가가능할경우기존 SW 를패치 기존 SW 교체만으로호환성확보가가능할경우 SW 교체 업무재개발영향도가클경우시스템재개발권장 신규시스템 HTML5 웹표준스펙을준수한 SW 사용권장 ( JavaScript 방식 > Plugin 방식 > ActiveX 방식 ) IE 11 과 IE 8 지원이상충될때, IE 11 지원을우선

75 권장 SW 대상분야 SW 버전별 IE 11 호환성대응방안에따라호환성조치및권장 SW 신규적용 분야내용비고 RIA MiPlatform, Xplatform, Nexacro, WebSquare Nexacro, WebSquare5, exbuilder5 Report OZ Report, Rexpert, CLIP Report, Report Designer CLIP, OZ 6.0, Crownix Grid WiseGrid, IBSheet, Spread, Gauce, XENA, jqgrid SBGrid, rmate, jqgrid 등 Chart Chart FX, amchart, TeeChart, Xchart, Infragistics Chart FX, D3, Rapheal 등 웹에디터 DextWebEditor, CKEditor, JWEditorPro, Cross Editor Dext5Editor, Naver, Daum 등 Utility File 처리 InnoEX, IUPDOWN Pro, DextUpload, OfficeHD EVA DextUpload 등 Call CTI Manager, CTI Monitor, CTI Softphone, evoice - Security INISAFE Web, TrustNet, ServiceLinker for Web Softcamp, 테르텐등 고려사항 RIA, Grid, File 처리분야는 HTML5 기술성숙도부족으로향후구현방식변화가예상됨 HTML5 기술미성숙분야과도기적 SW 적용불가피함 ( 프로젝트별기술검토필요 )

76 HTML5 기반 SW HTML5 기능적용사례 구분 Reporting Grid Chart 내용 HTML5 기술을적극도입한 Reporting Tool - 클립소프트 Clip Report : SVG 기반고품질이미지 - 포시에스 OZ Report 6.0 : Client Canvas, 서버 SVG 생성방식지원 대부분 JavaScript 기반으로제작하여 HTML5 완벽호환 오픈소스가활발한 Chart - SVG, Canvas, WebGL 기반의 Library 다수제공 (Rapheal, D3 등 ) 초기단계의 RIA RIA - exbuilder5 : Canvas 기반으로 FLEX 영역대체용이 - Nexacro : 웹표준을엄격하게준수 - WebSquare 5 : HTML5, CSS3 등지원

77 7. 브라우저표준전환전략

78 표준브라우저전환 HTML5 사용과 IE8 브라우저 EOS 대비 ( ) 필요성 고려사항 전략 브라우저별호환성확보로유지보수성향상 (Cross Browsing 기술필요 ) HTML5 기반사이트이용및개발 ( 최신브라우저필요 ) Active X 배제를통한보안강화 ( 대체기술필요 ) 신규 / 기존시스템동시운영 HTML5 기반신규시스템개발저비용 / 단기간전환표준브라우저일괄교체일부 Active X 기반 SW 유지 기존시스템 IE 11 기준보완신규시스템 HTML5 표준적용 브라우저전환 원칙 웹개발표준적용으로브라우저종속성탈피에대응 기존시스템의점진적개편으로시간 / 비용효율적전환

79 [Approach] 현기업의웹표준대응방안 기존웹사이트 EMIE 기반운영 / 신규웹사이트웹표준화준수 일반적웹브라우저호환성확보방법 자사개발웹어플리케이션 사내업무포털 외부고객사마케팅사이트등 기업용패키지웹어플리케이션 ERP 패키지 CRM 패키지 모바일웹어플리케이션 New Web Application Legacy Web Application Issue 웹표준을준수하여개발 HTML5 & CSS3 / Media Queries 적용 일부웹표준기반코드변경수행 구버전웹브라우저최적화된웹사이트에대하여, 호환성모드를활용한우회방안적용 ( 브라우저, 웹서버등에호환성기능활용 ) 새버전의브라우저호환성대응기간은평균 2~3 년단위로 PC 교체주기에맞추어서진행.( 빠른대응어려움 ) Active-X 사용하는업무시스템이평균전체 70% 이상 (ERP, 포털, 전자결재, 대용량이메일등 ) 호환성테스트 100% 수작업진행 호환성테스트문서기록없음 아직많은기업의웹로딩성능을고려하여, 모바일전용웹사이트등을제작하고있으나, 변화하는 IT 환경에효과적으로대응하기위하여웹표준준수를권고합니다.

80 기존시스템호환성확보지침 원칙 최소한의비용으로 IE 11 브라우저에서운영이가능하게구현 - EMIE 등도구사용가능, 사소한이미지깨짐은무시가능 기존시스템호환성지침 IE 11 변경사항보완 - IE 11에서변경된사항으로인한호환성오류수정 IE 11 호환도구 일반적인 IE11 대응지침 - EMIE 적용, 호환성보기사용법 브라우저설치 SW 패치 - IE 11 패치여부및대체 SW 권장가이드 패키지솔루션패치 - 패키지솔루션벤더사의패치 or 최신버전설치필요 예외사항참고자료 비표준아키텍처 SI 로 ActiveX 방식으로개발된시스템

81 브라우저비호환성대응유형 단계적향상 브라우저호환성을지원하지않는브라우저에는해당기능을제공하지않는것 -> 개발난이도 ( 디자인제약사항 ) 증가 -> 구형브라우저의점유율잔존으로인한고객불만 최신브라우저위주개발 조건부주석브라우저접두어 브라우저별로서로다른자바스크립트코드를작성하는것 -> 개발복잡도증가 -> 신규브라우저등장 ( 버전업 ) 에대한대응부족 브라우저별별도코드작성 조건문코딩 특정기능별로브라우저가지원하는지체크한뒤, 대체방법을제공하는코딩 ( 기능단위로코드분리 ) -> 개발복잡도증가 최신기능구현원칙 브라우저마다다른차이점으로생기는비호환성대응방법

82 신규시스템웹표준준수지침 원칙 웹표준을준수하게구현하여모든브라우저에서구동이가능 - 현재웹표준대응기술이없는영역에대해서는 IE11 기준으로개발 신규시스템웹표준지침 HTML5 태그를표준으로사용 ( 다른버전사용금지 ) CSS2.1 를표준으로사용 (CSS3 의일부기능이용가능 ) HTML5 기반 웹표준준수 기능별권장 SW ( 되도록웹표준에부합하는최신 SW 사용 ) Hack 적용가이드 (IE8 임시운영방편, HTML5Shiv, CSS3Pie) 퍼블리싱표준적용 - Cross Browsing 을고려하여 CSS 초기화적용 - Publisher 투입필수 (X-Platform 등 RIA 기반프로젝트예외 ) 미지원영역에대하여 IE11 기준개발 웹표준미지원영역에대한지침 IE11 기준개발시, 구버전지원기능은모듈화하여개발하여향후시스템을 Update 할때제거가쉽도록한다.

83 웹표준준수의방향성 웹표준을준수하여유지보수편의성강화 " 최신웹기술사용이가능하게한다. - HTML5 도입 - CSS 3 도입 - JavaScript 기반 SW 도입 웹보안강화를위하여비표준기술을제거한다. - 기존 Active X SW 대체 검증된표준 SW 사용으로안정성및유지보수성을향상시킨다. - TRM 준수 - 기획 TA 검토 웹표준준수로브라우저별중복개발 / 관리를줄인다. - 웹표준준수 - Cross Browsing

84 첨부. 웹표준및웹호환성진단하기 W3C 프로그램 KW3C : 한국정보화진흥원에서배포 사이트에서다운로드

85 참고. HTML5 웹호환성국내관련사이트 실전 HTML5 가이드 HTML5의모든것 한국 HTML5 사용자그룹 W3C HTML5 대한민국관심그룹 웹표준공방, 클리어보스 한국웹접근성그룹 NULI 널리공유하는웹표준화가이드 CSS DESIGN KOREA MS IE 11 호환성센터

86 End of Document

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

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

SBR-100S User Manual

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

More information

TTA Journal No.157_서체변경.indd

TTA Journal No.157_서체변경.indd 표준 시험인증 기술 동향 FIDO(Fast IDentity Online) 생체 인증 기술 표준화 동향 이동기 TTA 모바일응용서비스 프로젝트그룹(PG910) 의장 SK텔레콤 NIC 담당 매니저 76 l 2015 01/02 PASSWORDLESS EXPERIENCE (UAF standards) ONLINE AUTH REQUEST LOCAL DEVICE AUTH

More information

노트북 IT / 모바일 데스크탑 34 올인원PC 35 PC 소프트웨어 포터블SSD / SSD / 메모리카드 36 태블릿 37 휴대폰 39 PC 솔루션 IT / 모바일 IT / 모바일 노트북 29 삼성전자는 Windows 를 권장합니다. 삼성전자만의 편리하고 다양한 소프트웨어를 통해 초보자도 보다 쉽고 빠르게 이용 가능합니다. Easy Settings 삼성 패스트

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

SIGIL 완벽입문

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

More information

Ⅰ. 서론 1989년 CERN의 팀 버너스 리에 의해 만들어진 월드 와이드 웹 기술은 HTML(HyperText Markup Language), URL(Unified Resource Locator, HTTP(Hyper- Text Transfer Protocol)이라는

Ⅰ. 서론 1989년 CERN의 팀 버너스 리에 의해 만들어진 월드 와이드 웹 기술은 HTML(HyperText Markup Language), URL(Unified Resource Locator, HTTP(Hyper- Text Transfer Protocol)이라는 HTML5 기반의 웹 플랫폼 기술 표준화 동향 d 융합환경하에서의 신성장동력 분석 특집 전종홍 (J.H. Jeon) 이승윤 (S.Y. Lee) 서비스융합표준연구팀 책임연구원 서비스융합표준연구팀 팀장 Ⅰ. 서론 Ⅱ. 웹 기술의 진화 Ⅲ. 웹 애플리케이션 플랫폼 기술 표준 동향 Ⅳ. 웹 운영체제 기술 동향 Ⅴ. 결론 * 본 연구는 방송통신위원회의 지원을 받는 방송통신표준개발지원사업의

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

비디오 / 그래픽 아답터 네트워크 만약에 ArcGolbe를 사용하는 경우, 추가적인 디스크 공간 필요. ArcGlobe는 캐시파일을 생성하여 사용 24 비트 그래픽 가속기 Oepn GL 2.0 이상을 지원하는 비디오카드 최소 64 MB 이고 256 MB 이상을 메모리

비디오 / 그래픽 아답터 네트워크 만약에 ArcGolbe를 사용하는 경우, 추가적인 디스크 공간 필요. ArcGlobe는 캐시파일을 생성하여 사용 24 비트 그래픽 가속기 Oepn GL 2.0 이상을 지원하는 비디오카드 최소 64 MB 이고 256 MB 이상을 메모리 ArcGIS for Desktop 10.4 Single Use 설치가이드 Software: ArcGIS for Desktop 10.4 Platforms: Windows 10, 8.1, 7, Server 2012, Server 2008 ArcGIS for Desktop 10.4 시스템 요구사항 1. 지원 플랫폼 운영체제 최소 OS 버전 최대 OS 버전 Windows

More information

server name>/arcgis/rest/services server name>/<web adaptor name>/rest/services ArcGIS 10.1 for Server System requirements - 지

server name>/arcgis/rest/services  server name>/<web adaptor name>/rest/services ArcGIS 10.1 for Server System requirements - 지 ArcGIS for Server (Windows) 설치가이드 ArcGIS 10.2 for Server 설치변경사항 1 설치 간편해진설치 -.Net Framework나 Java Runtime 요구하지않음 - 웹서버 (IIS, WebSphere ) 와별도로분리되어순수하게웹서비스기반의 GIS 서버역할 - ArcGIS Server 계정을이용한서비스운영. 더이상 SOM,

More information

이 장에서 사용되는 MATLAB 명령어들은 비교적 복잡하므로 MATLAB 창에서 명령어를 직접 입력하지 않고 확장자가 m 인 text 파일을 작성하여 실행을 한다

이 장에서 사용되는 MATLAB 명령어들은 비교적 복잡하므로 MATLAB 창에서 명령어를 직접 입력하지 않고 확장자가 m 인 text 파일을 작성하여 실행을 한다 이장에서사용되는 MATLAB 명령어들은비교적복잡하므로 MATLAB 창에서명령어를직접입력하지않고확장자가 m 인 text 파일을작성하여실행을한다. 즉, test.m 과같은 text 파일을만들어서 MATLAB 프로그램을작성한후실행을한다. 이와같이하면길고복잡한 MATLAB 프로그램을작성하여실행할수있고, 오류가발생하거나수정이필요한경우손쉽게수정하여실행할수있는장점이있으며,

More information

PowerPoint 프레젠테이션

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

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 - windows server 2003 수동설치_non pro support_.doc

Microsoft Word - windows server 2003 수동설치_non pro support_.doc Windows Server 2003 수동 설치 가이드 INDEX 운영체제 설치 준비과정 1 드라이버를 위한 플로피 디스크 작성 2 드라이버를 위한 USB 메모리 작성 7 운영체제 설치 과정 14 Boot Sequence 변경 14 컨트롤러 드라이버 수동 설치 15 운영체제 설치 17 운영체제 설치 준비 과정 Windows Server 2003 에는 기본적으로

More information

슬라이드 1

슬라이드 1 강력한성능! 인터넷 / 업무용데스크탑 PC NX-H Series Desktop PC NX1- H700/H800/H900 NX2- H700/H800/H900 NX1-H Series 사양 Series 제품설명 ( 모델명 ) NX1-H Series, 슬림타입 기본형모델중보급형모델고급형모델 NX1-H800:112SN NX1-H800:324SN NX1-H800:534MS

More information

H3250_Wi-Fi_E.book

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

More information

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

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

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

EDB 분석보고서 (04.06) ~ Exploit-DB(http://exploit-db.com) 에공개된별로분류한정보입니다. Directory Traversal users-x.php 4.0 -support-x.php 4.0 time-

EDB 분석보고서 (04.06) ~ Exploit-DB(http://exploit-db.com) 에공개된별로분류한정보입니다. Directory Traversal users-x.php 4.0 -support-x.php 4.0 time- EDB 분석보고서 (04.06) 04.06.0~04.06.0 Exploit-DB(http://exploit-db.com) 에공개된별로분류한정보입니다. 분석내용정리 ( 작성 : 펜타시큐리티시스템보안성평가팀 ) 04년 06월에공개된 Exploit-DB의분석결과, SQL 공격에대한보고개수가가장많았습니다. 이와같은결과로부터여전히 SQL 이웹에서가장많이사용되는임을확인할수있습니다.

More information

슬라이드 1

슬라이드 1 핚국산업기술대학교 제 14 강 GUI (III) 이대현교수 학습안내 학습목표 CEGUI 라이브러리를이용하여, 게임메뉴 UI 를구현해본다. 학습내용 CEGUI 레이아웃의로딩및렌더링. OIS 와 CEGUI 의연결. CEGUI 위젯과이벤트의연동. UI 구현 : 하드코딩방식 C++ 코드를이용하여, 코드내에서직접위젯들을생성및설정 CEGUI::PushButton* resumebutton

More information

Index 1. Intro Install Connect Scratch 1.4 (Offline Editor) Scratch 2.0 (Online Editor) Connect f

Index 1. Intro Install Connect Scratch 1.4 (Offline Editor) Scratch 2.0 (Online Editor) Connect f Scratch 호환 센서 보드 SKY SSB 설정 메뉴얼 1st of April 2016 Techdine Index 1. Intro... 03 2. Install... 04 3. Connect... 06 3-1. Scratch 1.4 (Offline Editor)... 06 3-2. Scratch 2.0 (Online Editor)... 09 3-2-1. Connect

More information

Microsoft Word - FunctionCall

Microsoft Word - FunctionCall Function all Mechanism /* Simple Program */ #define get_int() IN KEYOARD #define put_int(val) LD A val \ OUT MONITOR int add_two(int a, int b) { int tmp; tmp = a+b; return tmp; } local auto variable stack

More information

1. 배경 업무 내용이나 개인정보가 담긴 청구서 등을 메일로 전달 시 중요한 정보가 유출되는 경우가 발생하고 있으며, 이에 따른 메일 암호화 솔루션을 도입하고 있으나 기존 ActiveX를 기반으로 한 플러그인 방식은 여러 가지 제약으로 인해 사용성이 저하되고, 고객 대

1. 배경 업무 내용이나 개인정보가 담긴 청구서 등을 메일로 전달 시 중요한 정보가 유출되는 경우가 발생하고 있으며, 이에 따른 메일 암호화 솔루션을 도입하고 있으나 기존 ActiveX를 기반으로 한 플러그인 방식은 여러 가지 제약으로 인해 사용성이 저하되고, 고객 대 Non-ActiveX 방식의 메일암호화 솔루션 1. 배경 업무 내용이나 개인정보가 담긴 청구서 등을 메일로 전달 시 중요한 정보가 유출되는 경우가 발생하고 있으며, 이에 따른 메일 암호화 솔루션을 도입하고 있으나 기존 ActiveX를 기반으로 한 플러그인 방식은 여러 가지 제약으로 인해 사용성이 저하되고, 고객 대응 및 운영 비용이 증가하는 원인이 되어 개선이

More information

<B1DDC0B6C1A4BAB8C8ADC1D6BFE4B5BFC7E228313232C8A3292E687770>

<B1DDC0B6C1A4BAB8C8ADC1D6BFE4B5BFC7E228313232C8A3292E687770> 금융정보화 주요동향 제122호 2010. 3. 30 1. 금융업계 IT동향 2. IT 동향 3. IT 용어 정보시스템본부 종 합 2010. 3월 제122호 1. 금융업계 IT동향 올해 금융IT핵심 화두는 통합, 그리고 모바일 은행, 스마트폰 뱅킹 서비스 강화 증권업계, 공동 통합보안관제 체계 구축 추진 카드업계, 스마트폰 애플리케이션 개발 확산 미래에셋생명,

More information

공지사항

공지사항 상명사이버캠퍼스 군이러닝 강좌 학습안내 1. 사이버캠퍼스 접속방법 브라우저 주소창에서 직접 http://cyber.smu.ac.kr 입력하여 접속합니다. : 추천 2. 개설강좌 및 수업 안내 가. 개설과목 : 컴퓨터와정보사회(군인) 나. 수업시작 : 2015. 9.1(화) 10:00 이후부터 다. 평가방법 1) 중간, 기말고사는 off-line

More information

Microsoft PowerPoint - Smart CRM v4.0_TM 소개_20160320.pptx

Microsoft PowerPoint - Smart CRM v4.0_TM 소개_20160320.pptx (보험TM) 소개서 2015.12 대표전화 : 070 ) 7405 1700 팩스 : 02 ) 6012 1784 홈 페이지 : http://www.itfact.co.kr 목 차 01. Framework 02. Application 03. 회사 소개 01. Framework 1) Architecture Server Framework Client Framework

More information

52 l /08

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

More information

PowerPoint 프레젠테이션

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

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

System Recovery 사용자 매뉴얼

System Recovery 사용자 매뉴얼 Samsung OS Recovery Solution 을이용하여간편하게 MagicInfo 의네트워크를설정하고시스템을백업및복원할수있습니다. 시스템시작시리모컨의 - 버튼이나키보드의 F3 키를연속해서누르면복구모드로진입한후 Samsung OS Recovery Solution 이실행됩니다. Samsung OS Recovery Solution 은키보드와리모컨을사용하여조작할수있습니다.

More information

*2008년1월호진짜

*2008년1월호진짜 3. USB 이동식저장장치를이용하여전파되는악성코드분석 1. 개 요 최근 USB 이동식 저장장치를 통하여 전파되는 악성코드에 대한 감염피해가 증가하고 있어 주의가 필요하다. 이번에 확인된 ntion.exe 악성코드는 감염 시, 특정 사이트에 접속하여 추가 악성코드를 다운로드하는 Dropper 기능을 수행한다. 또한, 웹 서버가 감염될 경우는 웹 서버내의 웹 페이지가

More information

EDB 분석보고서 (04.03) ~ Exploit-DB(http://exploit-db.com) 에공개된별로분류한정보입니다. ** 5개이상발생한주요소프트웨어별상세 EDB 번호 종류 공격난이도 공격위험도 이름 소프트웨어이름 3037 SQL Inj

EDB 분석보고서 (04.03) ~ Exploit-DB(http://exploit-db.com) 에공개된별로분류한정보입니다. ** 5개이상발생한주요소프트웨어별상세 EDB 번호 종류 공격난이도 공격위험도 이름 소프트웨어이름 3037 SQL Inj EDB 분석보고서 (04.03) 04.03.0~04.03.3 Exploit-DB(http://exploit-db.com) 에공개된별로분류한정보입니다. 분석내용정리 ( 작성 : 펜타시큐리티시스템보안성평가팀 ) 04년 03월에공개된 Exploit-DB의분석결과, 해커들이가장많이시도하는공격으로알려져있는 SQL Injection 공격에대한보고개수가가장많았습니다. 무엇보다주의가필요한부분은

More information

LG-LU6200_ICS_UG_V1.0_ indd

LG-LU6200_ICS_UG_V1.0_ indd 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

More information

슬라이드 1

슬라이드 1 마이크로컨트롤러 2 (MicroController2) 2 강 ATmega128 의 external interrupt 이귀형교수님 학습목표 interrupt 란무엇인가? 기본개념을알아본다. interrupt 중에서가장사용하기쉬운 external interrupt 의사용방법을학습한다. 1. Interrupt 는왜필요할까? 함수동작을추가하여실행시키려면? //***

More information

가. 페이퍼리스 인프라 구현 페이퍼리스(paperless) 프로세스의 변화 Green IT 정책 종이문서에 소요되는 제반비용의 증가 등을 이유로 전자문서의 활용 시스템에 대한 사회적 요청 제기 등으로 대변되는 Paperless Office 패러다임 종이문서의 사용을 지양하고, 전자문서를 중심으로 하는 새로운 업무처리 프로세스를 정립 (1975)

More information

Cisco FirePOWER 호환성 가이드

Cisco FirePOWER 호환성 가이드 Cisco 호환성가이드 Cisco 호환성 이문서에서는 Cisco 소프트웨어와하드웨어의호환성및요건을다룹니다. 추가 릴리스또는제품정보는다음을참조하십시오. 설명서로드맵 : http://www.cisco.com/c/en/us/td/docs/security/firesight/ roadmap/firesight-roadmap.html Cisco ASA 호환성가이드 : http://www.cisco.com/c/en/us/td/docs/security/asa/compatibility/

More information

View Licenses and Services (customer)

View Licenses and Services (customer) 빠른 빠른 시작: 시작: 라이선스, 라이선스, 서비스 서비스 및 주문 주문 이력 이력 보기 보기 고객 가이드 Microsoft 비즈니스 센터의 라이선스, 서비스 및 혜택 섹션을 통해 라이선스, 온라인 서비스, 구매 기록 (주문 기록)을 볼 수 있습니다. 시작하려면, 비즈니스 센터에 로그인하여 상단 메뉴에서 재고를 선택한 후 내 재고 관리를 선택하십시오. 목차

More information

학습목표 함수프로시저, 서브프로시저의의미를안다. 매개변수전달방식을학습한다. 함수를이용한프로그래밍한다. 2

학습목표 함수프로시저, 서브프로시저의의미를안다. 매개변수전달방식을학습한다. 함수를이용한프로그래밍한다. 2 학습목표 함수프로시저, 서브프로시저의의미를안다. 매개변수전달방식을학습한다. 함수를이용한프로그래밍한다. 2 6.1 함수프로시저 6.2 서브프로시저 6.3 매개변수의전달방식 6.4 함수를이용한프로그래밍 3 프로시저 (Procedure) 프로시저 (Procedure) 란무엇인가? 논리적으로묶여있는하나의처리단위 내장프로시저 이벤트프로시저, 속성프로시저, 메서드, 비주얼베이직내장함수등

More information

고객 카드 1588-7278

고객 카드 1588-7278 고객 카드 1588-7278 i 안전을 위한 경고사항 안전을 위한 주의사항 i 헤드유닛 DISP RADIO MEDIA PHONE SEEK TRACK 헤드유닛 FOLDER MUTE SCAN SETUP 스티어링 휠 리모트 컨트롤 + - MODE 기본모드 화면 Radio 모드 변경 RADIO 라디오 주파수 검색하기 SEEK TRACK 라디오 모드 사용하기 저장방송

More information

PCServerMgmt7

PCServerMgmt7 Web Windows NT/2000 Server DP&NM Lab 1 Contents 2 Windows NT Service Provider Management Application Web UI 3 . PC,, Client/Server Network 4 (1),,, PC Mainframe PC Backbone Server TCP/IP DCS PLC Network

More information

ActFax 4.31 Local Privilege Escalation Exploit

ActFax 4.31 Local Privilege Escalation Exploit NSHC 2013. 05. 23 악성코드 분석 보고서 [ Ransomware 악성코드 ] 사용자의 컴퓨터를 강제로 잠그고 돈을 요구하는 형태의 공격이 기승을 부리고 있 습니다. 이러한 형태의 공격에 이용되는 악성코드는 Ransomware로 불리는 악성코 드 입니다. 한번 감염 시 치료절차가 복잡하며, 보고서 작성 시점을 기준으로 지속 적인 피해자가 발생되고

More information

PHP & ASP

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

More information

Special Theme _ 모바일웹과 스마트폰 본 고에서는 모바일웹에서의 단말 API인 W3C DAP (Device API and Policy) 의 표준 개발 현황에 대해서 살펴보고 관 련하여 개발 중인 사례를 통하여 이해를 돕고자 한다. 2. 웹 애플리케이션과 네이

Special Theme _ 모바일웹과 스마트폰 본 고에서는 모바일웹에서의 단말 API인 W3C DAP (Device API and Policy) 의 표준 개발 현황에 대해서 살펴보고 관 련하여 개발 중인 사례를 통하여 이해를 돕고자 한다. 2. 웹 애플리케이션과 네이 모바일웹 플랫폼과 Device API 표준 이강찬 TTA 유비쿼터스 웹 응용 실무반(WG6052)의장, ETRI 선임연구원 1. 머리말 현재 소개되어 이용되는 모바일 플랫폼은 아이폰, 윈 도 모바일, 안드로이드, 심비안, 모조, 리모, 팜 WebOS, 바다 등이 있으며, 플랫폼별로 버전을 고려하면 그 수 를 열거하기 힘들 정도로 다양하게 이용되고 있다. 이

More information

KPS-19MA-1.hwp

KPS-19MA-1.hwp 판서모니터 사양(모델명 KPS-19MA) 모델명 KPS-19MA 화면크기 19.0 inch 해상도 1280 (H)x1024 (v) 픽셀크기 0.294 x0.294 mm 화소 16.7M (8 bits/color) 선명도 800:1 밝기 300 cd/m2 응답속도 Tr+Tf=5 ms 시야각 +80 ~80 (H), +80 ~80 (V) Tablet Specification

More information

일반인을 위한 전자책 제작 방법

일반인을 위한 전자책 제작 방법 국립중앙도서관 디지털 정보활용능력 교육 이펍(ePub) 제작 입문 2015. 6. 강사 : 최 현 이북스펍 대표 (http://ebookspub.co.kr) - 1 - - 강의 내용 - 1. epub 이란 무엇인가 1.1. 전자책 출판 프로세스 이해 1.2. 전자책의 다양한 형태와 제작방식 1.2. epub 개념 이해 및 제작툴 종류 2. epub 제작툴 소개

More information

Chapter 4. LISTS

Chapter 4. LISTS C 언어에서리스트구현 리스트의생성 struct node { int data; struct node *link; ; struct node *ptr = NULL; ptr = (struct node *) malloc(sizeof(struct node)); Self-referential structure NULL: defined in stdio.h(k&r C) or

More information

목 차 1. 개 요... 1 1.1. 배경... 1 1.2. 요약... 1 1.3. 정보... 2 1.4. 대상시스템... 2 1.5. 원리... 2 2. 공격 기법 및 기본 개념... 3 2.1. Heap Spray... 3 2.2. Font... 4 3. 공 격..

목 차 1. 개 요... 1 1.1. 배경... 1 1.2. 요약... 1 1.3. 정보... 2 1.4. 대상시스템... 2 1.5. 원리... 2 2. 공격 기법 및 기본 개념... 3 2.1. Heap Spray... 3 2.2. Font... 4 3. 공 격.. 취약점 분석 보고서 [ Adobe Flash Player 11.3 Kern Table Parsing Integer Overflow - CVE-2012-1535 ] 2012-08-23 RedAlert Team 안상환 목 차 1. 개 요... 1 1.1. 배경... 1 1.2. 요약... 1 1.3. 정보... 2 1.4. 대상시스템... 2 1.5. 원리...

More information

FileMaker 15 WebDirect 설명서

FileMaker 15 WebDirect 설명서 FileMaker 15 WebDirect 2013-2016 FileMaker, Inc.. FileMaker, Inc. 5201 Patrick Henry Drive Santa Clara, California 95054 FileMaker FileMaker Go FileMaker, Inc.. FileMaker WebDirect FileMaker, Inc... FileMaker.

More information

1. 제품 개요 AhnLab Policy Center 4.6 for Windows(이하 TOE)는 관리대상 클라이언트 시스템에 설치된 안랩의 안티바이러스 제품인 V3 제품군에 대해 보안정책 설정 및 모니터링 등의 기능을 제공하여 관리대상 클라이언트 시스템에 설치된 V3

1. 제품 개요 AhnLab Policy Center 4.6 for Windows(이하 TOE)는 관리대상 클라이언트 시스템에 설치된 안랩의 안티바이러스 제품인 V3 제품군에 대해 보안정책 설정 및 모니터링 등의 기능을 제공하여 관리대상 클라이언트 시스템에 설치된 V3 CR-15-59 AhnLab Policy Center 4.6 for Windows 인증보고서 인증번호 : ISIS-0631-2015 2015년 7월 IT보안인증사무국 1. 제품 개요 AhnLab Policy Center 4.6 for Windows(이하 TOE)는 관리대상 클라이언트 시스템에 설치된 안랩의 안티바이러스 제품인 V3 제품군에 대해 보안정책 설정

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

컴퓨터관리2번째시간

컴퓨터관리2번째시간 Company 컴퓨터 관리 참고 자료 PC 운영체제 POST 기능 :, ROM BIOS ( : [F8]) 1. Windows XP Windows XP 사용자 계정 :,,, 강화된 디지털 미디어 지원 기능 : (Windows Movie Maker), CD (Windows Media Player), Windows 홈 네트워크 기능 :, 강화된 시스템 관리 :,

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

접근성과 웹 The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, the inventor

접근성과 웹 The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, the inventor 웹 접근성 : 최근 동향 신정식 jshin@i18nl10n.com 2006-06-29 웹 접근성 : 최근 동향 2 / 30 신정식 접근성과 웹 The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee,

More information

e-spider_제품표준제안서_160516

e-spider_제품표준제안서_160516 The start of something new ECMA Based Scraping Engine CONTENTS 3 4 1 2 3 4 5 6 7 8 9 5 6 ECMA Based Scraping Engine 7 No.1 No.2 No.3 No.4 No.5 8 24 ( ) 9 ios Device (all architecture) Android Device (all

More information

Amazon EBS (Elastic Block Storage) Amazon EC2 Local Instance Store (Ephemeral Volumes) Amazon S3 (Simple Storage Service) / Glacier Elastic File Syste (EFS) Storage Gateway AWS Import/Export 1 Instance

More information

ThinkVantage Fingerprint Software

ThinkVantage Fingerprint Software ThinkVantage 지문 인식 소프트웨어 First Edition (August 2005) Copyright Lenovo 2005. Portions Copyright International Business Machines Corporation 2005. All rights reserved. U.S. GOVERNMENT USERS RESTRICTED RIGHTS:

More information

Windows Server 2012

Windows Server  2012 Windows Server 2012 Shared Nothing Live Migration Shared Nothing Live Migration 은 SMB Live Migration 방식과다른점은 VM 데이터파일의위치입니다. Shared Nothing Live Migration 방식은 Hyper-V 호스트의로컬디스크에 VM 데이터파일이위치합니다. 반면에, SMB

More information

5장. JSP와 Servlet 프로그래밍을 위한 기본 문법(완성-0421).hwp

5장. JSP와 Servlet 프로그래밍을 위한 기본 문법(완성-0421).hwp 1 0 1.7 6 5 'A ' '/ u 4 4 2 2 ' " JS P 프로그래밍 " A ', 'b ', ' 한 ', 9, \ u d 6 5 4 ' c h a r a = 'A '; 0 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 < % @ p a g e c o n te n

More information

354-437-4..

354-437-4.. 357 358 4.3% 5.1% 8.2% 6.2% 5.6% 6% 5% 5.3% 96.1% 85.2% 39.6% 50.8% 82.7% 86.7% 28.2% 8.0% 60.0% 60.4% 18,287 16,601 (%) 100 90 80 70 60 50 40 86.6% 80.0% 77.8% 57.6% 89.7% 78.4% 82.1% 59.0% 91.7% 91.4%

More information

소개 Mac OS X (10.9, 10.10, 10.11, 10.12) 와 OKI 프린터호환성 Mac OS X 를사용하는 PC 에 OKI 프린터및복합기 (MFP) 제품을연결하여사용할때, 최고의성능을발휘할수있도록하는것이 OKI 의목 표입니다. 아래의문서는 OKI 프린터및

소개 Mac OS X (10.9, 10.10, 10.11, 10.12) 와 OKI 프린터호환성 Mac OS X 를사용하는 PC 에 OKI 프린터및복합기 (MFP) 제품을연결하여사용할때, 최고의성능을발휘할수있도록하는것이 OKI 의목 표입니다. 아래의문서는 OKI 프린터및 OKI 프린터호환성 Mac OS X 와호환성 Ma(10.9) Ma(10.10) Ma(10.11) Ma(10.12) 버전 : 7.8 날짜 : 2017-05-10 소개 Mac OS X (10.9, 10.10, 10.11, 10.12) 와 OKI 프린터호환성 Mac OS X 를사용하는 PC 에 OKI 프린터및복합기 (MFP) 제품을연결하여사용할때, 최고의성능을발휘할수있도록하는것이

More information

BMP 파일 처리

BMP 파일 처리 BMP 파일처리 김성영교수 금오공과대학교 컴퓨터공학과 학습내용 영상반전프로그램제작 2 Inverting images out = 255 - in 3 /* 이프로그램은 8bit gray-scale 영상을입력으로사용하여반전한후동일포맷의영상으로저장한다. */ #include #include #define WIDTHBYTES(bytes)

More information

Microsoft Word - 문필주.doc

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

More information

슬라이드 1

슬라이드 1 ment Perspective (주)아임굿은 빅데이터 기술력, 반응형웹 제작, 온라인마케팅 노하우를 겸비한 IT 솔루션개발 및 마케팅 전문 기업입니다. 웹 정보를 수집하는 크롟링 시스템과 대량의 데이터를 처리하는 빅데이터 기술을 통해 쉽게 지나칠 수 있는 정보를 좀 더 가치있고 흥미로운 결과물로 변화하여 고객에게 제공하고 있습니다. 또한 최근 관심이 높아지고

More information

ICT03_UX Guide DIP 1605

ICT03_UX Guide DIP 1605 ICT 서비스기획시리즈 01 모바일 UX 가이드라인 동준상. 넥스트플랫폼 / v1605 모바일 UX 가이드라인 ICT 서비스기획시리즈 01 2 ios 9, OS X Yosemite (SDK) ICT Product & Service Planning Essential ios 8, OS X Yosemite (SDK) ICT Product & Service Planning

More information

2

2 2 About Honeyscreen Copyright All Right Reserved by Buzzvil 3 2013.06 2013.1 2014.03 2014.09 2014.12 2015.01 2015.04 전체 가입자 수 4 7 8 10대 20대 30대 40대 50대 9 52.27 % 42.83 % 38.17 % 33.46 % 10 Why Honeyscreen

More information

<4D6963726F736F667420576F7264202D205B4354BDC9C3FEB8AEC6F7C6AE5D3131C8A35FC5ACB6F3BFECB5E520C4C4C7BBC6C320B1E2BCFA20B5BFC7E2>

<4D6963726F736F667420576F7264202D205B4354BDC9C3FEB8AEC6F7C6AE5D3131C8A35FC5ACB6F3BFECB5E520C4C4C7BBC6C320B1E2BCFA20B5BFC7E2> 목차(Table of Content) 1. 클라우드 컴퓨팅 서비스 개요... 2 1.1 클라우드 컴퓨팅의 정의... 2 1.2 미래 핵심 IT 서비스로 주목받는 클라우드 컴퓨팅... 3 (1) 기업 내 협업 환경 구축 및 비용 절감 기대... 3 (2) N-스크린 구현에 따른 클라우드 컴퓨팅 기술 기대 증폭... 4 1.3 퍼스널 클라우드와 미디어 콘텐츠 서비스의

More information

Microsoft PowerPoint - 02_Linux_Fedora_Core_8_Vmware_Installation [호환 모드]

Microsoft PowerPoint - 02_Linux_Fedora_Core_8_Vmware_Installation [호환 모드] 리눅스 설치 Vmware를 이용한 Fedora Core 8 설치 소프트웨어실습 1 Contents 가상 머신 실습 환경 구축 Fedora Core 8 설치 가상 머신 가상 머신 가상 머신의 개념 VMware의 설치 VMware : 가상 머신 생성 VMware의 특징 실습 환경 구축 실습 환경 구축 Fedora Core 8 설치 가상 머신의 개념 가상 머신 (Virtual

More information

오버라이딩 (Overriding)

오버라이딩 (Overriding) WindowEvent WindowEvent 윈도우가열리거나 (opened) 닫힐때 (closed) 활성화되거나 (activated) 비활성화될때 (deactivated) 최소화되거나 (iconified) 복귀될때 (deiconified) 윈도우닫힘버튼을누를때 (closing) WindowEvent 수신자 abstract class WindowListener

More information

월간 2016. 03 CONTENTS 3 EXPERT COLUMN 영화 점퍼 와 트로이목마 4 SPECIAL REPORT 패치 관리의 한계와 AhnLab Patch Management 핵심은 패치 관리, 왜? 8 HOT ISSUE 2016년에 챙겨봐야 할 개인정보보호

월간 2016. 03 CONTENTS 3 EXPERT COLUMN 영화 점퍼 와 트로이목마 4 SPECIAL REPORT 패치 관리의 한계와 AhnLab Patch Management 핵심은 패치 관리, 왜? 8 HOT ISSUE 2016년에 챙겨봐야 할 개인정보보호 안랩 온라인 보안 매거진 2016. 03 Patch Management System 월간 2016. 03 CONTENTS 3 EXPERT COLUMN 영화 점퍼 와 트로이목마 4 SPECIAL REPORT 패치 관리의 한계와 AhnLab Patch Management 핵심은 패치 관리, 왜? 8 HOT ISSUE 2016년에 챙겨봐야 할 개인정보보호 법령 사항

More information

歯이시홍).PDF

歯이시홍).PDF cwseo@netsgo.com Si-Hong Lee duckling@sktelecom.com SK Telecom Platform - 1 - 1. Digital AMPS CDMA (IS-95 A/B) CDMA (cdma2000-1x) IMT-2000 (IS-95 C) ( ) ( ) ( ) ( ) - 2 - 2. QoS Market QoS Coverage C/D

More information

OZ-LMS TM OZ-LMS 2008 OZ-LMS 2006 OZ-LMS Lite Best IT Serviece Provider OZNET KOREA Management Philosophy & Vision Introduction OZNETKOREA IT Mission Core Values KH IT ERP Web Solution IT SW 2000 4 3 508-2

More information

User Guide

User Guide HP ThinUpdate 관리자 설명서 Copyright 2016 HP Development Company, L.P. Windows는 미국 및/또는 기타 국가에서 Microsoft Corporation의 등록 상표 또는 상표입 니다. 기밀 컴퓨터 소프트웨어. 소유, 사용 또는 복사 에 필요한 유효한 사용권을 HP로부터 취득했 습니다. FAR 12.211 및

More information

목 차 DEXTUpload Pro 소개 시스템 요구 사항 기능 및 특징 시스템 구성도 벤치마킹 적용 효과 유지보수 안내 담당자 안내

목 차 DEXTUpload Pro 소개 시스템 요구 사항 기능 및 특징 시스템 구성도 벤치마킹 적용 효과 유지보수 안내 담당자 안내 LOW SYSTEM RESOURCE REQUIREMENTS HIGH UPLOAD SPEED GRAPHICAL PROGRESS INDICATOR DEXTUpload Pro Introduction www.devpia.com l www.dextsolution.com 목 차 DEXTUpload Pro 소개 시스템 요구 사항 기능 및 특징 시스템 구성도 벤치마킹 적용

More information

컴퓨터과학과 교육목표 컴퓨터과학과의 컴퓨터과학 프로그램은 해당분야 에서 학문적 기술을 창의적으로 연구하고 산업적 기술을 주도적으로 개발하는 우수한 인력을 양성 함과 동시에 직업적 도덕적 책임의식을 갖는 IT인 육성을 교육목표로 한다. 1. 전공 기본 지식을 체계적으로

컴퓨터과학과 교육목표 컴퓨터과학과의 컴퓨터과학 프로그램은 해당분야 에서 학문적 기술을 창의적으로 연구하고 산업적 기술을 주도적으로 개발하는 우수한 인력을 양성 함과 동시에 직업적 도덕적 책임의식을 갖는 IT인 육성을 교육목표로 한다. 1. 전공 기본 지식을 체계적으로 2015년 상명대학교 ICT융합대학 컴퓨터과학과 졸업 프로젝트 전시회 2015 Computer Science Graduate Exhibition 2015 Computer Science Graduate Exhibition 1 컴퓨터과학과 교육목표 컴퓨터과학과의 컴퓨터과학 프로그램은 해당분야 에서 학문적 기술을 창의적으로 연구하고 산업적 기술을 주도적으로 개발하는

More information

Microsoft Word - 김완석.doc

Microsoft Word - 김완석.doc 포커스 구글의 기술과 시사점 김완석* 성낙선** 정명애*** 구글에는 전설적인 다수의 개발자들이 지금도 현역으로 일하고 있으며, 구글 창업자와 직원들이 직접 대 화하는 금요회의가 지금도 계속되고 있다. 구글은 창업자, 전설적 개발자, 금요회의, 복지 등 여러 면에서 화제와 관심의 대상이다. 이러한 화제의 구글을 기술 측면에서 이해하기 위하여 구글의 주요 기술에

More information

<4D6963726F736F667420576F7264202D20C1A4BAB8C5EBBDC5C1F8C8EFC7F9C8B8BFF8B0ED5FBDBAB8B6C6AEBDC3B4EBBAF22E727466>

<4D6963726F736F667420576F7264202D20C1A4BAB8C5EBBDC5C1F8C8EFC7F9C8B8BFF8B0ED5FBDBAB8B6C6AEBDC3B4EBBAF22E727466> 스마트TV 시대의 빅뱅과 미디어 생태계 송 민 정 KT 경제경영연구소, mzsong@kt.com 1. 들어가는 말 스마트TV란 스마트폰 운영체제(Operating System)를 탑재해 소비자가 인터넷을 통해 다양한 애플리케이션(Application: 이후 앱)을 다운로드 받을 수 있게 하는 신개념의 TV이며, 스마트폰이 촉발한 또 하나의 단말 혁명이다. 스마트폰과

More information

810 & 820 810 는 소기업 및 지사 애 플리케이션용으로 설계되었으며, 독립 실행형 장치로 구성하거 나 HA(고가용성)로 구성할 수 있습니다. 810은 표준 운영 체제를 실행하는 범용 서버에 비해 가격 프리미엄이 거의 또는 전혀 없기 때문에 화이트박스 장벽 을

810 & 820 810 는 소기업 및 지사 애 플리케이션용으로 설계되었으며, 독립 실행형 장치로 구성하거 나 HA(고가용성)로 구성할 수 있습니다. 810은 표준 운영 체제를 실행하는 범용 서버에 비해 가격 프리미엄이 거의 또는 전혀 없기 때문에 화이트박스 장벽 을 목적에 맞게 설계된 어플라 이언스 원격 용도로 최적화된 어플라이언스 관리 및 에너지 효율성 향상 원격 관리 LOM(Lights Out Management), IPMI 2.0 장치 식별 버튼/LED 실시간 시스템 환경 및 오류 모 니터링 Infoblox MIBS를 통한 SNMP 모니터링 고가용성 공급 장치 예비 디스크 예비 냉각 팬 전원 공급 장치 현장 교체

More information

1

1 1 2 3 4 5 6 b b t P A S M T U s 7 m P P 8 t P A S M T U s 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Chapter 1 29 1 2 3 4 18 17 16 15 5 6 7 8 9 14 13 12 11 10 1 2 3 4 5 9 10 11 12 13 14 15

More information

슬라이드 1

슬라이드 1 NetBeans 1. 도구 개요 2. 설치 및 실행 3. 주요 기능 4. 활용 예제 1. 도구 개요 1.1 도구 정보 요약 도구명 소개 특징 주요기능 NetBeans 라이선스 CDDL, GPLv2 (http://trac.edgewall.org/) 통합 개발 환경(IDE : integrated development environment)으로써, 프로그래머가 프로그램을

More information

목 차 Ⅰ. 일반사항 1 Ⅱ. 특기사항 3 Ⅲ. 물품내역 및 세부규격 8 Ⅳ. 주의사항 11-2 -

목 차 Ⅰ. 일반사항 1 Ⅱ. 특기사항 3 Ⅲ. 물품내역 및 세부규격 8 Ⅳ. 주의사항 11-2 - 대전마케팅공사 경영정보포털 구축 사업 패키지 소프트웨어 2식 구매 설치 시방서 (소프트웨어 2식) 2016. 06. 대전마케팅공사 경 영 지 원 파 트 목 차 Ⅰ. 일반사항 1 Ⅱ. 특기사항 3 Ⅲ. 물품내역 및 세부규격 8 Ⅳ. 주의사항 11-2 - Ⅰ. 일반사항 1. 목적 본 시방서는 대전마케팅공사가 추진하고 있는 경영정보포털 사업의 패키지 소프트웨어 도입을

More information

Microsoft Word - Armjtag_문서1.doc

Microsoft Word - Armjtag_문서1.doc ARM JTAG (wiggler 호환 ) 사용방법 ( IAR EWARM 에서 ARM-JTAG 로 Debugging 하기 ) Test Board : AT91SAM7S256 IAR EWARM : Kickstart for ARM ARM-JTAG : ver 1.0 ( 씨링크테크 ) 1. IAR EWARM (Kickstart for ARM) 설치 2. Macraigor

More information

<4D6963726F736F667420576F7264202D2033BFF920BECBBEE0BFF9B0A3BAB8B0EDBCAD2E646F6378>

<4D6963726F736F667420576F7264202D2033BFF920BECBBEE0BFF9B0A3BAB8B0EDBCAD2E646F6378> 목차 Part Ⅰ. 2 월의 악성코드 통계 1. 악성코드 통계... 2 (1) 감염 악성코드 Top 15... 2 (2) 카테고리별 악성코드 유형... 3 (3) 카테고리별 악성코드 비율 전월 비교... 3 (4) 월별 피해 신고 추이... 4 (5) 월별 악성코드 DB 등록 추이... 4 2. 악성코드 이슈 분석 악성코드 종합 선물셋트 Bredolab Worm...

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

<3035303432365FC8A8C6E4C0CCC1F620B0B3B9DF20BAB8BEC8B0A1C0CCB5E5C3D6C1BE28C0FAC0DBB1C7BBE8C1A6292E687770>

<3035303432365FC8A8C6E4C0CCC1F620B0B3B9DF20BAB8BEC8B0A1C0CCB5E5C3D6C1BE28C0FAC0DBB1C7BBE8C1A6292E687770> 개 요 홈페이지 해킹 현황 및 사례 홈페이지 개발시 보안 취약점 및 대책 주요 애플리케이션 보안 대책 결 론 참고자료 [부록1] 개발 언어별 로그인 인증 프로세스 예제 [부록2] 대규모 홈페이지 변조 예방을 위한 권고(안) [부록3] 개인정보의 기술적 관리적 보호조치 기준(안) [부록4] 웹 보안관련 주요 사이트 리스트 7000 6,478 6000 5000

More information

디지털 공학

디지털 공학 캡스톤디자인 App Inventor 디지털전자정보계열 앱 인벤터란? MIT 대학 미디어 랩 연구실에서 만든 안드로 이드용 스마트폰 앱 제작하는 블록 프로그래 밍 기법의 비주얼 프로그래밍 도구이다. 스마트폰의 화면을 디자인하고 블록들을 조 립하면 우리가 원하는 앱을 만들 수 있다. 인터넷이 연결된 곳에서는 어디서라도 접속 하여 앱 화면을 직접 디자인하고 프로그래밍

More information

Xcovery 사용설명서

Xcovery 사용설명서 ㄱ 센티리온 프리미엄 사용설명서 목 차 Chapter 1 프로그램 소개 및 기본개념 1) 시스템 복구 2) 시스템백업 3) 시스템 백업 및 시스템 복구 활용하기 4) 폴더보호 Chapter 2 프로그램 설치하기 1) 프로그램 설치 방법 2) Centillion 설치 소프트웨어 사용권 계약서 3) 제품 인증 키 입력 4) Centillion 폴더보호 5) Windows

More information

<C0CCBCBCBFB52DC1A4B4EBBFF82DBCAEBBE7B3EDB9AE2D313939392D382E687770>

<C0CCBCBCBFB52DC1A4B4EBBFF82DBCAEBBE7B3EDB9AE2D313939392D382E687770> i ii iii iv v vi 1 2 3 4 가상대학 시스템의 국내외 현황 조사 가상대학 플랫폼 개발 이상적인 가상대학시스템의 미래상 제안 5 웹-기반 가상대학 시스템 전통적인 교수 방법 시간/공간 제약을 극복한 학습동기 부여 교수의 일방적인 내용전달 교수와 학생간의 상호작용 동료 학생들 간의 상호작용 가상대학 운영 공지사항,강의록 자료실, 메모 질의응답,

More information

마켓온_제품소개서_20131111.key

마켓온_제품소개서_20131111.key 제품소개서 Your Expert Business Partner. CMS. Mobile. Enterprise System. 패스트스퀘어 시스템 마켓온 SNS 2013. 11. 11 Contents 1. 솔루션 개요 2. 솔루션 특징 3. 솔루션 주요기능 4. 솔루션 구성 마켓온 - 솔루션 개요 솔루션 개요 기업을 위한 유연하고 편리한 커뮤니케이션 솔루션 마켓온은

More information

SSL VPN 운영 지침서

SSL VPN 운영 지침서 KAIST SSL VPN USER MANUAL 2012. 6 목차 제 1장 DESKTOP USER 1. Microsoft Windows (page 4) 2. MACKINTOSH MAC (page13) 3. Linux X-Windows 3-1 Redhat (page 26) 3-2 UBUNTU (page 41) 3-3 OPEN SUSE (page 57) 제 2장

More information

45호_N스크린 추진과정과 주체별 서비스 전략 분석.hwp

45호_N스크린 추진과정과 주체별 서비스 전략 분석.hwp 방송통신기술 이슈&전망 2014년 제 45호 N스크린 추진과정과 주체별 서비스 전략 분석 Korea Communications Agency 2014.01.17 방송통신기술 이슈&전망 2014년 제 45 호 개요 N스크린 서비스는 하나의 콘텐츠를 스마트폰, PC, 태블릿, 자동차 등 다양한 디지 털 정보기기에서 공유할 수 있는 차세대컴퓨팅, 네트워크 서비스를

More information

스마트월드캠퍼스 교육교제

스마트월드캠퍼스 교육교제 LG Smart TV SDK 활용법 Contents 1. Using LG Smart TV SDK 2. Testing & Publishing 3. UX Guideline Using LG Smart TV SDK LG Smart TV SDK 구성 Open API IDE* App 구현을 위한 LG Smart TV 인터페이스 제공 Media playback, TV 제어,

More information

PDF_Compass_32호-v3.pdf

PDF_Compass_32호-v3.pdf Design Compass는 특허청의 디자인맵 웹사이트에서 제공하는 디자인, 브랜드, 기술, 지식재산권에 관한 다양한 콘텐츠를 디자이너들의 입맛에 맞게 엮은 격월간 디자인 지식재산권 웹진입니다. * Design Compass는 저작이용이 허락된 서울서체(서울시)와 나눔글꼴(NHN)을 사용하여 제작되었습니다. 2 4 5 6 7 9 10 11 편집 / 디자인맵

More information

wtu05_ÃÖÁ¾

wtu05_ÃÖÁ¾ 한 눈에 보는 이달의 주요 글로벌 IT 트렌드 IDG World Tech Update May C o n t e n t s Cover Story 아이패드, 태블릿 컴퓨팅 시대를 열다 Monthly News Brief 이달의 주요 글로벌 IT 뉴스 IDG Insight 개발자 관점에서 본 윈도우 폰 7 vs. 아이폰 클라우드 컴퓨팅, 불만 검증 단계 돌입 기업의

More information

No Slide Title

No Slide Title 저속 고토크 유압 모터 JS,JH, 시리즈 2K / J2K, 6k / J6K 시리즈 2005-1 B137 001-02 June 2000 JH 시리즈 특징 스풀 밸브 및 지로터가 있는 컴팩트한 디자인. 수입 고압 용량 샤프트 씰, 다 양한 범위의 마운팅 플랜지, 샤프트, 포트, 속도가 설계 유연성을 제공합 니다. 샤프트 회전 방향 및 속도는 쉽고 부드럽게 제어할

More information

특징 찾아보기 열쇠 없이 문을 열 수 있어요! 비밀번호 및 RF카드로도 문을 열 수 있습니다. 또한 비밀번호가 외부인에게 알려질 위험에 대비, 통제번호까지 입력해 둘 수 있어 더욱 안심하고 사용할 수 있습니다. 나만의 비밀번호 및 RF카드를 가질 수 있어요! 다수의 가

특징 찾아보기 열쇠 없이 문을 열 수 있어요! 비밀번호 및 RF카드로도 문을 열 수 있습니다. 또한 비밀번호가 외부인에게 알려질 위험에 대비, 통제번호까지 입력해 둘 수 있어 더욱 안심하고 사용할 수 있습니다. 나만의 비밀번호 및 RF카드를 가질 수 있어요! 다수의 가 www.kdnetwork.com 특징 찾아보기 열쇠 없이 문을 열 수 있어요! 비밀번호 및 RF카드로도 문을 열 수 있습니다. 또한 비밀번호가 외부인에게 알려질 위험에 대비, 통제번호까지 입력해 둘 수 있어 더욱 안심하고 사용할 수 있습니다. 나만의 비밀번호 및 RF카드를 가질 수 있어요! 다수의 가능할 삭제할 건전지 사용자를 위한 개별 비밀번호 및 RF카드

More information

Arbortext 24.. /.,,,.. PTC.,,? CAD,,???? -.. PTC Arbortext. Arbortext,,,. Arbortext. CRM, ERP elearning PTC Arbortext. Arbortext PTC...,. Arbortext S1000D, DITA,, elearning /. Arbortext. /...,. /. XML

More information

예제 2) Test.java class A intvar= 10; void method() class B extends A intvar= 20; 1"); void method() 2"); void method1() public class Test 3"); args) A

예제 2) Test.java class A intvar= 10; void method() class B extends A intvar= 20; 1); void method() 2); void method1() public class Test 3); args) A 제 10 장상속 예제 1) ConstructorTest.java class Parent public Parent() super - default"); public Parent(int i) this("hello"); super(int) constructor" + i); public Parent(char c) this(); super(char) constructor

More information

Windows Embedded Compact 2013 [그림 1]은 Windows CE 로 알려진 Microsoft의 Windows Embedded Compact OS의 history를 보여주고 있다. [표 1] 은 각 Windows CE 버전들의 주요 특징들을 담고

Windows Embedded Compact 2013 [그림 1]은 Windows CE 로 알려진 Microsoft의 Windows Embedded Compact OS의 history를 보여주고 있다. [표 1] 은 각 Windows CE 버전들의 주요 특징들을 담고 OT S / SOFTWARE 임베디드 시스템에 최적화된 Windows Embedded Compact 2013 MDS테크놀로지 / ES사업부 SE팀 김재형 부장 / jaei@mdstec.com 또 다른 산업혁명이 도래한 시점에 아직도 자신을 떳떳이 드러내지 못하고 있는 Windows Embedded Compact를 오랫동안 지켜보면서, 필자는 여기서 그와 관련된

More information

(Microsoft PowerPoint - AndroG3\306\367\306\303\(ICB\).pptx)

(Microsoft PowerPoint - AndroG3\306\367\306\303\(ICB\).pptx) w w w. g b t e c. c o. k r 6 안드로이드 App 적용하기 115 1. 안드로이드개요 모바일 OS 의종류 - 스마트폰 : 스마트폰운영체제탑재 애플의 IOS(iPhone OS) - 아이폰, 아이패드, 아이팟터치 구글의안드로이드 - Nexus, 갤럭시 A, S, 모토로이, 시리우스,... MS 의윈도우모바일 ( 윈도우폰 7) - 옴니아 2,

More information