크로스 브라우징과 반응형 웹을 위한 어비의 노하우 HTML5 보일러플레이트

Size: px
Start display at page:

Download "크로스 브라우징과 반응형 웹을 위한 어비의 노하우 HTML5 보일러플레이트"

Transcription

1 Hanbit ebook Realtime 31 크로스브라우징과반응형웹을위한어비의노하우 HTML5 보일러플레이트 송태민지음

2 크로스브라우징과반응형웹을위한어비의노하우 HTML5 보일러플레이트

3 크로스브라우징과반응형웹을위한어비의노하우 HTML5 보일러플레이트 초판발행 2013 년 6 월 30 일 지은이송태민 / 펴낸이김태헌펴낸곳한빛미디어 ( 주 ) / 주소서울시마포구양화로 7길 83 한빛미디어 ( 주 ) IT출판부전화 / 팩스 등록 1999년 6월 24일제 호 ISBN / 정가 9,900원 책임편집배용석 / 기획이중민 / 편집김연숙디자인표지여동일, 내지스튜디오 [ 밈 ], 조판박진희마케팅박상용, 박주훈, 정민하 이책에대한의견이나오탈자및잘못된내용에대한수정정보는한빛미디어 ( 주 ) 의홈페이지나아래이메일로알려주십시오. 한빛미디어홈페이지 / 이메일 ask@hanb.co.kr Published by HANBIT Media, Inc. Printed in Korea Copyright c 2013 HANBIT Media, Inc. 이책의저작권은송태민과한빛미디어 ( 주 ) 에있습니다. 저작권법에의해보호를받는저작물이므로무단복제및무단전재를금합니다. 저작권법에의해보호를받는저작물이므로무단복제및무단전재를금합니다. 지금하지않으면할수없는일이있습니다. 책으로펴내고싶은아이디어나원고를메일 (ebookwriter@hanb.co.kr) 로보내주세요. 한빛미디어 ( 주 ) 는여러분의소중한경험과지식을기다리고있습니다.

4 지은이 _ 송태민 ( 어비, UhBee) 언제나새로운주제를빠르게탐구한후자신의지식을다른사람들과어떻게나누는것이좋을지에대해서고민하고책을쓰는소신있는웹퍼블리셔이자현업 UI/ UX 디자이너입니다. 또한한달에한곡이상은꼭작사 / 작곡해서발표한다는신념아래자신을채찍질하는왑듀오의리더이자래퍼이기도합니다. 현재 SK플래닛에서 UI/UX 디자이너로다양한서비스를개발하고있으며, UX/UI를연구하는어비팩토리공장장이자 KAC한국예술원멀티미디어디자인과외래교수로활동중입니다. 또한디자인정글, 디노마드등에서강의를진행하며, 웹개발트렌드와관련한각종세미나에서자주볼수있는스피커이기도합니다. 저서로 크리에이티브디자이너를위한웹표준 ( 제우미디어, 2009), 어비의모바일 HTML ( 에세이, 2011), 어비의모바일웹 ( 길벗, 2012), 반응형웹디자인 ( 위키북스, 2013) 등이있습니다. 주요경력現 SK플래닛 UX 디자이너現 KAC한국예술원멀티미디어디자인과교수現어비팩토리대표前 SK커뮤니케이션즈 UX/UI/GUI 前이베이코리아 UX 디자이너前현대엠엔소프트 TDX 디자이너前그래택 - 곰플레이어디자이너

5 저자서문 HTML5라는기술이있더라도각나라의웹환경에맞춘표준문안은조금씩다른법입니다. 왜냐하면관련기술의선호도와인프라가다를수있기때문입니다. 즉, 국내에서는국내실정에맞는 HTML5 표준문안이필요하다는뜻입니다. 필자는 14년이넘도록웹퍼블리셔로일해온경험을바탕으로국내환경에맞는 HTML5 보일러플레이트템플릿을제작하여더나은 HTML5 웹제작환경을구축하는데이바지할수있도록노력하고싶습니다. 사실이책을쓰게된계기는 HTML5에기반을둔웹페이지를누구나쉽게제작할수있도록하기위해템플릿을공유하는외국의모임을접하면서입니다. 이러한템플릿을국내실정에맞게변형하여공유해서사용할수있다면어떨까하는생각이발전한것이죠. 항상웹페이지를만들때마다기존에사용하던코드를찾아복사하거나붙여넣는작업이지루하고복잡했다면이제부터는이책에서소개하는 HTML5 보일러플레이트를이용해손쉽게마크업할수있기를바랍니다. 이책이나오기까지물심양면으로도움을준한빛미디어스마트미디어팀여러분감사합니다. 특히기획단계에서부터아이디어도함께고민하고, 집필하는동안옆에서열심히응원해준이중민대리님께감사드립니다 ( 앞으로도계속함께할수있는최고의파트너가되기를 ). 때로는밤새우면서한권한권씩집필할때마다묵묵히옆에서가정을챙겨준아내김재연, 아빠와함께놀고싶은마음이가득함에도기특하게도잘참아준두딸채빈이와나윤이에게도항상감사하고사랑한다는말과함께더욱열심히하는남편, 아빠가되고싶다는말을전하고싶습니다. 그리고번역하면서같은느낌을공유하고조언을아끼지않은동생지연이, 필자가 더잘되도록항상응원해주는 KAC 한국예술원정택민팀장님과 KAC 한국예술원

6 임직원여러분, 앞으로저자로사는삶도성실하기를바라며많은응원을해주신 SK플래닛황실근팀장님, 최근호부장님, 강진호부장님, 이재성매니저님, 서광민매니저님, 앞으로항상재미있고열정적으로함께일할수있기를바랍니다. 페이스북을통해응원해준이동윤, 박근용, 윤우건등많은분과디노마드, 웹스미디어에감사의말을전합니다. 마지막으로저의영원한스승 김세원 형님사랑합니다. 집필을마치며송태민

7 추천사 김세원 _ 세종씨앤피모바일사업부 / 차장 HTML5 보일러플레이트의진정한가이드북 이책은 HTML5라는거대한세계를폭넓게, 그리고가능한한깊이있게여러분에게전달하는표준매뉴얼의하나라고생각합니다. 일반적으로 HTML5라불리는것은여러가지요소의집합체인만큼전체내용은엄청나게방대합니다. 웹에서도정보가여러곳에흩어져있어전체모습을파악하는것만도꽤고생스러운일일정도입니다. 최근각웹브라우저의업그레이드가매우빠른속도로진행되므로가까운시일안에많은문제가해결될것으로예상합니다만그전까지는 W3C의 HTML5 기술문서등을참고하면서공부하는것이더정확합니다. 그러려면 HTML5를쉽고빠르게습득할수있는레이아웃인템플릿을분석하면서공부하는것이지름길일것입니다. 이책은웹디자이너와웹퍼블리셔그리고개발자, 기획자에게 HTML5 보일러플 레이트라는템플릿형태의마크업을제시하는가이드로손색없는책입니다.

8 베타리더 서광민 _ SK planet / 매니저 어느분야든변화의시점에서는다양한서비스가탄생할기회가생기기마련입니다. 그리고좋은아이디어를가진분이라면이런상황을적극활용하여다양한실험을해보고싶은욕망도생길것입니다. 이때중요한점은바로 속도 입니다. 서비스디자인이나개발속도에서많은시간을허비하게되면결국서비스가성공할시기를놓칩니다. 또한다양한서비스를짧은시간안에디자인하고테스트해보는것도따지고보면시간과의싸움입니다. 그런면에서 HTML5 보일러플레이트 는웹서비스에요구하는시간과의싸움에서유리한고지를차지할수있도록상당한도움을줍니다. 왜냐하면반복작업을미리설정하거나개개인의작업방식에맞춘사용자화설정까지할수있어같은작업을반복진행할때빠른처리가가능하며효율적으로시간을활용할수있기때문입니다. 물론이책은 HTML5를처음부터차근차근설명하는책은아닙니다. 하지만웹페이지제작의기초지식이있다면국내실정에맞는 HTML5 보일러플레이트를통해 HTML5를빠르게살펴볼수있습니다. 국내웹서비스에종사하고있는많은분께실질적인도움이될수있을것으로확신합니다.

9 조성민 _ 현대오토에버 / 대리 모바일아키텍트라는업무의특성상 HTML5를대할때는웹표준준수, 다양한웹엔진을기반으로하는크로스브라우징지원, 여러가지디바이스를지원하는반응형스크립트작성기법에대해늘고민하게됩니다. 정답이존재하지않는문제라최대한효율적이며합리적인사고를해야하며이때가장도움이되는것은실무에서쌓은다양하고깊은경험입니다. 이러한고민을하는한사람으로서먼저필자의노력에박수를보내고싶습니다. 한두사람이만든예제로책이구성되면필자가자주사용하는디자인패턴이나기능위주로흐를염려가있습니다. 그런면에서이책은수많은외국의웹디자이너가오픈소스프로젝트형태로만든템플릿에기반을두어최대한객관적인시각을유지하면서도다양한고급예제를제공하려는필자의의지가돋보입니다. 특히최근이슈가되고있는반응형웹디자인요소관련스크립트샘플코드를다수제공함으로써실무에서바로사용할수있다는것은다른책과구별되는이책의장점이라고할수있을것입니다. 실무에서 6개월이상근무한경력이있는웹퍼블리셔, 스크립터라면매우적절한활용서가될것으로생각합니다.

