이번장에서는본격적으로사이트를제작하도록하겠습니다. 우선사이트제작에앞서몇가지준비사항및주의점이있습니다. 1. 예제를실행하기위해선 WAMP 또는 MAMP 서버가필요합니다. WAMP 서버설치방법은부록을참고하기바랍니다. 1 사이트준비작업 2. 포토샵을이용해서만들어진사이트디자인레이

Size: px
Start display at page:

Download "이번장에서는본격적으로사이트를제작하도록하겠습니다. 우선사이트제작에앞서몇가지준비사항및주의점이있습니다. 1. 예제를실행하기위해선 WAMP 또는 MAMP 서버가필요합니다. WAMP 서버설치방법은부록을참고하기바랍니다. 1 사이트준비작업 2. 포토샵을이용해서만들어진사이트디자인레이"

Transcription

1 chapter 14 사이트제작전 준비작업및 프론트페이지제작 14장에서는사이트제작에들어가기에앞서, 필요한사항을먼저점검하도록하겠습니다. 사이트를제작하기위해선먼저준비해야하는사항이몇가지있는데, 실제서버와같이동작하게해주는개인용웹서버가준비되어있어야하고, 사이트의디렉토리또한구성되어야합니다. 또한사이트를제작하려면, 포토샵과같은그래픽저작도구를이용해서레이아웃을구성해야함은물론이고, 그래픽요소가필요한부분을따로저장해야하는방법도알아야합니다.

2 이번장에서는본격적으로사이트를제작하도록하겠습니다. 우선사이트제작에앞서몇가지준비사항및주의점이있습니다. 1. 예제를실행하기위해선 WAMP 또는 MAMP 서버가필요합니다. WAMP 서버설치방법은부록을참고하기바랍니다. 1 사이트준비작업 2. 포토샵을이용해서만들어진사이트디자인레이아웃이있어야합니다. 포토샵사용법에대해자세히학습하지않습니다만, 웹에서사용하는레이아웃은어떻게잘라내고어떤파일을사용하는가에대한설명은간단하게진행하겠습니다. 포토샵으로만들어진샘플파일은원본 PSD 파일로제공됩니다. 3. 필요한폴더들은미리만들어놓습니다. 사이트제작과정에서필요한폴더명을알려드립니다. 4. 여기사용된예제들에는웹프로그래밍 (PHP, ASP,.Net 등 ) 이적용되지않은상태입니다. 웹프로그래밍에대해서도전혀언급되지않습니다. 5. 제작되는사이트는 HTML5, CSS3의거의모든기능이지원되는브라우저를사용해야합니다. IE10 이상, 구글크롬 26 이상, 파이어폭스 20 이상, 사파리의최신버전은맥에서만지원되기때문에여기서언급을하진않겠습니다. 하위브라우저에대한호환성도다루긴합니다만, 아무래도효과나기타여러기능들이완벽하게동작하지않을수있습니다. 위와같은준비사항을명심하고, 이제부터사이트제작에들어가보도록하겠습니다. 책에서나오는예제는임베디드방식으로 CSS를적용합니다. 실제사이트작업시 우선 WAMP 서버가 PC에설치된상태이면, WAMP 서버가설치된폴더에있는서브폴더 www 내부에사이트용폴더를하나만듭니다. 필자는 yngsite라는폴더를하나만들겠습니다. 여기에다음과같이일단 3개의폴더를만들어놓습니다. imgs/ 이미지파일들이저장되는곳입니다. css/ CSS 파일은여기에넣습니다. scripts/ 자바스트립트파일들은여기에넣습니다. 이외에사이트가아주큰경우에는사이트의메인메뉴에따른폴더들을하나씩만들어놓습니다. 하지만전체페이지가 20페이지이내일경우에는폴더에넣지않고루트폴더에작업하는것이편리합니다. 현재만들사이트도규모가크지않기때문에루트에파일을넣고작업하도록하겠습니다. 최종적으로만들려는사이트의프론트페이지는 [ 그림 14-1] 과같습니다. 에는 CSS 파일을따로만들어서작업을하는데, 책에서는예제파일을하나씩실행해야하는문제가있어, 작업이끝나기전에는임베딩방식으로 CSS를적용하고, 최종웹사이트에서는 CSS를별도로분리하도록하겠습니다. 주의 ) 예제로제공된압축파일을풀면, yngsite 라는폴더가생성되고, 그폴더안에파일들이있습니다. 학습이제대로이루어지려면, 먼저부록에나와있는 WAMP 또는 MAMP를설치하여야합니다. WAMP 또는 MAMP가설치된상태에서 WAMP 서버내에있는 www 폴더, MAMP 서버의 htdocs 폴더에 yngsite 라는폴더를이동해주면됩니다. 모든예제들은브라우저에서 라는곳에서실행되게되며, 예제소스경로또한 localhost 로표기됩니다. 예를들어, 이렇게표시됩니다. 380 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 381

3 #logo #wrap header #hlink nav #slider #justar #notinews #social footer [ 그림 14-2] 선택자를각부분별로정의 [ 그림 14-1] 제작할사이트의프론트페이지 이런형태의웹사이트레이아웃은단순하지만, 일반적으로많이사용되고, 오랜기간사용할수있다는장점이있습니다. 만들려는사이트는기본적으로 HTML5와 CSS3를기본으로제작할예정이며, CSS3를이용할수없는특수효과는 jquery를이용해서만들겠습니다. 가장우선적으로해야할작업은프론트페이지에서이미지로처리할부분과일반코드로처리할것을구분하는것입니다. 또한만들어진디자인레이아웃을기반으로 HTML 코드를작성해두면편리합니다. [ 그림 14-2] 와같이미리각부분별로태그선택자와아이디선택자를정리합니다. 여기서아주잠깐포토샵을이용해서이미지로처리할부분에대해서잘라내고저장하는방법에대해서설명해드리겠습니다. 지금필자가사용하는포토샵은 CS6 버전입니다만, 어떤포토샵버전을사용하더라도동일한작업을할수있습니다. [ 그림 14-3] 을보면포토샵의레이어팔레트에서배경으로사용된레이어의눈아이콘을비활성화하면배경이사라져투명해지는것을알수있습니다. 이때이미지로저장할부분을선택툴로선택한후 CTRL + SHIFT + C 키를누릅니다. CTRL + SHIFT + C는 copy merged 기능으로어떤레이어상태에서작업하더라도해당선택부분을복사하는기능이있습니다. 그후 CTRL + N 키를누르면새로운작업윈도우가나오며, 여기에 CTRL + V 키를눌러붙여넣기를합니다 ( 그림 14-5 참조 ). 382 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 383

4 [ 그림 14-6] 배경이제거된이미지 [ 그림 14-3] 포토샵에서제작된파일의배경레이어감추기 이렇게배경이제거된이미지는 3가지파일포맷으로저장할수있는데, 그림과같이배경이사용되지않는경우 gif 파일또는 png 파일로저장하면됩니다. < 여기서잠깐 > 에서도언급되지만로고와같이복잡한곡선이들어가있는경우에는 png 파일로저장하는것이좋습니다. 여기서잠깐 배경이투명한파일은 GIF 와 PNG 라는두가지타입으로저장할수있습니다. GIF 파일은 [ 그림 14-4] 선택툴을이용해서해당이미지부분선택 인터넷초창기부터사용하던파일포맷이며, 역사가가장오래된파일타입이라고할수있습니다. GIF 파일의장점은파일사이즈가작으며, Animated GIF 즉파일자체에서애니메이션파일로만들수있습니다. 또한배경을투명하게만들수있습니다. 하지만색상표현이 256 컬러로제한되고, 투명한배경을지정할경우복잡한곡선은거칠게표현됩니다. 직선으로만되어있으면 GIF 파일을추천합니다. 따라서웹에서사용하는아이콘이나, 색이복잡하지않은단순한이미지는 GIF 파일이좋습니다. PNG 파일은 [ 그림 14-5] 선택된이미지의붙여넣기후상태 [ 그림 14-5] 를보면이미지가선택된부분보다작게이미지크기에딱맞는크기로붙여넣어진것을확인할수있습니다. 여기서다시 Background 레이어에있는눈아이콘을클릭해서배경을없애줍니다 ( 그림 14-6 참조 ). 인터넷전용으로나온파일로 Portable Network Graphic이란의미입니다. 가장최근에나온그래픽전용파일로, GIF 파일과달리투명한배경을완벽하게투명하게만들수있는장점이있습니다. PNG 파일은 png8, png16, png24, png32와같이 8비트 16비트 24비트 32비트파일포맷이존재합니다. png8 포맷은투명배경효과가 gif보다약간뛰어나거나별차이가없습니다. 색상또한 256 컬러만지원합니다. png24 이상은투명효과가완벽하며, 많은수의색상을구현할수있습니다만, 파일크기가제일크다는단점이있습니다. 따라서인터넷에서이미지파일을사용할때, 간단한아이콘은 gif 파일로, 복잡한곡선이들어가지만투명한배경이필요하면 png 파일을, 사진파일은 jpg 파일로사용하는것이좋습니다. 384 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 385