10 이동윤 ( 윤들쥔장 ) _ ( 주 ) 넥스트이지 / SI 전략사업부기획팀장 1996년부터웹디자인을시작하여벤처회사를거쳐, 웹디자인교육, 디자인자격증관련서적집필, IT업체의기획자로서지금까지웹업계에종사하면서새로운기술이나외국트렌드를국내에소개하고전파하기란쉬운일이아니다는것을깨닫곤합니다. 특히지금처럼웹생태계가혼란을겪는시기에는아무리좋은기술이있어도대중화가되지못한다면묻혀버리기십상이죠. 특히세미나와같이지나가버리는형식이아닌책으로소개된다는것은대단한노력이필요한일입니다. 베타리딩을하면서특히나놀랐던점은바로 HTML5 보일러플레이트의소개와분석에만그치지않고, 필자가국내환경에맞는 HTML5 보일러플레이트템플릿을만들어전파하고, 또실무에적용하여사용할수있도록예제를통해자세하고도친절하게안내를해주고있다는것입니다. 아마오랜기간웹업계에종사한경력자든, 급하게실무프로젝트를진행해야하는초보웹퍼블리셔든이책은언제든지찾아볼수있는아주유용한지침서가될것으로기대합니다.

11 예제파일 예제파일 : 예제웹페이지 : 질문 / 답변커뮤니티 - 어비의웹표준커뮤니티

12 한빛 ebook 리얼타임 한빛 ebook 리얼타임은 IT 개발자를위한 ebook 입니다. 요즘 IT 업계에는하루가멀다하고수많은기술이나타나고사라져갑니다. 인터넷을아무리뒤져도조금이나마정리된정보를찾는것도쉽지않습니다. 또한잘정리되어책으로나오기까지는오랜시간이걸립니다. 어떻게하면조금이라도더유용한정보를빠르게얻을수있을까요? 어떻게하면남보다조금더빨리경험하고습득한지식을공유하고발전시켜나갈수있을까요? 세상에는수많은종이책이있습니다. 그리고그종이책을그대로옮긴전자책도많습니다. 전자책에는전자책에적합한콘텐츠와전자책의특성을살린형식이있다고생각합니다. 한빛이지금생각하고추구하는, 개발자를위한리얼타임전자책은이렇습니다. 1. ebook Only - 빠르게변화하는 IT 기술에대해핵심적인정보를신속하게제공합니다. 500페이지가까운분량의잘정리된도서 ( 종이책 ) 가아니라, 핵심적인내용을빠르게전달하기위해조금은거칠지만 100페이지내외의전자책전용으로개발한서비스입니다. 독자에게는새로운정보를빨리얻을수있는기회가되고, 자신이먼저경험한지식과정보를책으로펴내고싶지만너무바빠서엄두를못내시는선배, 전문가, 고수분에게는보다쉽게집필하실기회가되리라생각합니다. 또한새로운정보와지식을빠르게전달하기위해 O'Reilly의전자책번역서비스도하고있습니다. 2. 무료로업데이트되는, 전자책전용서비스입니다. 종이책으로는기술의변화속도를따라잡기가쉽지않습니다. 책이일정한분량이상으로집필되고정리되어나오는동안기술은이미변해있습니다. 전자책으로출간된이후에도버전업을통해중요한기술적변화가있거나, 저자 ( 역자 ) 와독자가소통하면서보완되고발전된노하우가정리되면구매하신분께무료로업데이트해드립니다.

13 3. 독자의편의를위하여, DRM-Free로제공합니다. 구매한전자책을다양한 IT기기에서자유롭게활용하실수있도록 DRM-Free PDF 포맷으로제공합니다. 이는독자여러분과한빛이생각하고추구하는전자책을만들어나가기위해, 독자여러분이언제어디서어떤기기를사용하시더라도편리하게전자책을보실수있도록하기위함입니다. 4. 전자책환경을고려한최적의형태와디자인에담고자노력했습니다. 종이책을그대로옮겨놓아가독성이떨어지고읽기힘든전자책이아니라, 전자책의환경에가능한최적화하여쾌적한경험을드리고자합니다. 링크등의기능을적극적으로이용할수있음은물론이고글자크기나행간, 여백등을전자책에가장최적화된형태로새롭게디자인하였습니다. 앞으로도독자여러분의충고에귀기울이며지속해서발전시켜나가도록하겠습니다. 지금보시는전자책에소유권한을표시한문구가없거나타인의소유권한을표시한 문구가있다면위법하게사용하고계실가능성이높습니다. 이경우저작권법에의해 불이익을받으실수있습니다. 다양한기기에사용할수있습니다. 또한한빛미디어사이트에서구입하신후에는횟수에 관계없이다운받으실수있습니다. 한빛미디어전자책은인쇄, 검색, 복사하여붙이기가가능합니다. 전자책은오탈자교정이나내용의수정보완이이뤄지면업데이트관련공지를이메일로 알려드리며, 구매하신전자책의수정본은무료로내려받으실수있습니다. 이런특별한권한은한빛미디어사이트에서구입하신독자에게만제공되며, 다른 사람에게양도나이전되지않습니다.

14 차례 01 HTML5 보일러플레이트소개 HTML5 보일러플레이트란? HTML5 보일러플레이트의주요특징 jquery 라이브러리 Modernizr 라이브러리 HTML5 보일러플레이트다운로드 Github Initializr HTML5 보일러플레이트의버전별변화 HTML5 보일러플레이트의장단점 HTML5 보일러플레이트분석 HTML5 보일러플레이트구조 루트디렉터리구조 추가디렉터리구조 index.html 분석 normalize.css 분석 HTML5 요소관련설정 기본요소관련설정 하이퍼링크요소관련설정 텍스트요소관련설정 목록요소관련설정 내장콘텐츠요소관련설정 44

15 2.3.7 <figure> 요소관련설정 <form> 및하위요소관련설정 <table> 요소관련설정 main.css 분석 HTML5 보일러플레이트고유설정 Chrome 프레임관련설정 도움을주는 class 속성설정 미디어쿼리관련설정 plugins.js 분석 국내환경에맞게수정한 HTML5 보일러플레이트템플릿 수정한 HTML5 보일러플레이트구조 index.html의변경점 normalize.css의변경점 국내에서사용하지않는 normalize.css 코드예 새롭게추가하거나수정한부분 main.css의변경점 예제웹페이지만들기 웹페이지구성노하우 반응형웹구성미리보기 레이아웃구조살펴보기 레이아웃구조만들기 78

16 4.3.1 HTML 마크업 CSS 코딩 반응형웹만들기 레이아웃 CSS 반응형 header 영역만들기 HTML 마크업 CSS 코딩 article 영역만들기 HTML 마크업 이미지플리킹효과 CSS 코딩 aside 영역만들기 HTML 마크업 CSS 코딩 footer 영역만들기 HTML 마크업 CSS 코딩 placeholder 속성변경하기 반응형웹 : 태블릿 PC 버전완성하기 header 영역 article 영역 aside 영역 footer 영역 크로스브라우징확인 109

17 부록예제웹페이지소스코드 114 index.html 114 normalize.css 119 main.css 120 index.css 121

18 1 HTML5 보일러플레이트소개 1990년웹의창시자로불리는팀버너스리가처음 HTML과웹브라우저, 서버소프트웨어를공개한후약 20년의세월이흘렀습니다. 그사이에웹은팀버너스리가생각했던것이상으로놀라운발전속도를보였다고생각합니다. 그리고웹개발을위한많은직군이생겨났습니다. 이책에서는많은직군중웹퍼블리셔를대상으로설명을이어갈것이며 1 장에서 는지금부터소개하려는 HTML5 보일러플레이트가무엇인지와 HTML5 보일러플 레이트의특징과장단점을설명합니다. 1.1 HTML5 보일러플레이트란? 최근웹사이트를만드는사람의주요관심사라면누가뭐라고해도 HTML5, CSS3, 자바스크립트에기반을둔라이브러리입니다. 왜냐하면기존의정적인웹을동적으로바꾸는데적극힘을쏟기때문입니다. 덕분에웹사이트제작환경에도많은변화가생겼습니다. 웹브라우저의성능이향상되었을뿐만아니라스마트폰으로부터시작된모바일웹에적응할힘이생겼고, 훨씬적은코딩으로도많은것을구현할수있게되었습니다. 이것이 2000년대후반에있었던일입니다. 그런데 2010 년이지나면서변화가생겼습니다. 새롭게등장하는신기술에관심을 두는것은전과같지만등장한기술들을재정리혹은재조합하는일에도많은관심 을두고있습니다. 이유는다음과같습니다. 기존웹퍼블리셔의 HTML5 적응문제 수많은자바스크립트기반라이브러리적응문제 HTML5 기반의웹브라우저와구형웹브라우저의호환성문제 1 장 HTML5 보일러플레이트소개 1

19 이러한문제를해결하려고등장한것이바로 UI 프레임워크와웹템플릿입니다. 현재국내에서많은관심을두고있는 UI 프레임워크로는트위터에근무하는엔지니어인마크오토 Mark Otto 와제이콥토른 Jacob Thornton 이개발한오픈소스기반 01 의부트스트랩 Bootstrap 이유명합니다 ( 트위터웹사이트의 UI 프레임워크로도사용합니다 ). 반응형웹페이지를제작하는데최적화되어있으며, CSS에대한깊은지식이없어도 <div> 요소의 class 속성을조절하면원하는의도대로웹페이지의디자인을조절할수도있습니다. 그림 1-1 부트스트랩 또한 HTML5라는이슈와함께주목받는부분이바로웹브라우저입니다. 웹이발전하면서각각의웹브라우저마다업그레이드가잦아졌으며, 지원하는 HTML의버전도다릅니다. 그런데여전히많은사람은자기취향대로웹브라우저를선택해서사용하며, 심지어는오래된버전의웹브라우저를사용하는사람도있습니다. 01 아파치 2.0 라이선스 1 장 HTML5 보일러플레이트소개 2

20 물론앞으로이런상황은점차 HTML5 를지원하는웹브라우저를사용하는방향 으로바뀌겠지만현재시점에서는다양한종류의웹브라우저에서웹사이트가무 리없이동작하는 크로스브라우징 이필요합니다. 이러한요구에부응하기위해서등장한것이바로 HTML5 보일러플레이트입니다. 니콜라스갤러거 Nicolas Gallagher, 폴아이리시 Paul Irish, 마티아스바이넨스 Mathias Bynens, 디비어매니언 Divya Manian, 한스크리스티안라이널 Hans Christian Reinl 등외국의웹퍼블리셔와디자이너들이조금씩의견을반영하면서점점완성된방향으로만들어가는, 다시말해 크로스브라우징 을지원하는웹사이트를쉽게만들도록도와주는템플릿입니다. 즉, HTML5 기반으로제작해야하는웹사이트에서크로스브라우징에필요한기준마크업, CSS, 자바스크립트등을배포하는것입니다. 그림 1-2 HTML5 보일러플레이트 1 장 HTML5 보일러플레이트소개 3

21 1.2 HTML5 보일러플레이트의주요특징 앞서 HTML5 보일러플레이트는크로스브라우징을지원한다고설명했습니다. 그럼구체적으로어떤특징이있어서크로스브라우징을지원한다고말하는것일까요? 여기서는주요특징을설명하겠습니다. 인터넷익스플로러 6을포함한크로스브라우징호환성지원인터넷익스플로러 6~8은 HTML5를지원하지않는웹브라우저입니다. 이러한웹브라우저에서도웹사이트의디자인이정상적으로구현될수있도록두가지를포함시켰습니다. 하나는 CSS의모음인 normalize.css며, 하나는자바스크립트라이브러리인 Modernizr입니다. 이를이용하면 HTML5의마크업요소대신기존 HTML/XHTML 코드를선택하고대체해서사용할수있도록도와줍니다. 모바일웹브라우저최적화 CSS3의미디어쿼리 를이용해서모바일웹브라우저의해상도에맞춰웹사이트가표시되도록지원하도록도와줍니다. main.css에최적화를위한코드가포함되어있습니다. 크로스브라우징유닛테스트지원앞서소개한 Modernizr 라이브러리를간단하게설명하면 HTML5가웹브라우저에서정상적으로동작하는지를테스트하는자바스크립트기반의라이브러리입니다. 이라이브러리에서제공하는객체를이용한자바스크립트코드를만들어 HTML5가정상적으로동작하는지확인할수있습니다 Modernizr 라이브러리 에서사용방법을확인할수있습니다. 1 장 HTML5 보일러플레이트소개 4

22 자바스크립트프로파일링웹브라우저의로딩속도를제어하는자바스크립트요소들을모아서로딩속도를확인한후결과를콘솔에출력하는 plugins.js를제공합니다. jquery 혹은 helper.js를함께이용하면측정결과를수집할수도있습니다. ios와안드로이드모바일웹브라우저를위한 CSS 코드제공 ios 5 이상버전의 Safari 웹브라우저에서 <audio> 요소를사용할때세로폭을조정한다든가, 사용자가임의로웹페이지를확대하는것을막는다든가, 안드로이드 4.0 이상의웹킷브라우저에서발생하는 <audio> 및 <video> 요소의버그를피하는등의 CSS 코드를제공합니다. normalize.css에서제공하는기능입니다. 그외 HTML5 보일러플레이트가가진주요특징은 html5-boilerplate/blob/v4.2.0/doc/toc.md 혹은템플릿소스파일의 doc 디렉터리안에있는 TOC.md 를열어서확인할수있습니다 jquery 라이브러리 jquery 라이브러리는이제는웹사이트제작에서없어서는안될필수요소로자리잡은자바스크립트기반의라이브러리며, 이책을읽는독자라면아마굉장히많이들어본용어가아닐까생각합니다. jquery 라이브러리는웹브라우저호환성을고려해서자바스크립트코드작성을단순화할수있도록설계되었으며, 존레식 John Resig 이 2006년뉴욕시바캠프 Barcamp NYC 에서공식적으로소개했습니다. 조금구체적으로설명하자면코드보기, 문서객체모델찾기, 애니메이션만들기, 이벤트제어, Ajax 개발을쉽게할수있습니다. 또한개발자가플러그인을개발할수있는기능도있기때문에수많은자바스크립트기반의라이브러리가만들어질수있는환경을제공합니다. 1 장 HTML5 보일러플레이트소개 5

23 그림 1-3 jquery 공식웹사이트 주요특징 02 은다음과같습니다. DOM 요소선택 DOM 트래버설및수정 (CSS 1~3 지원. 기본 XPath를플러그인으로지원 ) 이벤트지원 CSS 조작가능 특수효과및애니메이션지원 Ajax 함수포함 유틸리티 - 웹브라우저버전, "each" 함수지원 자바스크립트플러그인지원 02 출처 : 1 장 HTML5 보일러플레이트소개 6

24 HTML5 보일러플레이트에서사용하는 jquery 버전은 1.9.1입니다 버전은기존인터넷익스플로러 6~8을모두지원하는마지막 jquery 버전이며 jquery 1.8.X 이하의버전을기반으로작성한코드와호환되지않는다는점에주의해야합니다. 주요특징은다음과같습니다. 삭제된기능.toggle(function, function,... ) jquery.browser( ) (Modernizr.js에서해당기능을지원 ).live( ).die( ) jquery.sub( ) (jquery Migrate Plugin을통해사용가능 ) 추가 / 변경 / 대체된기능.add().addBack(selector) 를.addSelf() 로대체.before()/.after() 를사용하면대상요소에는추가된요소를포함하지않게됨 ajaxstrt, ajaxstop, ajaxsend, ajaxcomplete, ajaxerror, ajaxsuccess 이벤트는실제웹페이지파일에작성하도록변경 jquery.ajax가빈문자열이담긴 JSON 결과를반환 인터넷익스플로러 6~8에서 $("input").attr("type", newvalue) 선언가능.selector 비추천 Modernizr 라이브러리 Modernizr 는새롭게추가된 HTML5 요소나 CSS3 속성을웹브라우저가지원하 는지검사하는오픈소스프로젝트기반의자바스크립트라이브러리입니다. 또한 1 장 HTML5 보일러플레이트소개 7