5 포토샵에서단축키 ALT + SHIFT + CTRL + S 즉 Save for web( 웹으로저장 ) 을누릅니다. 그러면 [ 그림 14-7] 과같은화면이나오며, 그림에서와같이파일타입을선택한후저장을하면됩니다. 여기서는 PNG-24로선택하고 Transparency에체크를해주면배경이투명한 png 파일로저장을할수있습니다. 이파일에이름을지정하고 wamp 서버 www 폴더내에있는 yngsite의 imgs 폴더에저장합니다. 이런방식으로이미지로처리할부분은전부저장합니다. 슬라이더이미지는압축률 60% 정도로설정한 jpg 형식으로나머지파일또한적당한파일포맷으로저장합니다. 필자가미리작업해둔폴더 ( 그림 14-8 참고 ) 를보면각파일들이어떤포맷으로저장되어있는지알수있습니다. 참고하기바랍니다. [ 그림 14-8] imgs 폴더에저장된파일형식 마지막으로준비할사항은 CSS Reset 이라불리는 CSS 초기화파일을설정하는것입니다. CSS 초기화는각브라우저마다 HTML 태그들간의마진과패딩및기타속성값이조금씩차이가나기때문에 CSS를이용해서값을초기화하는것을말합니다. 가장간단한방법은 CSS 속성에다음과같이적용하는것입니다. * {margin:0; padding:0 전체선택자를이용해서모든태그선택자의마진과패딩을 0 으로만드는것입니다. [ 그림 14-7] save for web 화면 가장간단하고, 쉽습니다. 하지만이렇게전체선택자를이용해서모든선택자의마진과패딩을 0으로만든다고문제가해결되지않는경우도있습니다. 이럴경우조금은정교하게 CSS를이용하여선택자의값을설정해줘야합니다. 이럴때사용하는것이외부파일로 CSS reset 또는 link 명령을이용해만들려는사이트에포함하면됩니다. 이 CSS reset 중가장유명한것이 Eric Meryer 의 CSS Reset입니다. 그다음유명한것이야후에서만든 YUI Reset이있습니다. 그리고 HTML5가나오면서 html5doctor라는사이트에서만든 HTML5 reset도있습니다. 필자가추천하는 Reset 파일은구글코드에있는 Eric Meyer s CSS Reset 과 hmlt5doctor.com s HTML5 reset을결합한 reset5라는 CSS reset을추천합니다. 해당파일은 에서구할수있습니다. 이제프론트페이지를시작으로사이트를제작해보겠습니다. 386 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 387

6 2 프론트페이지제작 #logo header #hlink nav [ 그림 14-9] 헤더부분에있는선택자들 [ 그림 14-9] 에서설정한선택자를기반으로 HTML 코드를구성해보겠습니다. 이제본격적으로프론트페이지를제작합니다. 3 부 1 장에서 HTML5 템플릿파 일 html5css3template.html 을만들었습니다. 이제부터설명하는예제들은 html5css3template.html 을기초로작업을하겠습니다. 먼저에디터에서 html5css3template.html 파일을열어 다른이름으로저장 (save as) 을선택하여, index.php 파일이라고저장합니다. 제일먼저 #wrap 이라는아이디선택자를이용해서문서전체를감쌉니다. wrap 이 라는아이디선택자는문서전체를감싸고문서를중앙에배치하는역할을합니다. <!doctype html> <html> <head> <meta charset="utf-8"> <title>yng 에오신여러분을환영합니다.</title> <style></style> </head> <body> <div id="wrap"> </body> </html> ] #wrap 아이디선택자를이용하여전체문서를감싸줌 _ /yngsite/index01.php 이제 header 부분을작업하겠습니다. 이전 [ 그림 14-2] 에서따로헤더부분만분리 해보면 [ 그림 14-9] 과같습니다. <!doctype html> <html> <head> <meta charset="utf-8"> <title>yng 에오신여러분을환영합니다.</title> <style></style> </head> <body> <div id="wrap"> <header> <div id="logo">yng Corp. <div id="hlink"> <ul> <li> 로그인 </li> <li> 회원가입 </li> </ul> <nav> <ul> <li> 회사소개 </li> <li> 제품정보 </li> <li> 커뮤니티 </li> <li> 고객지원 </li> </ul> </nav> </header> </body> </html> [ 코드 14-2] header 부분에대한 HTML 코드정리 _ /yngsite/index02.php 388 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 389

7 코드를보면알겠지만, 현재모든부분이텍스트로구성되어있습니다. 이미지는전혀들어가있지않은상태입니다. 결과는 [ 그림 14-10] 에서확인할수있습니다. * 최종파일은 index.php 파일이되지만, 단계별학습을위해예제파일에숫자를붙여서표기하도록하겠습니다. 이제 CSS 속성을이용해서 header 부분에대한디자인작업을시작해보겠습니다. a {text-decoration:none;color:#333; /* 기본링크색상및밑줄제거 */ a:hover {color:#39f; text-decoration:none /* 마우스오버시색상및효과적용 */.clear { clear:both /* clear 선택자설정... 하단생략... [ 코드 14-3] reset5.css 적용및 body, #wrap 등기본선택자에속성적용 [ 코드 14-3] 까지가사이트전체기본이되는뼈대라고할수있습니다. 이제부터는실제웹사이트의요소들인선택자에대해속성을적용해보겠습니다. 먼저포토샵에서작업된부분에정확한위치를파악해야만해당요소들을정확하게배치할수있습니다. 포토샵에는 ruler tool이있어해당요소가정확하게어느정도의위치에있는지거리를잴수있습니다. [ 그림 14-11] 에서회사로고가있는부분 [ 그림 14-10] header 부분의 HTML 코딩후결과화면 이제여기에 reset5.css 파일을링크로연결해주고기본적인 body 와 #wrap 선택자 을상단에서부터재보면 H:42.00으로표시되어있는것을볼수있습니다 ( 그림에서보이는포토샵은단위가 pixel로설정되어있는상태입니다 ). 그리고기본적인링크효과에대한속성을정의합니다. <!doctype html> <html> <head> <meta charset="utf-8"> <title>yng 에오신여러분을환영합니다.</title> <link href="css/reset5.css" rel="stylesheet" type="text/css"> <!-- reset5.css 파일을링크형식으로적용 --> <style> body{ font-size: 0.75em; /* 사이트전체기본폰트사이즈설정 */ font-family: " 맑은고딕 ", "Malgun Gothic", " 돋움 ", Dotum, AppleGothic, sans-serif; /* 사이트전체기본폰트설정 */ line-height:1.2em; /* 글단락사이기본간격설정 */ color:#333; /* 기본폰트색상지정 */ background-color: #e8e8e8; /* 기본바탕배경색지정 */ #wrap{ margin: 0 auto; /* 실제사이트를감싼 wrap 중앙정렬 */ width: 944px; /* 실제사이트의크기설정 */ background-color: #fff; /* wrap 부분배경색상설정 */ [ 그림 14-11] 포토샵에서 ruler 를이용, 요소들의정확한위치재기 이런방식을통해각요소들의위치를파악할수있습니다. 이렇게파악된위치를바탕으로 header 부분에대한작업을하겠습니다. 우선 header 전체의높이는 137픽셀입니다. 그리고현재로고에는텍스트로 YNG Corp. 이라고되어있는데, 보통사이트들은회사로고를클릭하면항상홈화면으로돌아가게처리합니다. 따라서 HTML에 <div id="logo"><a href="#">yng Corp.</a> 와같이링크를걸어줍니다. 390 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 391

8 여기서잠깐 더미 ( 가짜 ) 링크 # 을이용한링크는보통더미 ( 가짜 ) 링크라고합니다. 웹사이트제작시링크가되는부분에대해먼저더미링크를이용해서링크효과를확인할때주로사용되며, 사이트가제작되는중간에 # 을제거하고실제링크로대체합니다. 그리고 logo 부분에는다음과같이속성을정의합니다. #logo{ float: left; /* 왼쪽정렬 */ text-indent: -9999px; /* text-indent 속성으로텍스트감춤 */ width:167px; /* 로고넓이설정 */ height:63px; /* 로고높이설정 */ background:url(imgs/logo.png) no-repeat left top; /* 배경이미지로로고이미지사용 */ margin:42px px; /* 포토샵에서측정한마진값설정 */ 방법은단순합니다. #logo a 라는선택자를만들어서 #logo 에적용된 width 와 height 를 #logo a 에적용해주고인라인속성인 #logo a 를 display:block 즉블록속성으로 변환해버리면됩니다. 다음과같이적용해주면됩니다. #logo{ float: left; text-indent: -9999px; background:url(imgs/logo.png) no-repeat left top; margin:42px px; #logo a { display:block; width:167px; height:63px; 이렇게적용해주면로고부분전체에링크가걸리게되는것입니다. [ 그림 14-13] 을보면차이점을알수있습니다. 여기까지의결과는 [ 그림 14-12] 와같습니다. [ 그림 14-13] #logo a 적용전 ( 왼쪽그림 ) 과적용후 ( 오른쪽그림 ) 이제로그인부분즉 #hlink 라고되어있는부분과메인메뉴에대한처리를해보 겠습니다. [ 그림 14-13] 에서보면로그인과회원가입부분에는리스트스타일이적용되어있 [ 그림 14-12] 로고부분텍스트를이미지로교체 하지만여기서로고부분즉텍스트에링크를걸었는데, 로고이미지를클릭해보면링크가되어있지않는것을확인할수있습니다. 이유는텍스트에링크는걸려져있는데, 텍스트를감춰버려링크대상이없다는것입니다. 그럼이런경우어떻게처리해야할까요? 는데, 회사소개, 제품정보가있는메인메뉴에는리스트스타일이적용되어있지않습니다. 그이유는 reset5.css 파일내부에 nav ul {list-style:none 이라고되어있기때문에 nav 부분에는리스트스타일이없습니다. 먼저 #hlink와 nav는오른쪽으로정렬되어있습니다. 따라서그룹선택자를사용하여묶어주고 float:right를적용합니다. 그리고 #hlink 부분에 list-style:none을지정합니다. 또한현재상하로배치되어있는리스트를좌우방향으로배치하기위해서 #hlink li 와 nav li 의속성을 float:left 로지정합니다. 정리를하면다음과같습니다. 392 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 393

9 #hlink, nav {float:right; #hlink ul {list-style:none; #hlink li, nav li {float:left; 그에따른결과는 [ 그림 14-14] 를참조하면됩니다. [ 그림 14-16] #hlink 와 nav 의마진값을이용하여자리배치후모습 이제각텍스트사이의간격과메인메뉴의크기를조절하도록하겠습니다. 텍스트간격은패딩을이용해서처리합니다. 그리고메인메뉴에는메뉴간의구분을위해서구분선이되어있는데, 이부분은백그라운드이미지를이용해서처리합니다. [ 그림 14-14] #hlink 부분과 nav 부분에대한처리 [ 그림 14-14] 를보면 #hlink 부분과 nav 부분이동시에 float:right 가되어있어한 줄에배치되어있는것을알수있습니다. nav 부분은 #hlink 다음라인에배치하려면 nav에만 clear:right를지정해주면문제가해결됩니다. [ 그림 14-17] header 부분전체레이아웃모습 [ 그림 14-17] 을보면메인메뉴부분에구분선이들어가있는데, 마지막부분 고객지원 다음에도구분선이들어가있습니다. 원본디자인에는이곳에구분선이없습니다. 따라서이부분은제거해야합니다. :last-child라는수도선택자를이용해서배경이미지를없애버리면됩니다. 여기까지적용된 CSS 속성은다음과같습니다. [ 그림 14-15] nav 선택자에 clear:right 적용하여, 다음라인으로배치후모습 이제 #hlink와 nav 부분에대한마진값을설정하여정확한위치에배치하도록하겠습니다. #hlink {margin:11px 28px 0 0; nav {margin:42px 38px 0 0; clear:right; 이속성을적용한후결과는 [ 그림 14-16] 과같습니다. #hlink, nav {float:right; #hlink ul {list-style:none; #hlink li, nav li {float:left; #hlink {margin:11px 28px 0 0; #hlink li a {padding:0 10px nav {margin:42px 38px 0 0; font-size:1.4em;clear:right; nav li {background:url(imgs/div_line.png) no-repeat center right /* 배경이미지로구분선적용 */ nav li a {padding:0 20px / * 각메뉴사이간격제거 */ nav li:last-child {background:none /* 마지막구분선배경이미지제거 */ 394 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 395

10 여기서원본포토샵에서는메인메뉴의폰트가지금까지작업한 nav 부분과다릅니다. HTML로적용된메뉴는기본폰트가 맑은고딕 인데원본포토샵파일에는 제주고딕 이사용되었습니다. 그렇다면이럴경우어떻게처리해야할까요? 두가지방법이있는데, 그방법은다음과같습니다. [ 그림 14-19] 드림위버에서이미지객체 -> 롤오버이미지삽입 첫번째는현재만들어진메인메뉴부분을그래픽이미지로변경하는방법이고두번째는 제주고딕 속성을이용해서처리하는방법입니다. 두번째방법이좋겠지만, 한글폰트는웹폰트로변경하게되면파일크기가상당히크다는단점이있습니다. 따라서 제주고딕 이라는글씨체가현재웹사이트의메인폰트인경우에는웹폰트를사용해야지만, 현재와같이메인메뉴에만사용한다면그래픽이미지로처리하는것이좋습니다. 우선메인메뉴를그래픽파일로처리하는데, 메인메뉴에마우스오버동작시일반적으로색이변하거나, 애니메이션효과를주는것이일반적입니다. 이책에서는웹표준방식을이용해서텍스트를그래픽파일로변환하는세가지방법에대해서설명해드리겠습니다. 먼저메인메뉴에사용될이미지를준비합니다. 일반적으로 4개의메뉴가있으면, 그래픽파일은 8개를만듭니다. 각메뉴에사용될이미지하나, 마우스오버시변화할메뉴하나씩준비합니다. [ 그림 14-20] 드림위버의롤오버이미지사용시쓸데없는코드가생성된다. [ 그림 14-18] 메인메뉴에사용될그래픽이미지 우선웹표준방식으로제작하기전에이전방식즉 WISIWIG 에디터 ( 대표적으로드림위버 ) 에서롤오버이미지를삽입하여메인메뉴를제작하는방법을보겠습니다. 분명히이책을보는분들중에서도이런방식으로지금까지메인메뉴부분을작업했던분들이계십니다. [ 그림 14-19] 와같이드림위버의메뉴중에서삽입이미지객체롤오버이미지를이용해서이미지의롤오버효과를내주는방법이있습니다. 하지만이방법을쓰면, 쓸데없는자바스크립트코드가생기고코드가아주지저분해지는단점이있습니다. [ 그림 14-20] 에서와같이자동으로자바스크립트코드가생성되고메인메뉴가들어가는부분과 body 태그에도코드들이들어가있습니다. 전체적으로너무많은코드가생성되어지저분하게보입니다. [ 그림 14-21] 그래픽이미지를이용하여메인메뉴처리후모습 ( 드림위버롤오버이미지사용 ) 396 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 397

11 웹표준방식을사용하면, 이런쓸데없는코드는제거하고, 아주깔끔하게코드를처리할수있으며심지어메인메뉴에있는텍스트도유지할수있습니다. 먼저메인메뉴부분에클래스선택자를추가해줍니다. <li class="n1"><a href="#"> 회사소개 </a></li> <li class="n2"><a href="#"> 제품정보 </a></li> <li class="n3"><a href="#"> 커뮤니티 </a></li> <li class="n4"><a href="#"> 고객지원 </a></li> 그리고 CSS에서 nav 부분에 text-indent:-9999px를적용하여텍스트들을전부감춥니다. 그후에다음과같이각클래스선택자부분에배경이미지로해당그래픽이미지를적용합니다. nav li.n1 a:hover {background:url(imgs/menu11.png) no-repeat top center; nav li.n2 a:hover {background:url(imgs/menu21.png) no-repeat top center; nav li.n3 a:hover {background:url(imgs/menu31.png) no-repeat top center; nav li.n4 a:hover {background:url(imgs/menu41.png) no-repeat top center; nav li a { padding:0; display:block; width:118px; height:20px; nav li:last-child { background:none [ 메인메뉴 HTML 코드 ] <nav> <ul> <li class="n1"><a href="#"> 회사소개 </a></li> <li class="n2"><a href="#"> 제품정보 </a></li> <li class="n3"><a href="#"> 커뮤니티 </a></li> <li class="n4"><a href="#"> 고객지원 </a></li> </ul> </nav> nav li.n1 a {background:url(imgs/menu1.png) no-repeat top center; [ 코드 14-4] 메인메뉴 CSS 를이용하여그래픽이미지로변환 그리고 nav li.n1 a:hover 상태에서다음과같이배경이미지를변경합니다. nav li.n1 a:hover {background:url(imgs/menu11.png) no-repeat top center; 그리고여기에 transition 효과를적용해보겠습니다. transition 효과를적용하면, 메인메뉴마우스오버시부드럽게이미지가변환되는효과를볼수있습니다 (IE는 이방법이필자가알려드리는가장기본적인방법중첫번째방법입니다. 소스코드 : 두번째방법은그래픽이미지를 4 개를만들어서사용하는방법입니다. 효과가미미함 ). 메인메뉴가적용된 CSS 와 HTML 코드는다음과같습니다. [ 그림 14-22] 메인메뉴에사용되는 4 개의그래픽이미지 [ 메인메뉴 CSS 코드 ] nav {margin:42px 38px 0 0;font-size:1.4em;clear:right;text-indent:-9999px;width: 480px;height:20px; nav li {background:url(imgs/div_line.png) no-repeat center right nav li.n1 a {background:url(imgs/menu1.png) no-repeat top center;transition:all 0.2s ease-in-out; nav li.n2 a {background:url(imgs/menu2.png) no-repeat top center;transition:all 0.2s ease-in-out; nav li.n3 a {background:url(imgs/menu3.png) no-repeat top center;transition:all 0.2s ease-in-out; nav li.n4 a {background:url(imgs/menu4.png) no-repeat top center;transition:all 0.2s ease-in-out; 두번째방법도사실첫번째방법과큰차이는없습니다만, 그래픽이미지를 4개사용한다는점과첫번째방법보다더큰효과를적용할수있다는차이가있습니다. 바로 CSS 코드를확인해보면다음과같이처리하는것입니다. nav li.n1 a {background:url(imgs/m1.png) no-repeat center top; 기본상태인경우배경이미지의위치는 center top 상태입니다. 하지만마우스오버시에는 center -23px 상태입니다. nav li.n1 a:hover {background:url(imgs/m1.png) no-repeat center -23px; 398 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 399

12 즉마우스오버시배경이미지의상태에변화를줌으로써, 단순하게 4개의이미지로도동일한효과를낼수있다는것입니다. 여기에 transition:all 0.2s ease-inout; 효과를적용해주면, 아주큰효과를낼수있습니다. 직접한번예제파일을실행해보기바랍니다. 소스코드 : 마지막세번째방법은하나의이미지를이용해서메인메뉴를만드는것입니다. 이미지파일을하나만사용하기때문에이전방법에서각메뉴에적용되었던이미지파일들을그룹선택자를이용해서다음과같이한번만사용하면됩니다. nav li.n1 a, nav li.n2 a, nav li.n3 a, nav li.n4 a, nav li.n1 a:hover, nav li.n2 a:hover, nav li.n3 a:hover, nav li.n4 a:hover { background-image:url(imgs/main_menu.png); background-repeat:no-repeat; 이제각메인메뉴에적용된클래스선택자에해당배경이미지의위치를다음과같 이적용합니다. nav li.n1 a {background-position:27px top; nav li.n2 a {background-position:-96px top; nav li.n3 a {background-position:-217px top; nav li.n4 a {background-position:-338px top; nav li.n1 a:hover {background-position: 27px -23px; nav li.n2 a:hover {background-position: -96px -23px; nav li.n3 a:hover {background-position: -217px -23px; nav li.n4 a:hover {background-position: -338px -23px; 마지막으로 transition 효과를적용합니다. nav li.n1 a, nav li.n2 a, nav li.n3 a, nav li.n4 a{transition:all 0.2s ease-inout; 이렇게처리한결과는소스코드 : 어떻게보면세번째방법이가장편리할수도있습니다만, 배경이미지의위치를 [ 그림 14-23] 메인메뉴에사용되는하나의그래픽이미지 하나의그래픽파일을이용할경우장점이브라우저에서여러개의파일을불어오는경우보다더빨리이미지를불러올수있으며, 한번브라우저에서로딩이된후에도아주작은차이지만, 처리속도가향상되는장점이있습니다. 그래픽파일하나만으로메인메뉴를처리하는방법도사실두번째방법과유사한방법으로처리하는것입니다. 하지만차이점은이미지파일을하나만사용한다는것입니다. 잡는번거로움이만만치않는단점이있습니다. 지금까지설명한세가지방법을적절히이용하면, 책의예제보다더멋진효과를구현할수있습니다. 직접여러분들이한번씩예제를기반으로더많은연습을해보기바랍니다. 이제 jquery를이용해서슬라이더이미지부분을처리해보도록하겠습니다. 슬라이더이미지부분은 3부 2장 jquery에서소개했던 Nivo Slider를이용하도록하겠습니다. 400 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 401

13 Nivo Slider 는사용법도편리하고, 세계적으로가장많이사용되는 jquery 슬라이 이렇게처리하면다음과같은결과를얻을수있습니다. 더중하나입니다. Nivo Slider는 에서다운받을수있습니다. 다운받은 Nivo Slider 패키지의압축을풀어 scripts 폴더에는 jquery.nivo.slider.js 파일을 css 폴더에는 nivo-slider.css 파일및 themes라는폴더를넣어줍니다. 그리고 index.php 파일에해당효과를적용해주면됩니다. 먼저 Nivo Slider를구동시키는두개의 CSS 파일을 link 속성을이용해넣어줍니다. <link href="css/themes/default/default.css" rel="stylesheet" type="text/css"> <link href="css/nivo-slider.css" rel="stylesheet" type="text/css"> 그리고 Nivo Slider가들어가는부분에는다음과같은선택자를추가하고 4개의이미지파일을넣어줍니다. <div class="slider-wrapper theme-default"> <div id="slider" class="nivoslider"> <img src="imgs/slider1.jpg" width="943" height="401"> <img src="imgs/slider2.jpg" width="943" height="401"> <img src="imgs/slider3.jpg" width="943" height="401"> <img src="imgs/slider4.jpg" width="943" height="401"> 마지막으로 Nivo Slider를구동하게해주는 jquery와 Nivo Slider 스크립트파일을넣어줍니다. 여기서 jquery 는 CDN 을이용, 항상최신버전의 jquery 를호출하게처리하겠습니다. <script type="text/javascript" src=" script> <script type="text/javascript" src="scripts/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoslider(); ); </script> [ 그림 14-24] Nivo Slider 를이용한슬라이더부분 _ HTML 구조에서슬라이더이미지가끝나부분에 <div class="clear"> 를추가 하여확실하게구분을합니다. 이제슬라이더하단에배치된 Just Arrived 부분에대해서처리해보겠습니다. 이부분은단순한구조를지녔습니다. 먼저 HTML 구성부터살펴보겠습니다. <div id="justar"> <h3>just arrived</h3> <figure><img src="imgs/goods1.jpg" width="161" height="125"></figure> #justar라는아이디선택자로박스를만들고내부에는 h3 태그를이용하여제목을 figure 태그로이미지를감싼형태입니다. CSS를이용해서디자인을잡습니다. 현재 Just Arrived 라는텍스트는 Droid Sans 라는공개폰트를사용하고있는데, 직접웹폰트로변환해도되고, 아니면 google fonts 서비스를이용해도됩니다 ( 이책에서는 google fonts 서비스를이용하도록하겠습니다. 402 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 403

14 google fonts 서버스를이용하는방법은상당히간단합니다. 해당폰트가들어있는 css 파일을링크형식으로 HTML 파일내부에넣어줍니다. <link href=' rel='stylesheet' type='text/css'> 그리고해당폰트가사용되는선택자에 "font-family: 'Droid Sans', sans-serif;" 를적용해주면됩니다. 이제 justar 부분에대한 CSS 파일을확인해보겠습니다. #justar { margin: px; /* 왼쪽부분여백 20픽셀 */ float:left; /* 왼쪽으로배치 */ width:200px; /* 박스크기 200픽셀 */ #justar h3 { text-transform:capitalize; /* 영문첫글자만대문자로 */ background:url(imgs/h3_under.jpg) no-repeat left bottom; /* 백그라운드이미지를이용하여제목부분장식추가 */ padding:0 0 8px 5px; /* 패딩으로왼쪽과하단부분공간적용 */ font-family: 'Droid Sans', sans-serif; /* 구글폰트사용 */ font-weight:normal; /* h로시작하는태그는전부 bold 속성을지니기때문에폰트두께를 normal 로설정 */ font-size:1.1em; #justar figure { text-align:center; /* text-align은글자뿐만아니라그림도정렬됨, 중앙정렬 */ padding-top:10px; /* 위쪽부분패딩이용 10픽셀공간적용 */ [ 그림 14-25] Just Arrived 부분작업, <div class="clear"> 적용전 : 왼쪽, 적용후 : 오른쪽 여기서잠깐사이트제작시코드및영문텍스트는소문자로영문텍스트인경우소문자로만드는것이좋습니다. HTML 코딩및 CSS 코딩에서도소문자가편리하고 HTML 코드및텍스트인경우에도소문자를사용하는것이에러를줄이는방법이기도합니다. 또한 HTML 문서내부에있는영문이소문자이면 CSS에서 text-transform 속성을이용하여대문자또는단어의첫글자만대문자로변환가능하기때문입니다. 이제화면중앙에있는 Notice와 News 부분을처리하도록하겠습니다. 이부분은 tab 메뉴처리가되어있는데, 가장많이사용하는효과중하나입니다. 이부분또한 jquery를이용해서처리하도록하겠습니다. jquery 소스는 htmldrive.net/items/show/542/simple-tabs-w-css-jquery에서참조합니다. 여기까지 HTML과 CSS를적용한결과는 [ 그림 14-23] 에서보실수있습니다. 하지만여기서조금이상한것이 Just Arrived 부분에는배경색상이제대로적용되지않고슬라이드이미지까지만적용된것을알수있습니다. 이부분은단순하게 <div class="clear"> 으로다시닫아주면문제가해결됩니다 ( 그림 우측그림참조 ). [ 그림 14-26] Simple Tabs w/ CSS & jquery 404 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 405

15 해당소스파일을다운로드하진마시고, 책에있는설명만보시면됩니다 (^^). 왜냐하면소스파일에는특별한소스가있는것이아니고 jquery 파일만있습니다. 먼저탭메뉴가들어가는부분은 #notinews라고정의한다고했습니다. 따라서 HTML 문서에는다음과같이설정합니다. <div id="notinews"> <!-- 탭부분전체를감싸는아이디선택자 --> <div class="container"> <ul class="tabs"> <!-- 탭부분제목 --> <li><a href="#tab1">notice</a></li> <li><a href="#tab2">news</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <!-- 각탭의내용 --> <ul> <li><a href="#"> 여기는공지사항이들어가는곳입니다.</a></li>... 중략... </ul> <div id="tab2" class="tab_content"> <!-- 각탭의내용 --> <ul> <li><a href="#"> 여기는뉴스가들어가는곳입니다.</a></li>... 중략... </ul> HTML 코드만으로는 [ 그림 14-27] 과같은결과를얻습니다. [ 그림 14-27] 단순한 HTML 구조로본 tab 메뉴 이제 Simple Tabs w/ CSS & jquery 에서제공되는 CSS 속성을적용해보겠습니다. 원본파일에서디자인적으로불필요한부분은실제코드에서는주석처리하겠으며, 책에서는주석처리및취소선으로표시하겠습니다. /*.container {width: 500px; margin: 10px auto;*/ /* 원본박스제거 */ #notinews { /* Notice 와 News 박스처리.container 대체함. */ width: 350px; /* 크기 350픽셀로고정 */ float:left; /* 왼쪽정렬 */ margin-left:80px; /* 왼쪽으로마진 80픽셀적용 */ ul.tabs { /* Notice 와 New 탭부분 ul 처리 */ margin: 0; padding: 0; float: left; list-style: none; height: 24px; /* 탭부분전체높이설정 - 다음페이지 < 여기서잠깐 > 참조 */ border-bottom: 1px solid #999; /* 제목부분밑줄적용 */ border-left: 1px solid #999; /* ul 부분왼쪽에만선적용 */ width: 100%; font-family: 'Droid Sans', sans-serif; ul.tabs li { float: left; margin: 0; padding: 0; /*height: 31px;*/ height:23px; /* 리스트에서는 1픽셀작은값적용 - 다음페이지 < 여기서잠깐 > 참조 */ /*line-height: 31px;*/ line-height: 21px; border: 1px solid #999; /* 전체선적용 */ border-left: none; /* ul에서선이적용되어여기서선을제거함 */ margin-bottom: -1px; /* 여기서 li 부분을 1픽셀끌어내림 - 다음페이지 < 여기서잠깐 > 참조 */ background: #F6F6F6; overflow: hidden; position: relative; ul.tabs li a { text-decoration: none; color: #000; display: block; padding: 0 20px; border: 1px solid #fff; outline: none; 406 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 407

16 ul.tabs li a:hover { background: #ccc; html ul.tabs li.active, html ul.tabs li.active a:hover { background: #fff; border-bottom: 1px solid #fff; /* active 상태일때밑줄흰색처리 */.tab_container { /*border: 1px solid #999; */ / * 원래는전체박스에선처리되어있음 */ border-top: none; / * 디자인을위해내용부분선제거 */ clear: both; float: left; width: 300px; background: #fff; /* -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;*/.tab_content { /* padding: 20px; font-size: 1.2em;*/ padding: 20px 10px; font-size: 1.1em; /*.tab_content h2 { font-weight: normal; padding-bottom: 10px; border-bottom: 1px dashed #ddd; font-size: 1.8em;.tab_content h3 a{ color: #254588;.tab_content img { float: left; margin: 0 20px 20px 0; border: 1px solid #ddd; padding: 5px; */.tab_container ul { list-style:none;.tab_container ul li { line-height:1.7em; background:url(imgs/bullet.gif) no-repeat left 10px; padding-left:10px; 여기서잠깐탭메뉴모양설정탭메뉴의높이는 ul.tabs에서 24픽셀로설정되어있고 ul.tabs li에서는 23픽셀로설정되어있으며, margin-bottom: -1px; 를이용최종적으로 24픽셀로세팅이되어있습니다. 왜이렇게처리하는가하면 ul.tabs에설정된 border-bottom: 1px solid #999; 속성과선의높이를맞추기위함입니다. 만약 ul.tabs와 ul.tabs li의높이를동일하기 24px로설정하고 marginbottom: -1px; 을적용하지않으면다음과같은현상이벌어집니다. 이런현상을방지하기위해 ul.tabs와 ul.tabs li의높이를 1픽셀정도의차이를준후 margin-bottom: -1px 이용높이를맞춰주는것입니다. 탭과 border-bottom 높이가일치하지않음 ul.tabs에는 height: 24px; ul.tabs li에는 height:24px; 적용시모습 ul.tabs에는 height: 24px; ul.tabs li에는 height:23px; 와 margin-bottom: -1px; 적용후 [ 그림 14-28] 탭메뉴모양설정을위한 CSS 속성현재 CSS만설정한상태에서는다음과같은결과를얻을수있습니다. [ 그림 14-29] jquery 적용전 HTML과 CSS만설정해준상태 408 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 409

17 여기서 jquery 를이용하여첫부분즉 Notice 는보여주고 News 부분은감춘상태로 그리고 tab 을클릭하면해당탭이활성화되는코드를입력하겠습니다. 현재 HTML 문서맨마지막부분에다음의코드를입력합니다. $(document).ready(function() { // 문서준비단계 //Default Action $(".tab_content").hide(); // 콘텐츠전부감춤 $("ul.tabs li:first").addclass("active").show(); // 첫번째탭활성화 $(".tab_content:first").show(); // 첫번째탭보여줌 $("ul.tabs li").click(function() { // 해당탭을클릭했을때이벤트 $("ul.tabs li").removeclass("active"); // 클래스선택자 active 제거 $(this).addclass("active"); // 선택한탭에 "active" 클래스선택자추가 $(".tab_content").hide(); // 모든탭콘텐츠감춤 var activetab = $(this).find("a").attr("href"); // 변수 activetab에는 active 탭과컨텐츠부분을식별하는값적용 $(activetab).fadein(); // 탭클릭시 activetab( 활성탭과내용부분 ) 페이드인효과 return false; ); ); <div id="social"> <h3>social network</h3> <ul> <li><a href="#"><img src="imgs/icon1.png" alt="facebook"></a></li> <li><a href="#"><img src="imgs/icon2.png" alt="twitter"></a></li>... 중략... </ul> HTML 문서로만구성된상태에서는다음과같은결과를얻을수있습니다. 이렇게 jquery 를적용해주면 [ 그림 14-30] 의결과를얻을수있습니다. [ 그림 14-31] 리스트태그만적용했을경우 Social Network 부분 이제여기에 CSS 를적용하도록하겠습니다. [ 그림 14-30] 완성된 tab 메뉴 _ 이제 social network 부분에대한작업을진행해보겠습니다. 이부분은제목을제외하고는이미지파일로처리되어있습니다. 여기는사이트의로고및메인메뉴와는달리실제아이콘을삽입하는것이좋습니다. 이부분은 #social이라는아이디선택자를이용해서박스모델을구성하겠습니다. 또한모든아이콘들을리스트태그를이용해서정렬하도록하겠습니다. HTML 태그구성은다음과같습니다. #social { float:right; /* 박스를오른쪽정렬합니다. */ margin:0 30px 0 0; /* 박스오른쪽여백을설정합니다. */ width: 180px; /* social 박스의크기를정해줍니다. 박스의크기를정해주면왼쪽으로 float된아이콘들이박스크기에맞게정렬됩니다. */ #social h3 { /* social 제목설정부분 */ padding:0 0 15px 0; font-family: 'Droid Sans', sans-serif; font-weight:normal; font-size:1.1em; text-transform:capitalize; #social ul {list-style:none; /* 리스트스타일제거 */ #social ul li {float:left;margin:5px; /* li float 적용하여좌우로배치, 각 li 별마진은 5픽셀적용 */ 410 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 411

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

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

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

PowerPoint 프레젠테이션

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

More information

PowerPoint Presentation

PowerPoint Presentation 웹과인터넷활용및실습 (Web & Internet) Suan Lee - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 1 04. CSS3 스타일속성 04. CSS3 Style Properties - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 2 CSS3 단위 1 CSS 는각각의스타일속성에다양한값을입력

More information

PowerPoint 프레젠테이션

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

More information

e-비즈니스 전략 수립

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

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

html5_04.indd

html5_04.indd 4 장쇼핑몰사이트제작 에서는 HTML5와 CSS3를이용하여쇼핑몰사이트를제작해보겠습니다. 2장과 3장에서는 @font-face의활용을높이기위해영문으로사이트를제작했습니다. 하지만 에서는한글로된사이트를제작할예정입니다. 영문폰트를무료로제공하는사이트는많이존재하지만, 한글폰트는대부분상용입니다. 따라서함부로폰트를웹용으로변환하여사용하는것은저작권에위배될수도있습니다. 다행히요즘에는네이버같은포털사이트에서무료로폰트를배포하고있으며,

More information

Front-Side 웹개발의이해 (CSS Basic) 1. CSS 란?

Front-Side 웹개발의이해 (CSS Basic) 1. CSS 란? CSS Basic 과정소개 과정목표 : CSS 의기본개념이해 1. CSS 란? 2. CSS 선택자 3. CSS 속성 1 Front-Side 웹개발의이해 (CSS Basic) 1. CSS 란? 1. CSS 란? - 스타일선언이위에서아래로순차적으로적용이되고, 마지막에선언된스타일이우선순위갖음 - 마크업언어 (HTML/XHTML) 가실제화면에표시되는방법을기술하는언어

More information

PowerPoint 프레젠테이션

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

More information

Javascript

Javascript 1. HTML 이란? HTML 은 Hyper Text Mark Up Language 의약자로예약되어있는각종태그라는명령어를이용하여웹페이지를작성할때사용하는언어입니다. 2. 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

PowerPoint 프레젠테이션

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

More information

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

Overall Process

Overall Process CSS ( ) Overall Process Overall Process (Contents : Story Board or Design Source) (Structure : extensible HyperText Markup Language) (Style : Cascade Style Sheet) (Script : Document Object Model) (Contents

More information

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

ePapyrus PDF Document

ePapyrus PDF Document 처음부터다시배우는 HTML5&CSS3: 실전웹표준사이트제작까지 3 부 실전웹표준사이트구축 에서는 1부와 2부에서배운내용을기반으로실제웹사이트를만드는방법을소개합니다. 기존책들과다르게실무에서사용하는방법을바탕으로한실제웹사이트제작기법을단계별로학습해볼수있습니다. 특히디렉토리나하부사이트구조는어떻게구성하는지, 실제웹페이지가만들어지는방법이그대로나오기때문에, 에서배운내용은향후실제웹사이트를만들때많은도움을받을수있습니다.

More information

C스토어 사용자 매뉴얼

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

More information

Week8-Extra

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

More information

Lab1

Lab1 Lab 1: HTML CSS 2015 Fall human-computer interaction + design lab. Joonhwan Lee HTML Web Server (World Wide Web: WWW)? (., FTP ). web 3 웹 구조의 이해 웹페이지 웹페이지는 HTML 이라는 언어로 만들어진 일종의 프로그램 웹페이지는 텍스트, 이미지, 동영상,

More information

1809_2018-BESPINGLOBAL_Design Guidelines_out

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

More information

PowerPoint Presentation

PowerPoint Presentation WordPress 를이용한웹사이트만들기 2015 년 한지웅 WordPress 를이용한웹사이트만들기 Day 1 Day 2 Day 3 Day 4 Day 5 1. 웹사이트제작기초 HTLM 기본 CSS 기본 WordPress 개론 ( 웹사이트구축툴 ) 2. 웹호스팅 / 웹사이트구축 웹호스팅업체선택 cpanel 설정 WordPress 설치 3. WordPress 기초활용

More information

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

쉽게 풀어쓴 C 프로그래밍

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

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 프로그래밍

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

More information

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

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

More information

예스폼 프리미엄 템플릿

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

More information

ISP and CodeVisionAVR C Compiler.hwp

ISP and CodeVisionAVR C Compiler.hwp USBISP V3.0 & P-AVRISP V1.0 with CodeVisionAVR C Compiler http://www.avrmall.com/ November 12, 2007 Copyright (c) 2003-2008 All Rights Reserved. USBISP V3.0 & P-AVRISP V1.0 with CodeVisionAVR C Compiler

More information

WEB HTML CSS Overview

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

More information

미쓰리 파워포인트

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

More information

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

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

More information

6. 설치가시작되는동안 USB 드라이버가자동으로로드됩니다. USB 드라이버가성공적으로로드되면 Setup is starting( 설치가시작되는중 )... 화면이표시됩니다. 7. 화면지침에따라 Windows 7 설치를완료합니다. 방법 2: 수정된 Windows 7 ISO

6. 설치가시작되는동안 USB 드라이버가자동으로로드됩니다. USB 드라이버가성공적으로로드되면 Setup is starting( 설치가시작되는중 )... 화면이표시됩니다. 7. 화면지침에따라 Windows 7 설치를완료합니다. 방법 2: 수정된 Windows 7 ISO Windows 7 설치및 PCIE RAID 설정정보 DK173 초판 11월 2016 A. Windows 7 및 USB 드라이버설치 칩셋사양에따라 Windows 7 설치중에 USB 키보드 / 마우스를사용하려면시스템에서 USB 드라이버를사전로드해야합니다. 이절에서는 USB 드라이버사전로드방법과 Windows 7 설치방법에대해서설명합니다. 방법 1: SATA ODD

More information

MF5900 Series MF Driver Installation Guide

MF5900 Series MF Driver Installation Guide 한국어 MF 드라이버설치설명서 사용자소프트웨어 CD-ROM................................................ 1.................................................................... 1..............................................................................

More information

Ext JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF

Ext JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF CHAPTER 2 (interaction) Ext JS., HTML, onready, MessageBox get.. Ext JS HTML CSS Ext JS.1. Ext JS. Ext.Msg: : Ext Ext.get: DOM 22 CHAPTER 2 (config). Ext JS.... var test = new TestFunction( 'three', 'fixed',

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

슬라이드 1

슬라이드 1 웹프로그래밍 HTML, 자바스크립트, ASP 를중심으로 제 3 장고급 HTML 작성 목차 제 3 장고급 HTML 작성 2.1 기본태그 2.2 LINK 태그 2.3 Image 2.4 TABLE 2.5 FRAME 2.6 INPUT 양식 2 3 장고급 HTML 작성 멀티미디어파일다루기 스타일시트 레이어 3 3.1 멀티미디어 최근인터넷사용자가급증하면서기업 / 개인용홈페이지가급증하였고다양한홈페이지를만들기위해많은기술들이생겨나고있음

More information

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

SK Telecom Platform NATE

SK Telecom Platform NATE SK Telecom Platform NATE SK TELECOM NATE Browser VER 2.6 This Document is copyrighted by SK Telecom and may not be reproduced without permission SK Building, SeRinDong-99, JoongRoGu, 110-110, Seoul, Korea

More information

PowerPoint Template

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

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

Studuino소프트웨어 설치

Studuino소프트웨어 설치 Studuino 프로그래밍환경 Studuino 소프트웨어설치 본자료는 Studuino 프로그래밍환경설치안내서입니다. Studuino 프로그래밍 환경의갱신에따라추가 / 수정될수있습니다. 목차 1. 소개... 1 2. Windows... 2 2.1. 프로그래밍환경설치... 2 2.1.1. 웹설치버전설치방법... 2 2.2. Studuino 프로그래밍환경실행...

More information

System Recovery 사용자 매뉴얼

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

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

슬라이드 1

슬라이드 1 Index 1. 광고상품요약 2. 공통가이드 3. 상품별제작시주의사항 4. 플래시배너액션가이드 5. DM제작가이드 6. 모바일광고제작가이드 7. Contact Us 1. 광고상품요약 상품명사이즈용량 CPM( 원 ) A.CTR 특이사항태그가능여부 CF 480*270 15 초이내 10,000 CTR 1.6% 동영상 wmv 파일 X I-Cover 1000*630

More information

Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드]

Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드] Web Technology Stack HTML, CSS, JS Basics HTML Tutorial https://www.w3schools.com/html/default.asp CSS Tutorial https://www.w3schools.com/css/default.asp JS Tutorial 524730-1 2019 년봄학기 3/11/2019 박경신 https://www.w3schools.com/html/default.asp

More information

NTD36HD Manual

NTD36HD Manual Upnp 사용 D7 은 UPNP 를지원하여 D7 의네크워크에연결된 UPNP 기기에별다른설정없이연결하여, 유무선으로네트워크상의연결된 UPNP 기기의콘텐츠를재생할수있습니다. TV 화면의 브라우저, UPNP 를선택하면연결가능한 UPNP 기기가표시됩니다. 주의 - UPNP 기능사용시연결된 UPNP 기기의성능에따라서재생되지않는콘텐츠가있을수있습니다. NFS 사용 D7

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 5. CSS 박스모델과응용 박스모델 HTML 요소들을박스 ( 사각형 ) 형태로그리는것 박스는배치, 색상, 경계등의속성을가진다. 박스모델의속성 배경색과배경이미지 HTML 요소에배경색과배경이미지가설정되어있는경우에, 패딩은투명하므로배경이미지와배경색이보이게된다 ( 그림출처 : Jon Hicks) 경계선스타일

More information

View Licenses and Services (customer)

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

More information

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

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

More information

SBR-100S User Manual

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

More information

SIGIL 완벽입문

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

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

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. 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 Word - src.doc

Microsoft Word - src.doc IPTV 서비스탐색및콘텐츠가이드 RI 시스템운용매뉴얼 목차 1. 서버설정방법... 5 1.1. 서비스탐색서버설정... 5 1.2. 컨텐츠가이드서버설정... 6 2. 서버운용방법... 7 2.1. 서비스탐색서버운용... 7 2.1.1. 서비스가이드서버실행... 7 2.1.2. 서비스가이드정보확인... 8 2.1.3. 서비스가이드정보추가... 9 2.1.4. 서비스가이드정보삭제...

More information

윈도 모바일 6.1을 OS로 사용하는 스마트폰(옴니아2 등)에서의 Tcl/Tk의 사용

윈도 모바일 6.1을 OS로 사용하는 스마트폰(옴니아2 등)에서의 Tcl/Tk의 사용 일, 12/27/2009-18:11 bonkora 첨부 파일 1.png [1] 2.png [2] 3.png [3] 4.png [4] 5.png [5] 6.png [6] 7.png [7] 8.png [8] 9.png [9] 10.png [10] 11.png [11] study4etcl.zip [12] 파일 크기 11.91 KB 19.69 KB 21.67 KB

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

로거 자료실

로거 자료실 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

목차 윈도우드라이버 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

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

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

More information

사용설명서를 읽기 전에 ios용 아이디스 모바일은 네트워크 연결을 통해 ios 플랫폼 기반의 모바일 기기(iOS 버전 6.0 이상의 ipod Touch, iphone 또는 ipad)에서 장치(DVR, 네트워크 비디오 서버 및 네트워크 카메라)에 접속하여 원격으로 영상을

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

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

Microsoft PowerPoint - web-part02-ch15-문서객체조작.pptx

Microsoft PowerPoint - web-part02-ch15-문서객체조작.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part2. jquery Ch15. 문서객체조작 2014년 1학기 Professor Seung-Hoon Choi 15 문서객체조작 문서객체조작 자바스크립트만으로문서객체모델을다루려면복잡함 jquery를이용하면쉽게다룰수있다. 이책에서가장중요한부분 15.1 문서객체의클래스속성추가

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

JAVA 플랫폼 개발 환경 구축 및 활용

JAVA 플랫폼 개발 환경 구축 및 활용 페이지 1 / 9 작성일 : 2011/7/30 JDK Download Eclipse IDE 구축및홗용 For Java JDK Download JDK Setting the Path Eclipse Download Eclipse Font Setting Eclipse API Setting > 1. http://www.oracle.com/index.html

More information

<4D F736F F F696E74202D C61645FB3EDB8AEC7D5BCBA20B9D720C5F8BBE7BFEBB9FD2E BC8A3C8AF20B8F0B5E55D>

<4D F736F F F696E74202D C61645FB3EDB8AEC7D5BCBA20B9D720C5F8BBE7BFEBB9FD2E BC8A3C8AF20B8F0B5E55D> VHDL 프로그래밍 D. 논리합성및 Xilinx ISE 툴사용법 학습목표 Xilinx ISE Tool 을이용하여 Xilinx 사에서지원하는해당 FPGA Board 에맞는논리합성과정을숙지 논리합성이가능한코드와그렇지않은코드를구분 Xilinx Block Memory Generator를이용한 RAM/ ROM 생성하는과정을숙지 2/31 Content Xilinx ISE

More information

Ÿ column-rule 속성은단사이의구분선을표현하기위한속성으로 column-rule-color, column-rule-style, column-rule-width 속성을한번에지정할수있다. 1.4 단의확장 Ÿ column-span 속성은다단을구성할때해당요소가얼마나많은단

Ÿ column-rule 속성은단사이의구분선을표현하기위한속성으로 column-rule-color, column-rule-style, column-rule-width 속성을한번에지정할수있다. 1.4 단의확장 Ÿ column-span 속성은다단을구성할때해당요소가얼마나많은단 1. 다단레이아웃 1.1 다단문서의개수및폭지정 Ÿ column-count 속성은다단을구성할때단의개수를지정하는속성이다. Ÿ column-width 속성은단의폭을지정하는속성이다. Ÿ column-width와 column-count 속성은동시에 auto 속성으로지정할수없다. Ÿ columns 속성은단의개수와폭을한번에지정하기속성이다. Ÿ 다단관련속성의사용은벤더프리픽스가필요하다.

More information

PowerPoint 프레젠테이션

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

More information

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

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

More information

Lab10

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

More information

Endpoint Protector - Active Directory Deployment Guide

Endpoint Protector - Active Directory Deployment Guide Version 1.0.0.1 Active Directory 배포가이드 I Endpoint Protector Active Directory Deployment Guide 목차 1. 소개...1 2. WMI 필터생성... 2 3. EPP 배포 GPO 생성... 9 4. 각각의 GPO 에해당하는 WMI 연결... 12 5.OU 에 GPO 연결... 14 6. 중요공지사항

More information

JDK이클립스

JDK이클립스 JDK 와이클립스설치 A. JDK 다운로드, 설치및환경설정 지금부터 JDK를다운로드받아설치하고 JDK를윈도우에서활용할수있도록환경을설정하는전과정을소개한다. 다운로드 www.oracle.com 사이트에접속하여 Downloads 메뉴를선택한후 [ 그림 1] 과같이 "Java for Developers" 를클릭한다. [ 그림 1] www.oracle.com 사이트

More information

PowerPoint 프레젠테이션

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

More information

Office 365 사용자 가이드

Office 365 사용자 가이드 [ 여기에입력 ] Office 365 사용자가이드 OFFICE 365 모바일설정 목차 1. 모바일에메일계정추가하기... 2 2. Lync 2013 App 설치하기... 7 3. Office Mobile App 설치하기... 10 4. Office for ipad 설치하기... 16-1 - 모바일기기에 Office 365 를설정해보세요. 모바일기기에 Office

More information

MF3010 MF Driver Installation Guide

MF3010 MF Driver Installation Guide 한국어 MF 드라이버설치설명서 사용자소프트웨어 CD-ROM................................................ 1.................................................................... 1..............................................................................

More information

HTML5

HTML5 행맨 류관희 충북대학교 2 3 4 5 사전준비 단어목록읽기 단어빈칸보여주기 인터페이스를통해알파벳선택하면알파벳사라지기 단어에선택한알파벳이있으면표시하기 없으면선이나타원으로사람형태그리기 게임종료조건 : 모든맞추는경우 모두틀린경우 ( 행맨 ) 6 단어목록배열에저장 words.js var words = [ "muon", "blight","kerfuffle","qat"

More information

PowerPoint Presentation

PowerPoint Presentation 객체지향프로그래밍 클래스, 객체, 메소드 ( 실습 ) 손시운 ssw5176@kangwon.ac.kr 예제 1. 필드만있는클래스 텔레비젼 2 예제 1. 필드만있는클래스 3 예제 2. 여러개의객체생성하기 4 5 예제 3. 메소드가추가된클래스 public class Television { int channel; // 채널번호 int volume; // 볼륨 boolean

More information

*2008년1월호진짜

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

More information

Microsoft Outlook G Suite 가이드

Microsoft Outlook G Suite 가이드 UNICONVERSE Microsoft Outlook G Suite 가이드 G Suite 사용자가이드 - 국민대학교 유니컨버스 2017-01-01 2 Microsoft Outlook G Suite 가이드 내용 Microsoft Outlook 2016 에서 IMAP 설정... 3 Microsoft Outlook 2016 에서 POP 설정... 6 Google

More information

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher( 실행할페이지.jsp); 다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp"); dispatcher.forward(request, response); - 위의예에서와같이 RequestDispatcher

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 : 준비학습 2: 학습내용 11장. 12장. 이미지, 목록, 하이퍼링크스타일 13장. 테두리, 폼양식관련스타일과레이어 14장. 필터효과와 활용하기 : 11 장. 학습내용 개요와삽입법 선택자 글꼴 / 문단관련스타일 개요 Cascading Style Sheets 의약자 계단형스타일시트 라고한다. 의표준화작업과신기술및팁을제공하는 W3C 에서 1996 년 레벨 1

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

9. 동영상 Streaming 을위한 활용가이드

9. 동영상 Streaming 을위한 활용가이드 9. 동영상 Streaming 을위한 활용가이드 9. 동영상 Streaming 을위한활용가이드 1. Web Station 을이용한동영상스트리밍활용가이드 * Synology Assistant 실행 ( 관리툴 ) 1. 관리툴실행후사용자가설치한서버를선택합니다. 서버선택시시스템이름, IP, 상태등을확인하고관리버튼을클릭합니다. 2. 시스템관리자 (admin) 선택후입력버튼클릭

More information

SH100_V1.4

SH100_V1.4 User Manual VLUU SH100 1 2 3 4 5 6 m m 7 8 9 10 11 12 13 15 16 17 x y 18 19 1 4 z x 20 2 o 5 o 6 3 7 10 11 21 8 12 o 9 o 22 1 m 2 3 2 1 3 23 24 o 25 1 2 o 1 2 3 26 1 2 1 2 27 1 28 2 1 3 29 2 4 30 1 m

More information

PowerPoint Presentation

PowerPoint Presentation Class - Property Jo, Heeseung 목차 section 1 클래스의일반구조 section 2 클래스선언 section 3 객체의생성 section 4 멤버변수 4-1 객체변수 4-2 클래스변수 4-3 종단 (final) 변수 4-4 멤버변수접근방법 section 5 멤버변수접근한정자 5-1 public 5-2 private 5-3 한정자없음

More information

<3035B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770>

<3035B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770> HTML/XML 인터넷보충학습자료 - 1 - - Cascading Style Sheets - HTML의단점을보완하기위해사용하는것으로, 웹문서에스타일 ( 예 ; 글꼴, 색상, 여백등 ) 을추가하는간단한메카니즘 1 다양한기능의확장 : HTML의단순한기능을확장 ( 추가, 변경 ) 시킴 2 통일된문서양식제공 : 한번의속성정의로여러문서에동시에적용가능 3 독립적인문서제작환경가능

More information

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

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

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

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

<4D F736F F F696E74202D C20C4C4C7BBC5CD20C8B0BFEB20B9D720C6C4C0CF20B0FCB8AE20BBF9C7C >

<4D F736F F F696E74202D C20C4C4C7BBC5CD20C8B0BFEB20B9D720C6C4C0CF20B0FCB8AE20BBF9C7C > Word Processing 1. 실라버스 2. 지침사항 3. 샘플문제풀이 Ⅱ. 컴퓨터활용및파일관리 - 실라버스 모듈 2 컴퓨터사용및파일관리에대한요약으로서, 이모듈에서이론과실제에대한기준을제공한다. 모듈 2 컴퓨터사용및파일관리는수험생에게개인용컴퓨터를실행하고관리하는능력을입증할것을요구한다. 수험생은다음을할수있어야한다. 메인컴퓨터설정값의조정및내장도움말기능의사용을포함하여운영체제의주요특성을사용한다.

More information

B2B 매뉴얼

B2B 매뉴얼 오디오북 모바일앱 사용자 매뉴얼 (안드로이드) 오디언 도서관 안드로이드용 - 오디오북 모바일앱은 안드로이드 OS 버전 2.1 이상을 지원합니다. (대표 기종 : 갤럭시 S, 갤럭시 S II, 갤럭시탭, 모토로이, 넥서스원 등) - OS 버전은 홖경설정(설정) > 휴대폰정보 > 펌웨어버전(Android 버전)에서 확인하실 수 있습니다.. - 하위 버전의 OS는

More information

HTML5

HTML5 퀴즈 류관희 게임규칙 동적으로 HTML 요소생성 생성된 HTML 요소의화면배치및위치옮기기 퀴즈게임 국가명과수도명의짝맞추기 배열 ( 국가명, 수도명 ) 짝모두맞추면 => 동영상플레이 2 퀴즈게임 3 4 5 6 주요특징 배열 : 국가명과수도명저장 피드백 : 색상변경, 동영상재생 플레이 20쌍중에 4 쌍무작위로선택 글자 : 국가명과수도명 => 그림으로대치 7 사전준비항목

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 10 장 jquery 라이브러리 1. jquery 라이브러리설정 2. 문서객체선택 3. 문서객체조작 4. 이벤트 5. 효과 HTML 페이지에 jquery 라이브러리를추가한다. jquery 라이브러리를사용해문서객체를조작할수있다. jquery 라이브러리를사용해문서객체에효과를부여한다. jquery 플러그인을활용한다. 기본예제 10-1 jquery 라이브러리설정하기

More information

ICAS CADWorx SPLM License 평가판설치가이드

ICAS CADWorx SPLM License 평가판설치가이드 ICAS CADWorx SPLM License 평가판설치가이드 CADWorx SPLM License 평가판설치가이드 설치권장사항 Operating System Compatibility ( 반드시 AutoCAD 가설치되어있어야합니다.) 추천시스템 3.0 GHz Intel Pentium IV or greater Windows XP Professional or later

More information

1. 무선 이미지 유틸리티 설명 1-1. 기능 이 Wireless Image Utility 는 안드로이드용 응용 프로그램입니다. 안드로이드 태블릿 또는 안드로이드 스마트폰에서 사용할 수 있습니다. 안드로이드 기기에 저장된 파일을 프로젝터로 무선 전송 컴퓨터에서 USB

1. 무선 이미지 유틸리티 설명 1-1. 기능 이 Wireless Image Utility 는 안드로이드용 응용 프로그램입니다. 안드로이드 태블릿 또는 안드로이드 스마트폰에서 사용할 수 있습니다. 안드로이드 기기에 저장된 파일을 프로젝터로 무선 전송 컴퓨터에서 USB 무선 이미지 유틸리티 버전 1.1 NEC 프로젝터용 안드로이드 응용 프로그램 무선 이미지 유틸리티 작동 설명서 NEC's Image 목차 1. 무선 이미지 유틸리티 설명...2 1-1. 기능...2 1-2. 작동 조건...5 1-3. 작동 순서...6 2. 안드로이드 기기에 Wireless Image Utility 설치...6 3. 안드로이드 기기에 투사할

More information

Cubase AI installation guide

Cubase AI installation guide Steinberg Cubase AI 프로그램 및라이선스설치가이드 (2018. 1. 31) Ver. 1.0.0 1 목차 1. 계정만들기 2. Download access code 등록및 Activation Code 발급 3. Steinberg Download Assistant 다운로드및설치 4. Cubase AI 다운로드및설치 5. 라이선스활성화 (Activation)

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

What Is CSS? Stands for Cascading Style Sheets. Is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Styles define h

What Is CSS? Stands for Cascading Style Sheets. Is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Styles define h What is CSS? Bok, Jong Soon jongsoon.bok@gmail.com www.javaexpert.co.kr What Is CSS? Stands for Cascading Style Sheets. Is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

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