25 CSS3나새로운웹기술이등장할때마다버전을업그레이드하면서웹브라우저가해당기술을지원하는지를검사할수있도록발전하고있습니다. HTML5 보일러플레이트는크로스브라우징지원을표방하는만큼, 이 Modernizr 라이브러리는반드시필요합니다. 그림 1-4 Modernizr 공식웹사이트 기본적인코드작성법은다음과같습니다. if (Modernizr.html5/CSS3 요소. 속성 == true/false) { // 조건에따라원하는자바스크립트처리코드작성 } 이를통해서웹브라우저에따라필요한코드를선택할수있어크로스브라우징을 지원하게합니다. 1 장 HTML5 보일러플레이트소개 8

26 1.3 HTML5 보일러플레이트다운로드 HTML5 보일러플레이트는앞서그림 1-2에서소개한 com의 <Download v.4.2.0> 를눌러다운로드할수있습니다. 그런데해당링크이외에도사용자가원하는콘셉트에맞춰 HTML5 보일러플레이트템플릿을다운로드할수있는방법이있습니다 Github 최근에는웹퍼블리셔에게도 Git과 Github라는용어가익숙할것으로생각합니다. 최신버전을다운로드하려면 Github를추천합니다. Github( com/h5bp/html5-boilerplate) 에서 HTML5 보일러플레이트의최신템플릿을다운로드할수있습니다. 그림 1-5 Github 의 HTML5 보일러플레이트 1 장 HTML5 보일러플레이트소개 9

27 1.3.2 Initializr HTML5 보일러플레이트웹사이트의 <Get a custom Build> 를누르면 Initializr ( 라는사이트를만날수있습니다. Initializr의콘셉트는 HTML5 보일러플레이트기반의프로젝트를시작할수있는템플릿파일의구성을사용자가직접선택해다운로드하는서비스라는점입니다. 크게 <Classic H5BP>, <Responsive>( 반응형웹 ), <Bootstrap> 의세가지항목 으로나누어필요한구성을선택할수있으며각항목아래에있는 <Dosc Demo> 를누르면해당템플릿의데모페이지도확인할수있습니다. 그림 1-6 Initializr 메인페이지 1 장 HTML5 보일러플레이트소개 10

28 Classic H5BP HTML5 보일러플레이트의기본템플릿입니다. 선택사항은다음과같습니다. No template Minified Modernizr IE Classes Chrome Frame Google Analytics.htaccess Favicon Apple Touch Icons plugins.js Robots.txt Humans.txt 404 Page Adobe Cross Domainm 그림 1-7 Classic H5BP 선택화면 1 장 HTML5 보일러플레이트소개 11

29 Responsive 반응형웹제작에최적화된템플릿소스코드구조를선택해서다운로드할수있습 니다. 선택사항은다음과같습니다. Mobile-first Responsive Modernizr Respond - Alternatives Google Analytics Minified IE Classes Chrome Frame Apple Touch Icons Favicon 그림 1-8 Responsive 선택화면 1 장 HTML5 보일러플레이트소개 12

30 Bootstrap HTML5 보일러플레이트에앞서소개한부트스트랩프레임워크를결합하여만든템플릿입니다. plusins.js를제외한 HTML5 보일러플레이트와부트스트랩의모든기능을사용할수있다는장점이있으며, 선택사항은다음과같습니다. Responsive Bootstrap Modernizr Respond - Alternatives Minified Development IE Classes Chrome Frame Google Analytics Favicon Apple Touch Icons 그림 1-9 Bootstrap 선택화면 1 장 HTML5 보일러플레이트소개 13

31 1.4 HTML5 보일러플레이트의버전별변화 HTML5 보일러플레이트가처음공개된것은 2011년 3월 21이며, 이후세번의업그레이드와일곱번의업데이트가이루어졌습니다. 간략한내용을소개하면다음과같습니다 ( ) jquery 이용시혼란을방지하기위해상대 URL 사용 구글웹로그분석코드최적화 에릭마이어의 Reset CSS 업데이트와 HTML5 Doctor 재설정 HTML 요소에 IE9 특정조건클래스를제거 YUI 프로파일링제거 ( ) reset.css 기반에서 normalize.css 기반으로교체 (#500) Respond.js에미디어쿼리 polyfill을추가 인터넷익스플로러 6 사용자를위한구글 Chrome 프레임스크립트프롬프트추가 모던브라우저에대한 HTML 조건부주석의단순화와 oldie 클래스추가 구글웹로그분석에웹사이트속도를추적하는기능을추가 jquery 1.6.2로업데이트 ( 축소버전을기본으로이용 ) Modernizr 2.0 축소버전으로업데이트 (yepnope, html5shiv, Respond.js 포함 ) 구글웹로그분석스크립트로딩에 Modernizr.load( ) 이용 1 장 HTML5 보일러플레이트소개 14

32 3.0.0 ( ) 404.html의디자인개선 최신 normalize.css 변경점과더나은타이포그래피기본값을포함하는 main.css로업데이트 (#825) Modernizr 2.5로업데이트 (yepnope 1.5 및 html5shiv 3.2 포함 ) jquery 1.7.1로업데이트 Google 웹로그분석스크립트를비동기코드로되돌림 Respond.js 제거 (#816) 인터넷익스플로러 6 사용자를위해 Google Chrome 프레임스크립트를 Chrome 프레임및다른웹브라우저의옵션링크로교체 ( ) Modernizr 로업데이트 (html5shiv 3.3 포함 ) ( ) Modernizr 으로업데이트 ( ) HiDPI example 미디어쿼리추가 (#1127) MIT 라이선스추가 (#1139) normalize.css 1.0.1로업데이트 normalize.css 부분을기존 CSS 부분과분리 (#1160) CSS 파일과 JS 파일의디렉터리구조와이름재설정 jquery 1.8로업데이트 (#1161) Modernizr 2.6.1로업데이트 (#1086) 1 장 HTML5 보일러플레이트소개 15

33 Uncompressed jquery 를 Compressed jquery 로교체 (#1153) 불필요한인라인주석제거 (#1150) ( ) 콘솔메서드스터핑의추가개선 (#1206, #1229) jquery 1.8.2로업데이트 Modernizr 2.6.2로업데이트 ( ) placeholder 아이콘업데이트 normalize.css 1.0.2로업데이트 jquery 1.8.3으로업데이트 ( ) 32 32px 의 favicon.ico 추가 (#1286) HiDPI example 미디어쿼리업데이트 (#1127) ( ) normalize.css 로업데이트 jquery 로업데이트 ( ) Google 웹로그분석프로토콜검사를제거 (#1319) normalize.css 1.1.1로업데이트 jquery 1.9.1로업데이트 1 장 HTML5 보일러플레이트소개 16

34 1.5 HTML5 보일러플레이트의장단점 HTML5 보일러플레이트의 보일러플레이트 는 표준문안 이라는뜻입니다. 따라서모든사람이같은환경에서 HTML5 페이지를제작할수있어리소스관리와접근을손쉽게할수있도록도와주는템플릿이라고생각할수있습니다. 또한프로그램이아닌자주사용하는요소들을모은 html, css, js 파일을전부압축하여제공하므로어떤프로젝트환경에서든바로작업이가능하고, 원하는파일을자유롭게수정해자신만의사용자화템플릿을만들수있다는장점도있습니다. 즉, 어떤웹페이지를만들때마다 HTML5 마크업파일을새로만들고, <meta> 요소를고치고, 자주사용하는 CSS 코드를복사해서넣는시간을단축할수있는매우좋은템플릿이며다른사람과함께공동작업을할때도가이드역할을톡톡히할수있는것이바로 HTML5 보일러플레이트의큰장점이아닐까생각합니다. 하지만여러분이주의해야할점이있습니다. 단순하게 HTML5 보일러플레이트템플릿만그대로이용하게되면필요없는부분도소스코드에함께포함되어서자칫웹사이트최적화에방해될수있다는것입니다. 2장부터설명하는모든내용을정확하게파악하여여러분만의 HTML5 보일러플레이트템플릿을만들고나아가서이를전세계웹퍼블리셔들과공유하는것을목표로삼기를바랍니다. 1 장 HTML5 보일러플레이트소개 17

모바일 웹 개발 실무를 위한 어비의 노하우 모바일 보일러플레이트

모바일 웹 개발 실무를 위한 어비의 노하우  모바일 보일러플레이트 Hanbit ebook Realtime 44 모바일웹개발실무를위한어비의노하우 모바일 보일러플레이트 송태민지음 모바일웹개발실무를위한어비의노하우모바일보일러플레이트 모바일웹개발실무를위한어비의노하우모바일보일러플레이트 초판발행 2013 년 10 월 20 일 지은이송태민 / 펴낸이김태헌펴낸곳한빛미디어 ( 주 ) / 주소서울시마포구양화로 7길 83 한빛미디어 ( 주 )

More information

URL Shortener 프로젝트로 배우는 Vert.X 프레임워크

URL Shortener 프로젝트로 배우는 Vert.X 프레임워크 Hanbit ebook Realtime 95 URL Shortener 프로젝트로배우는 Vert.x 프레임워크 김요한지음 URL Shortener 프로젝트로배우는 Vert.x 프레임워크 김요한지음 URL Shortener 프로젝트로배우는 Vert.X 프레임워크 초판발행 2015 년 4 월 10 일 지은이김요한 / 펴낸이김태헌펴낸곳한빛미디어 ( 주 ) / 주소서울시마포구양화로

More information

SIGIL 완벽입문

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

More information

안전한 웨 애플리케이션을 위한 자바스크립트 보안

안전한 웨 애플리케이션을 위한 자바스크립트 보안 119 안전한웹애플리케이션을위한 Y.E 리앙지음 / 박미정옮김 자바스크립트보안 119 안전한웹애플리케이션을위한 Y.E 리앙지음 / 박미정옮김 자바스크립트보안 이도서는 JavaScript Security(PACKT publishing) 의번역서입니다 표지사진김민국이책의표지는김민국님이보내주신풍경사진을담았습니다. 리얼타임은독자의시선을담은풍경사진을책표지로보여주고자합니다.

More information

슬라이드 1

슬라이드 1 모바일소프트웨어프로젝트 지도 API 1 조 20070216 김성수 20070383 김혜준 20070965 이윤상 20071335 최진 1 매시업? 공개 API? 2 매시업 웹으로제공하고있는정보와서비스를융합하여새로운소프트웨어나서비스, 데이터베이스등을만드는것 < 최초의매시업 > 3 공개 API 누구나사용할수있도록공개된 API 지도, 검색등다양한서비스들에서제공 대표적인예

More information

SBR-100S User Manual

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

More information

C O N T E N T S 목 차 요약 / 1 I. 중남미화장품시장현황 / 3 Ⅱ. 주요국별시장정보 / 9 ( 트렌드 유통망 인증 ) 1. 브라질 / 9 2. 멕시코 / 콜롬비아 / 칠레 / 64 Ⅲ. 우리기업진출전략 / 79 # 첨부. 화장품관

C O N T E N T S 목 차 요약 / 1 I. 중남미화장품시장현황 / 3 Ⅱ. 주요국별시장정보 / 9 ( 트렌드 유통망 인증 ) 1. 브라질 / 9 2. 멕시코 / 콜롬비아 / 칠레 / 64 Ⅲ. 우리기업진출전략 / 79 # 첨부. 화장품관 Global Market Report 17-023 Global Market Report 중남미주요국화장품시장동향과우리기업진출전략 C O N T E N T S 목 차 요약 / 1 I. 중남미화장품시장현황 / 3 Ⅱ. 주요국별시장정보 / 9 ( 트렌드 유통망 인증 ) 1. 브라질 / 9 2. 멕시코 / 29 3. 콜롬비아 / 46 4. 칠레 / 64 Ⅲ. 우리기업진출전략

More information

Windows 10 General Announcement v1.0-KO

Windows 10 General Announcement v1.0-KO Windows 10 Fuji Xerox 장비와의호환성 v1.0 7 July, 2015 머리말 Microsoft 는 Windows 10 이 Windows 자동업데이트기능을통해예약되어질수있다고 6 월 1 일발표했다. 고객들은 윈도우 10 공지알림을받기 를표시하는새로운아이콘을알아차릴수있습니다. Fuji Xerox 는 Microsoft 에서가장최신운영시스템인 Windows

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

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

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

More information

CSG_keynote_KO copy.key

CSG_keynote_KO copy.key 101. 3 Shutterstock 4 Shutterstock 5 Shutterstock? 6? 10 What To Create 10 Ways to Find Trends and Inspiration 12 15 17 :. 21 24 Shutterstock 26 29 -. 31 Shutterstock : 36 " " 37! 39 41 45 46 47 49 Copyright

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

Microsoft PowerPoint - web-part03-ch20-XMLHttpRequest기본.pptx

Microsoft PowerPoint - web-part03-ch20-XMLHttpRequest기본.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part3. Ajax Ch20. XMLHttpRequest 2014년 1학기 Professor Seung-Hoon Choi 20 XMLHttpRequest XMLHttpRequest 객체 자바스크립트로 Ajax를이용할때사용하는객체 간단하게 xhr 이라고도부름 서버

More information

슬라이드 1

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

More information

Web Scraper in 30 Minutes 강철

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

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

미디어 및 엔터테인먼트 업계를 위한 Adobe Experience Manager Mobile

미디어 및 엔터테인먼트 업계를 위한 Adobe Experience Manager Mobile Adobe Experience Manager Mobile 앱 제작을 넘어 고객, 파트너 및 직원과의 유대 관계 형성 매년 모바일 디바이스에서 읽고 듣고 교류하는 사람들이 증가하고 있습니다. 미디어 및 엔터테인먼트 조직은 모바일 디바이스를 통해 고객, 직원, 파트너 및 광고주와 직접 교류할 수 있는 새로운 기회를 얻을 수 있는데, 이 기회를 민첩하게 활용하는

More information

슬라이드 1

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

More information

[Brochure] KOR_TunA

[Brochure] KOR_TunA LG CNS LG CNS APM (TunA) LG CNS APM (TunA) 어플리케이션의 성능 개선을 위한 직관적이고 심플한 APM 솔루션 APM 이란? Application Performance Management 란? 사용자 관점 그리고 비즈니스 관점에서 실제 서비스되고 있는 어플리케이션의 성능 관리 체계입니다. 이를 위해서는 신속한 장애 지점 파악 /

More information

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

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

More information

var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");

var answer = confirm( 확인이나취소를누르세요.); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write( 확인을눌렀습니다.); else { document.write( 취소를눌렀습니다.); 자바스크립트 (JavaScript) - HTML 은사용자에게인터페이스 (interface) 를제공하는언어 - 자바스크립트는서버로데이터를전송하지않고서할수있는데이터처리를수행한다. - 자바스크립트는 HTML 나 JSP 에서작성할수있고 ( 내부스크립트 ), 별도의파일로도작성이가능하다 ( 외 부스크립트 ). - 내부스크립트 - 외부스크립트

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 워드프레스소개및운용관리안내 1 목차 2 1. 워드프레스소개 역사 2003 년매트물렌웨그에의해탄생 ver0.7 플러그인구조, 애플리케이션프로그램밍인터페이스도입 테마구조와페이지운영이가능한 ver1.5 로테마변경및디자인에대한자유도부여 Wyswyg 방식의문서편집기도입 MU(multi-user) 개념의도입 Social 쉐어플러그인도입으로 (SNS 연계 ) 현재워드프레스

More information

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

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

More information

Microsoft PowerPoint - chap01-C언어개요.pptx

Microsoft PowerPoint - chap01-C언어개요.pptx #include int main(void) { int num; printf( Please enter an integer: "); scanf("%d", &num); if ( num < 0 ) printf("is negative.\n"); printf("num = %d\n", num); return 0; } 1 학습목표 프로그래밍의 기본 개념을

More information

..,. Job Flow,. PC,.., (Drag & Drop),.,. PC,, Windows PC Mac,.,.,. NAS(Network Attached Storage),,,., Amazon Web Services*.,, (redundancy), SSL.,. * A

..,. Job Flow,. PC,.., (Drag & Drop),.,. PC,, Windows PC Mac,.,.,. NAS(Network Attached Storage),,,., Amazon Web Services*.,, (redundancy), SSL.,. * A ..,. Job Flow,. PC,.., (Drag & Drop),.,. PC,, Windows PC Mac,.,.,. NAS(Network Attached Storage),,,., Amazon Web Services*.,, (redundancy), SSL.,. * Amazon Web Services, Inc.. ID Microsoft Office 365*

More information

Microsoft PowerPoint Android-SDK설치.HelloAndroid(1.0h).pptx

Microsoft PowerPoint Android-SDK설치.HelloAndroid(1.0h).pptx To be an Android Expert 문양세강원대학교 IT 대학컴퓨터학부 Eclipse (IDE) JDK Android SDK with ADT IDE: Integrated Development Environment JDK: Java Development Kit (Java SDK) ADT: Android Development Tools 2 JDK 설치 Eclipse

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

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

More information

PowerPoint Presentation

PowerPoint Presentation 오에스아이소프트코리아세미나세미나 2012 Copyright Copyright 2012 OSIsoft, 2012 OSIsoft, LLC. LLC. PI Coresight and Mobility Presented by Daniel Kim REGIONAL 세미나 SEMINAR 세미나 2012 2012 2 Copyright Copyright 2012 OSIsoft,

More information

iOS 7 핵심 노트: Xcode 5, 플랫 UI, API 중심으로 살펴보는 iOS 7

iOS 7 핵심 노트: Xcode 5, 플랫 UI, API 중심으로 살펴보는 iOS 7 Hanbit ebook Realtime 51 Xcode 5, 플랫 UI, API 중심으로 살펴보는 ios 7 ios 7 핵심 노트 야곰 지음 Xcode 5, 플랫 UI, API 중심으로 살펴보는 ios 7 ios 7 핵심 노트 ios 7 핵심 노트 Xcode 5, 플랫 UI, API 중심으로 살펴보는 ios 7 초판발행 2013년 12월 31일 지은이 야곰

More information

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part1. JavaScript / Ch10. 문서객체모델 2014년 1학기 Professor Seung-Hoon Choi 10 문서객체모델 문서객체모델 (Document Object Model, DOM) 웹브라우저가 HTML 페이지를인식하는방식 document

More information

Microsoft Word - ijungbo1_13_02

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

More information

View Licenses and Services (customer)

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

More information

대규모 자바스크립트 웹어플리케이션개발하기 with BackboneJS and RequireJS 넷스루개발 2 팀이병주

대규모 자바스크립트 웹어플리케이션개발하기 with BackboneJS and RequireJS 넷스루개발 2 팀이병주 대규모 자바스크립트 웹어플리케이션개발하기 with BackboneJS and RequireJS 넷스루개발 2 팀이병주 웹사이트 웹어플리케이션 Mission 웹사이트처럼 개발하기에는 문제점이많다 Why?! 복잡하다 양이많다 예제를통해해결책을알아보자 http://pillarlee16.github.com/simpleapp/ 복잡함을해결하자!! 다양한 MV*

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

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

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

More information

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

PowerPoint 프레젠테이션

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

More information

Microsoft Word - ntasFrameBuilderInstallGuide2.5.doc

Microsoft Word - ntasFrameBuilderInstallGuide2.5.doc NTAS and FRAME BUILDER Install Guide NTAS and FRAME BUILDER Version 2.5 Copyright 2003 Ari System, Inc. All Rights reserved. NTAS and FRAME BUILDER are trademarks or registered trademarks of Ari System,

More information

1) 인증서만들기 ssl]# cat >www.ucert.co.kr.pem // 설명 : 발급받은인증서 / 개인키파일을한파일로저장합니다. ( 저장방법 : cat [ 개인키

1) 인증서만들기 ssl]# cat   >www.ucert.co.kr.pem // 설명 : 발급받은인증서 / 개인키파일을한파일로저장합니다. ( 저장방법 : cat [ 개인키 Lighttpd ( 멀티도메인 ) SSL 인증서신규설치가이드. [ 고객센터 ] 한국기업보안. 유서트기술팀 1) 인증서만들기 [root@localhost ssl]# cat www.ucert.co.kr.key www.ucert.co.kr.crt >www.ucert.co.kr.pem // 설명 : 발급받은인증서 / 개인키파일을한파일로저장합니다. ( 저장방법 : cat

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

PowerPoint 프레젠테이션

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

More information

본책- 부속물

본책- 부속물 PROGRAMMING RUBY PROGRAMMING RUBY : THE PRAGMATIC PROGRAMMER S GUIDE, 2nd Ed. Copyright c 2005 Published in the original in the English language by The Pragmatic Programmers, LLC, Lewisville. All rights

More information

Office 365, FastTrack 4 FastTrack. Tony Striefel FastTrack FastTrack

Office 365, FastTrack 4 FastTrack. Tony Striefel FastTrack FastTrack FastTrack 1 Office 365, FastTrack 4 FastTrack. Tony Striefel FastTrack FastTrack 5 11 2 FASTTRACK 소개 디지털 혁신은 여기서 시작합니다. Microsoft FastTrack은 Microsoft 클라우드를 사용하여 고객이 신속하게 비즈니스 가치를 실현하도록 돕는 고객 성공 서비스입니다.

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

C++ Programming

C++ Programming C++ Programming 예외처리 Seo, Doo-okok clickseo@gmail.com http://www.clickseo.com 목 차 예외처리 2 예외처리 예외처리 C++ 의예외처리 예외클래스와객체 3 예외처리 예외를처리하지않는프로그램 int main() int a, b; cout > a >> b; cout

More information

슬라이드 1

슬라이드 1 Enterprise UI Architecture Framework Natural-JS 목차 1. 엔터프라이즈어플리케이션 UI 개발기술의변화 2. 현표준웹기반엔터프라이즈 UI 개발도구현황 3. Natural-JS 아키텍처구성 4. Natural-JS 특징 5. 기대효과 6. 수행이력 7. DEMO 1. 엔터프라이즈어플리케이션 UI 개발기술의변화 2000 년대이전

More information

내지-교회에관한교리

내지-교회에관한교리 내지-교회에관한교리 2011.10.27 7:34 PM 페이지429 100 2400DPI 175LPI C M Y K 제 31 거룩한 여인 32 다시 태어났습니까? 33 교회에 관한 교리 목 저자 면수 가격 James W. Knox 60 1000 H.E.M. 32 1000 James W. Knox 432 15000 가격이 1000원인 도서는 사육판 사이즈이며 무료로

More information

C++ Programming

C++ Programming C++ Programming 연산자다중정의 Seo, Doo-okok clickseo@gmail.com http://www.clickseo.com 목 차 연산자다중정의 C++ 스타일의문자열 2 연산자다중정의 연산자다중정의 단항연산자다중정의 이항연산자다중정의 cin, cout 그리고 endl C++ 스타일의문자열 3 연산자다중정의 연산자다중정의 (Operator

More information

PathEye 공식 블로그 다운로드 받으세요!! 지속적으로 업그래이드 됩니다. 여러분의 의견을 주시면 개발에 반영하겠 습니다.

PathEye 공식 블로그 다운로드 받으세요!!   지속적으로 업그래이드 됩니다. 여러분의 의견을 주시면 개발에 반영하겠 습니다. PathEye Mobile Ver. 0.71b 2009. 3. 17 By PathEye 공식 블로그 다운로드 받으세요!! http://blog.patheye.com 지속적으로 업그래이드 됩니다. 여러분의 의견을 주시면 개발에 반영하겠 습니다. PathEye 설치 1/3 최종 배포 버전을 다 운로드 받습니다. 다운로드된 파일은 CAB 파일입니다. CAB 파일에는

More information

Microsoft PowerPoint SDK설치.HelloAndroid(1.5h).pptx

Microsoft PowerPoint SDK설치.HelloAndroid(1.5h).pptx To be an Android Expert 문양세강원대학교 IT 대학컴퓨터학부 개발환경구조및설치순서 JDK 설치 Eclipse 설치 안드로이드 SDK 설치 ADT(Androd Development Tools) 설치 AVD(Android Virtual Device) 생성 Hello Android! 2 Eclipse (IDE) JDK Android SDK with

More information

쓰리 핸드(삼침) 요일 및 2405 요일 시간, 및 요일 설정 1. 용두를 2의 위치로 당기고 반시계방향으로 돌려 전날로 를 설정합니다. 2. 용두를 시계방향으로 돌려 전날로 요일을 설정합니다. 3. 용두를 3의 위치로 당기고 오늘 와 요일이 표시될 때까지 시계방향으로

쓰리 핸드(삼침) 요일 및 2405 요일 시간, 및 요일 설정 1. 용두를 2의 위치로 당기고 반시계방향으로 돌려 전날로 를 설정합니다. 2. 용두를 시계방향으로 돌려 전날로 요일을 설정합니다. 3. 용두를 3의 위치로 당기고 오늘 와 요일이 표시될 때까지 시계방향으로 한국어 표준 설정안내 서브 초침 시간 및 설정 1. 용두를 2의 위치로 뽑아냅니다. 2. 용두를 시계방향 또는 반시계방향으로 돌려(모델에 따라 다름) 를 전날로 설정합니다. 3. 용두를 3의 위치로 당기고 현재 가 표시될 때까지 시계방향으로 돌립니다. 4. 용두를 계속 돌려 정확한 오전/오후 시간을 설정합니다. 5. 용두를 1의 위치로 되돌립니다. 169 쓰리

More information

로거 자료실

로거 자료실 redirection 매뉴얼 ( 개발자용 ) V1.5 Copyright 2002-2014 BizSpring Inc. All Rights Reserved. 본문서에대한저작권은 비즈스프링 에있습니다. - 1 - 목차 01 HTTP 표준 redirect 사용... 3 1.1 HTTP 표준 redirect 예시... 3 1.2 redirect 현상이여러번일어날경우예시...

More information

consulting

consulting CONSULTING 전략 컨설팅 클라우드 마이그레이션 애플리케이션 마이그레이션 데이터 마이그레이션 HELPING YOU ADOPT CLOUD. 클라우드로 가기로 결정했다면 누구와 함께 갈지를 선택해야 합니다. 처음부터 끝까지 믿을만한 파트너를 찾는다면 베스핀글로벌이 정답입니다. 전략 컨설팅 다양한 클라우드 공급자가 존재하고, 클라우드 공급자마다 다른 장단점을

More information

µ¶µµºÎ·Ï1~64

µ¶µµºÎ·Ï1~64 초등학생 독도 바로 알기 인천광역시교육감 인정 2011. 6. 9. 2011-001 초등학생 부록 독도 바로 알기 부록 교수 학습 지도 보완 자료 초등학생 독도 바로 알기 부록 독도 이름, 이렇게 바뀌었어요! 우산도(于山島, 512년) 석도(石島, 1900년) 독도(獨島, 1906년) 우산 은 울릉도에 있었던 고대 소 국 우산국에서 비롯됨 석도 는 섬 자체가

More information

HLS(HTTP Live Streaming) 이용가이드 1. HLS 소개 Apple iphone, ipad, ipod의운영체제인 ios에서사용하는표준 HTTP 기반스트리밍프로토콜입니다. 2. HLS 지원대상 - 디바이스 : iphone/ipad/ipod - 운영체제 :

HLS(HTTP Live Streaming) 이용가이드 1. HLS 소개 Apple iphone, ipad, ipod의운영체제인 ios에서사용하는표준 HTTP 기반스트리밍프로토콜입니다. 2. HLS 지원대상 - 디바이스 : iphone/ipad/ipod - 운영체제 : HLS(HTTP Live Streaming) 이용가이드 1. HLS 소개 Apple iphone, ipad, ipod의운영체제인 ios에서사용하는표준 HTTP 기반스트리밍프로토콜입니다. 2. HLS 지원대상 - 디바이스 : iphone/ipad/ipod - 운영체제 : ios 3.0 이상 - 콘텐츠형식 : MP4 (H264,AAC ), MP3 * 디바이스별해상도,

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 COMPANY BROCHURE 1. 왜홈페이지를만들려하십니까? 2. 어떤홈페이지가마케팅최적화홈페이지인가요? 3. 왜마케팅최적화홈페이지가중요한가요? 4. 어떻게마케팅최적화홈페이지를만들수있을까요? 5. 누가마케팅최적화홈페이지를만들수있을까요? 6. 휘파람소프트의마케팅최적화홈페이지는어떻게제작할까요? 7. 휘파람소프트는완성이아니면납품하지않습니다. 마케팅최적화홈페이지제작전문업체

More information

W O R K P O R T F O L I O JULY 2015 Profile 3 P R O F I L E 성명생년월일최종학력관련분야경력 황선수 1988년 2월 11일 ( 만 27세 ) 핚국방송통싞대학교컴퓨터과학과 ( 이학사 ) 4년 코멘트 저는다양핚고객과소통하고브랜드가치를높이며업무를수행해왔습니다. 저는단순히웹페이지를코딩핛줄아는사람이아니라가치있는웹서비스란무엇인가를고민하는사람입니다.

More information

1) 인증서만들기 ssl]# cat >www.ucert.co.kr.pem // 설명 : 발급받은인증서 / 개인키파일을한파일로저장합니다. ( 저장방법 : cat [ 개인키

1) 인증서만들기 ssl]# cat   >www.ucert.co.kr.pem // 설명 : 발급받은인증서 / 개인키파일을한파일로저장합니다. ( 저장방법 : cat [ 개인키 Lighttpd ( 단일도메인 ) SSL 인증서신규설치가이드. [ 고객센터 ] 한국기업보안. 유서트기술팀 1) 인증서만들기 [root@localhost ssl]# cat www.ucert.co.kr.key www.ucert.co.kr.crt >www.ucert.co.kr.pem // 설명 : 발급받은인증서 / 개인키파일을한파일로저장합니다. ( 저장방법 : cat

More information

Microsoft 을 열면 깔끔한 사용자 중심의 메뉴 및 레이아웃이 제일 먼저 눈에 띕니다. 또한 은 스마트폰, 테블릿 및 클라우드는 물론 가 설치되어 있지 않은 PC 에서도 사용할 수 있습니다. 따라서 장소와 디바이스에 관계 없이 언제, 어디서나 문서를 확인하고 편집

Microsoft 을 열면 깔끔한 사용자 중심의 메뉴 및 레이아웃이 제일 먼저 눈에 띕니다. 또한 은 스마트폰, 테블릿 및 클라우드는 물론 가 설치되어 있지 않은 PC 에서도 사용할 수 있습니다. 따라서 장소와 디바이스에 관계 없이 언제, 어디서나 문서를 확인하고 편집 Modern Modern www.office.com ( ) 892 5 : 1577-9700 : http://www.microsoft.com/korea Microsoft 을 열면 깔끔한 사용자 중심의 메뉴 및 레이아웃이 제일 먼저 눈에 띕니다. 또한 은 스마트폰, 테블릿 및 클라우드는 물론 가 설치되어 있지 않은 PC 에서도 사용할 수 있습니다. 따라서 장소와

More information

Slide 1

Slide 1 Java 기반의오픈소스 GIS(GeoServer, udig) 를지원하는국내공간 DBMS 드라이버의개발 2013. 08. 28. 김기웅 (socoooooool@gmail.com) 임영현 (yhlim0129@gmail.com) 이민파 (mapplus@gmail.com) PAGE 1 1 기술개발의목표및내용 2 기술개발현황 3 커뮤니티운영계획 4 활용방법및시연 PAGE

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

Install stm32cubemx and st-link utility

Install stm32cubemx and st-link utility STM32CubeMX and ST-LINK Utility for STM32 Development 본문서는 ST Microelectronics 의 ARM Cortex-M 시리즈 Microcontroller 개발을위해제공되는 STM32CubeMX 와 STM32 ST-LINK Utility 프로그램의설치과정을설명합니다. 본문서는 Microsoft Windows 7

More information

- 이벤트의처리 <input type= button id= button1 value= 확인 /> <input type= button id= button2 value= 확인 /> 자바스크립트인경우 : document.getelementbyid( button1 ).oncl

- 이벤트의처리 <input type= button id= button1 value= 확인 /> <input type= button id= button2 value= 확인 /> 자바스크립트인경우 : document.getelementbyid( button1 ).oncl 제이쿼리 (JQuery) - 제이쿼리는자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리이다. - 따라서, 제이쿼리를사용하기위해서는자바스크립트라이브러리를사용해야한다. - 제이쿼리사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) - 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호를말함. - 사용예 )

More information

목차 윈도우드라이버 1. 매뉴얼안내 운영체제 (OS) 환경 윈도우드라이버준비 윈도우드라이버설치 Windows XP/Server 2003 에서설치 Serial 또는 Parallel 포트의경우.

목차 윈도우드라이버 1. 매뉴얼안내 운영체제 (OS) 환경 윈도우드라이버준비 윈도우드라이버설치 Windows XP/Server 2003 에서설치 Serial 또는 Parallel 포트의경우. 소프트웨어매뉴얼 윈도우드라이버 Rev. 3.03 SLP-TX220 / TX223 SLP-TX420 / TX423 SLP-TX400 / TX403 SLP-DX220 / DX223 SLP-DX420 / DX423 SLP-DL410 / DL413 SLP-T400 / T403 SLP-T400R / T403R SLP-D220 / D223 SLP-D420 / D423

More information

<4D F736F F F696E74202D20B5A5C0CCC5CDBAA3C0CCBDBA5F3130C1D6C2F75F32C2F7BDC32E >

<4D F736F F F696E74202D20B5A5C0CCC5CDBAA3C0CCBDBA5F3130C1D6C2F75F32C2F7BDC32E > 6. ASP.NET ASP.NET 소개 ASP.NET 페이지및응용프로그램구조 Server Controls 데이터베이스와연동 8 장. 데이터베이스응용개발 (Page 20) 6.1 ASP.NET 소개 ASP.NET 동적웹응용프로그램을개발하기위한 MS 의웹기술 현재 ASP.NET 4.5까지출시.Net Framework 4.5 에포함 Visual Studio 2012

More information

커버콘텐츠

커버콘텐츠 e Magazine Contents Gallery 52 Info Desk Illustrator Expert 2 Web Technique 17 25 Column 57 Cover Story Calendar 4 61 New Product A to Z Web Center 7 32 Motion Center Q & A 40 66 Photoshop Expert Acrobat

More information

슬라이드 1

슬라이드 1 Gradle 1. 도구개요 2. 설치및실행 3. 주요기능 4. 활용예제 1. 도구개요 1.1 도구정보요약 도구명 소개 특징 Gradle (http://www.gradle.org) 소프트웨어빌드자동화도구 라이선스 Apache License v2.0 Gradle 을통해소프트웨어패키지나프로젝트의빌드, 테스팅, 퍼블리슁, 배포등을자동화할수있다. Ant 의유연성과기능을

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

Javascript

Javascript 1. 이벤트와이벤트핸들러의이해 이벤트 (Event) 는웹브라우저에서발생하는다양한사건을말합니다. 예를들면, 버튼을마우스로을했다거나브라우저를닫았다거나 Enter 키를눌렀다거나등등아주다양한사건들이있습니다. 그렇다면이벤트핸들러 (Event Handler) 는무엇일까요? 이다양한이벤트들을핸들링 ( 처리 ) 해주는것입니다. 예를들면, 어떤버튼을했을때메시지창이뜨게하는등을말합니다.

More information

1. VBA 로웹문서접근및웹페이지정보수집하는방법엑셀 VBA 를통해웹페이지또는웹문서에접근하여정보를수정하고데이터를수집하기위해서는아래와같이크게 2 가지방법을사용합니다. 1-A. WinHTTP ( 또는 MSXMLHTTP) 이용 VBA 에서는 WinHTTP 또는 MSXMLHTT

1. VBA 로웹문서접근및웹페이지정보수집하는방법엑셀 VBA 를통해웹페이지또는웹문서에접근하여정보를수정하고데이터를수집하기위해서는아래와같이크게 2 가지방법을사용합니다. 1-A. WinHTTP ( 또는 MSXMLHTTP) 이용 VBA 에서는 WinHTTP 또는 MSXMLHTT 포탈사이트 로그인프로그램 만들기 #3 Copyright 2018 by 오빠두엑셀 0 1. VBA 로웹문서접근및웹페이지정보수집하는방법엑셀 VBA 를통해웹페이지또는웹문서에접근하여정보를수정하고데이터를수집하기위해서는아래와같이크게 2 가지방법을사용합니다. 1-A. WinHTTP ( 또는 MSXMLHTTP) 이용 VBA 에서는 WinHTTP 또는 MSXMLHTTP 를이용하여웹문서또는웹페이지의데이터를수집하고편집할수있는기능을제공합니다.

More information

mobile_guide_SA

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

More information

C O N T E N T 목 차 요약 / 4 Ⅰ. 서론 Ⅱ. 주요국별대형유통망현황 / Ⅲ. 시사점및진출방안 ( 첨부 ) 국가별주요수입업체

C O N T E N T 목 차 요약 / 4 Ⅰ. 서론 Ⅱ. 주요국별대형유통망현황 / Ⅲ. 시사점및진출방안 ( 첨부 ) 국가별주요수입업체 Global Market Report 13-045 2013.6.07 CIS 대형유통망현황및진출방안 C O N T E N T 목 차 요약 / 4 Ⅰ. 서론 Ⅱ. 주요국별대형유통망현황 / Ⅲ. 시사점및진출방안 ( 첨부 ) 국가별주요수입업체 C IS 대형유통망현황및진출방안 요 약 - 1 - Global Market Report 13-045 - 2 - C IS 대형유통망현황및진출방안

More information

슬라이드 1

슬라이드 1 Enterprise UI Architecture Framework Natural-JS 2018.10. 목차 1. 엔터프라이즈어플리케이션 UI 개발기술의변화 2. 현표준웹기반엔터프라이즈 UI 개발도구현황 3. Natural-JS 아키텍처구성 4. Natural-JS 특징 5. 기대효과 1. 엔터프라이즈어플리케이션 UI 개발기술의변화 2000 년대이전 2000

More information

*2008년1월호진짜

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

More information

클라우드컴퓨팅 주요법령해설서 2017. 11. 목차 3... 5 I... 15 II... 39 1. 공공분야... 41 2. 금융분야... 71 3. 의료분야... 81 4. 교육분야... 95 5. 신산업등기타분야... 101 III... 109 요약문 5, 15 3, 1 16~ 18 15 11 16 4, 16 7,,, 5 16 5, 16 7~10,,,

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

웹개발을위한 ComponentOne 사용법 (2) 권대건 부산대학교컴퓨터공학과 Abstract 최근웹개발이활성화되면서전문가를위한여러가지 Tool 웹애플리케이션형태로제공하는경우가늘고있다. ComponentOne 은.NET 기반의 UI C

웹개발을위한 ComponentOne 사용법 (2) 권대건 부산대학교컴퓨터공학과 Abstract 최근웹개발이활성화되면서전문가를위한여러가지 Tool 웹애플리케이션형태로제공하는경우가늘고있다. ComponentOne 은.NET 기반의 UI C 웹개발을위한 ComponentOne 사용법 (2) 권대건 부산대학교컴퓨터공학과 duskan@pusan.ac.kr Abstract 최근웹개발이활성화되면서전문가를위한여러가지 Tool 웹애플리케이션형태로제공하는경우가늘고있다. ComponentOne 은.NET 기반의 UI Component 로.NET 기반의다양한사용자인터페이스를제공한다. 그중에서도특히 Chart 에대하여

More information

PowerPoint 프레젠테이션

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

More information

PowerPoint Template

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

More information

C스토어 사용자 매뉴얼

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

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

Windows 8에서 BioStar 1 설치하기

Windows 8에서 BioStar 1 설치하기 / 콘텐츠 테이블... PC에 BioStar 1 설치 방법... Microsoft SQL Server 2012 Express 설치하기... Running SQL 2012 Express Studio... DBSetup.exe 설정하기... BioStar 서버와 클라이언트 시작하기... 1 1 2 2 6 7 1/11 BioStar 1, Windows 8 BioStar

More information

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

60

60 광복60년기념전 시련과 전진 주 최 : 광복60년기념사업추진위원회 주 관 : 민주화운동기념사업회, 중앙일보 후 원 : SK Telecom, (주)부영, 다음 일 정 : 2005.8.14(일) ~ 8.23(일) 장 소 : 대한민국 국회 1. 내용의 일부 혹은 전체를 인용, 발췌하는 경우에는 반드시 저자와 출처를 밝혀 주셔야 합니다. 2. 본 자료는 http://www.kdemocracy.or.kr/kdfoms/에서

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

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

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

More information

vRealize Automation용 VMware Remote Console - VMware

vRealize Automation용 VMware Remote Console - VMware vrealize Automation 용 VMware Remote Console VMware Remote Console 9.0 이문서는새버전으로교체되기전까지나열된각제품버전및모든이후버전을지원합니다. 이문서에대한최신버전을확인하려면 http://www.vmware.com/kr/support/pubs 를참조하십시오. KO-002230-00 vrealize Automation

More information

RHEV 2.2 인증서 만료 확인 및 갱신

RHEV 2.2 인증서 만료 확인 및 갱신 2018/09/28 03:56 1/2 목차... 1 인증서 확인... 1 인증서 종류와 확인... 4 RHEVM CA... 5 FQDN 개인 인증서... 5 레드햇 인증서 - 코드 서명 인증서... 6 호스트 인증... 7 참고사항... 8 관련링크... 8 AllThatLinux! - http://allthatlinux.com/dokuwiki/ rhev_2.2_

More information

미쓰리 파워포인트

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

More information

<4D F736F F F696E74202D203137C0E55FBFACBDC0B9AEC1A6BCD6B7E7BCC72E707074>

<4D F736F F F696E74202D203137C0E55FBFACBDC0B9AEC1A6BCD6B7E7BCC72E707074> SIMATIC S7 Siemens AG 2004. All rights reserved. Date: 22.03.2006 File: PRO1_17E.1 차례... 2 심벌리스트... 3 Ch3 Ex2: 프로젝트생성...... 4 Ch3 Ex3: S7 프로그램삽입... 5 Ch3 Ex4: 표준라이브러리에서블록복사... 6 Ch4 Ex1: 실제구성을 PG 로업로드하고이름변경......

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

? : 6, 7 8 9, 10, ,, Adobe Marketing Cloud

? : 6, 7 8 9, 10, ,, Adobe Marketing Cloud ? Adobe ? 1 2 3 4 2014 5 : 6, 7 8 9, 10, 11 12 13 14,, 15 16 17 Adobe Marketing Cloud 5. Adobe. " "( 17% ).,,,, B2B... 86% 모바일채널이마케팅 전략에매우중요하다고 1 응답했습니다. 의모바일마케터 . 모바일마케터의연평균지출 500 만달러모바일웹사이트 550 만달러모바일앱

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Autodesk Software 개인용 ( 학생, 교사 ) 다운로드가이드 진동환 (donghwan.jin@autodesk.com) Manager Autodesk Education Program - Korea Autodesk Education Expert 프로그램 www.autodesk.com/educationexperts 교육전문가프로그램 글로벌한네트워크 /

More information

SM-G906S 갤럭시 S5 광대역 LTE-A O SM-G910S 갤럭시라운드 O SM-G920S 갤럭시 S O SM-G925S 갤럭시 S6 엣지 O SM-G928S 갤럭시 S6 엣지 plus O SM-G930S

SM-G906S 갤럭시 S5 광대역 LTE-A O SM-G910S 갤럭시라운드 O SM-G920S 갤럭시 S O SM-G925S 갤럭시 S6 엣지 O SM-G928S 갤럭시 S6 엣지 plus O SM-G930S 제품의사양을보여주는표입니다. 제조사 기종 이름 버전 944( 인증 ) SHV-E110S 갤럭시 S2 LTE 4.1.2 O SHV-E120S 갤럭시 S2 HD LTE 4.0.4 O SHV-E160S 갤럭시노트1 4.1.2 O SHV-E170S 갤럭시 R 스타일 4.1.2 O SHV-E210S 갤럭시 S3 LTE 4.4.4 O SHV-E220S 갤럭시팝 4.4.4

More information

IRISCard Anywhere 5

IRISCard Anywhere 5 이 빠른 사용자 가이드는 IRISCard Anywhere 5 및 IRISCard Corporate 5 스캐너의 설치와 시작을 도와 드립니다. 이 스캐너와 함께 제공되는 소프트웨어는: - Cardiris Pro 5 및 Cardiris Corporate 5 for CRM (Windows 용) - Cardiris Pro 4 (Mac OS 용) Cardiris 의

More information

1809_2018-BESPINGLOBAL_Design Guidelines_out

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

More information

<34BFF9C8A320B4DCB8E9B0EDC7D8BBF32E706466>

<34BFF9C8A320B4DCB8E9B0EDC7D8BBF32E706466> ISSN 2288-5854 Print ISSN 2289-0009 online DIGITAL POST KOREA POST MAGAZINE 2016. APRIL VOL. 687 04 DIGITAL POST 2016. 4 AprilVOL. 687 04 08 04 08 10 13 13 14 16 16 28 34 46 22 28 34 38 42 46 50 54 56

More information

C O N T E N T S 목 차 요약 Ⅰ. 동유럽의료기기시장개요 동유럽의료기기시장현황 2. 관련 EU 정책및지침 3. 시장전망 Ⅱ. 국가별의료기기시장동향 폴란드 2. 체코 3. 헝가리 4. 크로아티아 Ⅲ. 국가별유망품

C O N T E N T S 목 차 요약 Ⅰ. 동유럽의료기기시장개요 동유럽의료기기시장현황 2. 관련 EU 정책및지침 3. 시장전망 Ⅱ. 국가별의료기기시장동향 폴란드 2. 체코 3. 헝가리 4. 크로아티아 Ⅲ. 국가별유망품 Global Market Report 15-036 2015. 8. 27. 동유럽의료기기시장동향과 진출방안 C O N T E N T S 목 차 요약 Ⅰ. 동유럽의료기기시장개요 1 1 2 3 1. 동유럽의료기기시장현황 2. 관련 EU 정책및지침 3. 시장전망 Ⅱ. 국가별의료기기시장동향 5 4 12 20 35 1. 폴란드 2. 체코 3. 헝가리 4. 크로아티아 Ⅲ.

More information

Microsoft PowerPoint - CSharp-10-예외처리

Microsoft PowerPoint - CSharp-10-예외처리 10 장. 예외처리 예외처리개념 예외처리구문 사용자정의예외클래스와예외전파 순천향대학교컴퓨터학부이상정 1 예외처리개념 순천향대학교컴퓨터학부이상정 2 예외처리 오류 컴파일타임오류 (Compile-Time Error) 구문오류이기때문에컴파일러의구문오류메시지에의해쉽게교정 런타임오류 (Run-Time Error) 디버깅의절차를거치지않으면잡기어려운심각한오류 시스템에심각한문제를줄수도있다.

More information