PowerPoint 프레젠테이션
|
|
|
- 혜리 문
- 5 years ago
- Views:
Transcription
1 Lecture 02: HTML5 (1) Kwang-Man Ko compiler.sangji.ac.kr Department of Computer Engineering Sang Ji University
2 2 강의목표 1. 웹페이지를만드는기초적인 HTML 태그들을안다. 2. HTML5 기본문서만들수있다. 3. 웹페이지에이미지, 표, 하이퍼링크를삽입할수있다. 4. 인라인프레임을사용하여웹페이지에다른웹이지를내장할수있다. 페 5. 오디오비디오를웹페이지에삽입할수있다.
3 HTML 페이지기본 3 HTML5 페이지의기본구조 <!--이부분은주석문입니다. 웹브라우저는주석을화면에출력하지않습니다.--> <head> 문서제목, 자바스크립트코드, CSS 스타일정의, 메타데이터정의 </head> 문서의본문텍스트, 이미지, 테이블, 자바스크립트코드, 동영상등 HTML5 페이지의필수태그 - HTML5 문서임을알리는지시어, <head>, <title>, 태그
4 HTML 태그의특징 4 HTML 태그구성 시작태그와종료태그가모두있는경우..., <title> 문서의제목입니다 </title> 시작태그만있는경우 <br>
5 5 태그와속성은대소문자구분없음 <HTML>... <img Src="heart.jpg" width="100" height="50" alt=" 심장이미지 "> 속성값에불필요한공백문자, HTML5 표준에어긋남 <img Src="heart.jpg" width=" 100" height="50" alt=" 심장이미지 ">
6 예제 2-1 웹페이지타이틀달기 6 <head> <title> 첫타이틀 </title> </head> 페이지에타이틀을다는예제입니다. 타이틀은브라우저의타이틀바에보여집니다.
7 예제 2-2 <h1>,..., <h6> 태그로문단제목달기 7 <head> <title> 문단제목달기 </title> </head> <h1>1 장홈페이지만들기 </h1> <h2>1 절 HTML 언어 </h2> <h3>1. 웹 </h3> <h4>1.1 인터넷 </h4> <h5>1.1.1 네트워크 </h5> <h6> 통신 </h6>
8 예제 2 3 title 속성으로툴팁달기 8 <head><title> 툴팁달기 </title></head> <h1 title="h1 태그로작성하였습니다."> 1 장홈페이지 </h1> <h2 title="h2 태그로작성하였습니다."> 1 절 HTML 언어 </h2> 툴팁
9 예제 2 4 <p> 로단락나누기 9 <head><title> 단락나누기 </title></head> <h3>2 개의단락나누기 </h3> <p> HTML 문서도본문을여러단락으로나눌수있다. CSS 스타일을사용하면단락단위로내어쓰기와들여쓰기가가능하다.</p> <p> 여러개의빈칸은하나로취급되며, 엔터키역시하나의빈칸으로처리된다.</p> 헤딩 단락 단락
10 예제 2 5 <hr> 태그로수평선긋기 10 <head><title> 수평선긋기 </title></head> <h3> 수평선긋기 </h3> <hr> <p>hr 태그는 horizontal 에서딴글자입니다.</p> <hr> <p> 종료태그 </hr> 를사용하지않습니다.</p> 수평선 < 를출력하기위한엔터티표현
11 예제 2-6 <br> 태그로새로운줄로넘어가기 11 <head><title> 새로운줄넘어가기 </title></head> <h3> 새로운줄넘어가기 </h3> <hr> <br> 태그로다음줄로넘어갑니다.<br> 2 개의 <br> 태그로두번넘어갑니다.<br><br> 잘보이나요? <br> <br> <br>
12 문자, 기호, 심볼입력 12 HTML5 의문자 : 유니코드문자셋, UTF-8 코드체계 예약어, 키보드로입력이어려운기호들, 심볼 & 엔터티 ; 혹은 &# 코드값 ; < ----> < 혹은 < ----> 혹은 ----> 혹은
13 예제 2 7 특수문자, 기호, 심볼삽입 13 <head> <title> 문자, 기호, 심볼표현 </title> </head> <h3> 기호넣기 </h3> <hr> 10 2 = 5<br> 2 = 1.414<br> 2 < 3<br> 오늘 "Elvis" 노래를들었다. " 빈칸 3 개 ( 3 개 )
14 예제 2 8 <pre> 태그로개발자의포맷그대로출력 14 여러개의빈칸은하나로처리 <head><title> 개발자의포맷그대로출력 </title></head> <h3> 개발자의포맷그대로출력하기 </h3> <hr> <p> <Enter> <p> 태그를사용하면 <Enter> 여러개의빈칸은하나로, 여러줄은한줄에붙여출력됩니다.</p> <hr> <pre> 그러나 <pre> 태그를사용하면사용자가입력한그대로출력됩니다. </pre>
15 예제 2 9 텍스트꾸미기 15 <head><title> 텍스트꾸미기 </title></head> <h3> 텍스트꾸미기 </h3> <hr> <p> <b> 진하게 </b><br> <strong> 중요한 </strong><br> <em> 강조 </em><br> <i> 이탤릭으로강조 </i><br> <b><i> 진하게이탤릭으로강조 </i></b><br> 보통문자 <small> 한단계작은문자 </small><br> <del> 삭제 </del><br> <ins> 추가 </ins><br> 보통문자의 <sup> 윗첨자 </sup><br> 보통문자의 <sub> 아래첨자 </sub><br> <mark> 하이라이팅 </mark><br> </p>
16 블록태그와인라인태그 16 태그 : 블록태그와인라인태그로구분 블록태그사례 : <p>, <h1>, <div>, <ul> 인라인태그사례 : <strong>, <a>, <img>, <span> 블록태그 항상새라인에서시작하여출력 양옆에다른콘텐트를배치하지않고한라인독점사용 가장많이사용되는블록태그 : <div> 인라인태그 블록속에삽입되어블록의일부로출력 가장많이사용된인라인태그 : <span>
17 예제 2-10 <div> 블록과 <span> 인라인 17 <head><title><div> 블록과 <span> 인라인 </title></head> <h3> 사랑 </h3> <hr> 배경색을파란색으로꾸미는 CSS3 스타일 <div style="background-color:skyblue; padding:20px;"> 내가사람의방언과천사의말을할지라도 <span style="color:red"> 사랑 </span> 이없으면소리나는구리와울리는꽹과리가되고, <span style="color:red"> 사랑 </span> 이없으면아무것도아니라. </div> <p> ~ 우리서로사랑하며살아요 ~ </p> <div> <span>
18 메타데이터삽입 18 메타데이터 데이터를설명하는데이터 사진데이터의메타데이터 : 사진찍은장소, 시간 오디오데이터 : 재생시간, 채널수 이미지데이터 : 이미지의폭, 높이, 컬러해상도 HTML 페이지에대한메타데이터를담기위한태그들 <base>, <link>, <script>, <style>, <title>, <meta> 메타태그들은 <head> 태그안에작성 예 ) <head> <base href=" </head> <script> 는 내에도작성가능
19 <base> 태그 19 웹페이지들의기본URL과페이지가출력될윈도우지정 사용예 math.html이나 science.html 웹페이지가모두 에있는경우 <a href=" 수학 </a> <a href=" 과학 </a> 위의 HTML 소스를 <base> 태그를이용하여수정 <head> <base href=" </head> 수정가능 <a href="math.html"> 수학 </a> <a href="science.html"> 과학 </a>
20 <link> 태그와 <meta> 태그 20 <link> 태그는외부자원연결에사용 예 ) mystyle.css 에저장된스타일시트를불러오도록지시 <head> <link type="text/css" rel="stylesheet" href="mystyle.css"> </head> <meta> 태그는다양한메타데이터표현 웹페이지의저작자, 문자인코딩방식, 내용등 웹페이지의저작자가 황기태 임을표기하는사례 <meta name="author" content=" 황기태 "> 웹페이지의내용설명 <meta name="description" content=" 입학요령에대한자세한사항 "> 웹페이지의키워드 ( 검색엔진에의해검색되게하기위함 ) <meta name="keywords" content=" 컴퓨터, 소프트웨어, 스마트폰 "> charset 속성으로웹페이지에사용하는문자코드지정 <meta charset= UTF-8 >
21 이미지삽입 21 <img> 태그의 src 속성에이미지파일의주소지정 src에지정할수있는이미지종류 BMP, GIF, PNG, JPG(JPEG), animated-gif
22 예제 2-11 <img> 태그로이미지삽입 22 <head><title> 이미지삽입 </title></head> <h3> 이미지삽입 </h3> <hr> <p> 엘비스프레슬리의사진입니다.</p> 150x200 픽셀크기로출력 <img src="media/elvis1.jpg" width="150" height="200" alt="elvis"> <img src="media/kitae.jpg" width="80" height="100" alt=" 황기태사진없음 "> <img src=" alt= 사진주소변경됨 " width="100" height="100"> 현재이미지파일의경로명은 media/kitae.jpg 로상대경로명을사용하고있다. 이미지는 HTML 파일이있는경로아래 media 폴더를만들고그곳에두면된다. 사진이없는경우 alt 에지정된텍스트출력 네이버사이트의주소로연결한이미지
23 리스트만들기 23 3 가지종류의리스트 순서있는리스트 (ordered list) - <ol></ol> 순서없는리스트 (unordered list) - <ul></ul> 정의리스트 (definition list) - <dl></dl> 리스트아이템 <li> </li> </li> 생략가능
24 24
25 예제 2-12 <ol> 로라면끓이는순서나열 25 <head> <title> 라면을끓이는순서 </title> </head> <h3> 라면을끓이는순서 </h3> <hr> <ol type="a" > <li> 물을끓인다.</li> <li> 라면과스프를넣는다.</li> <li> 파를썰어넣는다.</li> <li>5 분후먹는다.</li> </ol> 마커
26 예제 2-13 <ul> 로좋아하는음식나열 26 <head> <title> 내가좋아하는음식 </title> </head> <h3> 내가좋아하는음식 </h3> <hr> <ul> <li> 감자탕 </li> 생략가능 <li> 스파게티 <li> 올레국수 </ul> 마커
27 예제 2-14 중첩리스트만들기 27 <head> <title> 중첩리스트만들기 </title></head> <h3> 내가사는이유 </h3> <hr> <ul> <li> 내가좋아하는음식많아요 <ul> <li> 감자탕 <li> 스파게티 <li> 올레국수 </ul> <li> 라면먹기좋아해요 <ol type="1" > <li> 물을끓인다. <li> 라면과스프를넣는다. <li> 파를썰어넣는다. <li> 한입에다먹는다. </ol> <li> 여름에는바다로 <li> 가을에는산으로 </ul>
28 예제 2-15 정의리스트만들기 28 <head><title> 정의리스트 </title></head> <h3> 웹브라우저종류 </h3> <hr> <dl> 용어 <dt><strong>internet Explorer</strong> <dd> 마이크로소프트에서만든브라우저로현재국내시장에서가장많이사용 <dt><strong>firefox</strong> <dd>mozilla 재단에서오픈소스로만든것으로 W3C 의웹표준을선도 <dt><strong>chrome</strong> <dd> 구글에서만든것으로좋은디버거를갖추고있어디버깅에많이사용 </dl> 설명 용어 설명
29 표만들기, <table> 29 표만드는데사용되는태그들 <table> : 표전체를담는컨테이너 <table></table> <caption> : 표제목 제목 <caption> <thead> : 헤딩셀그룹 헤더 <thead> <th> <tfoot> : 바닥셀그룹 <tbody> : 데이터셀그룹 바디 <tbody> <td> <tr> : 행. 여러 <td>, <th> 포함 <th> : 열제목 ( 헤딩 ) 셀 푸트 <tfoot> <tr> <td> : 데이터셀 <table> <caption> 표제목 </caption> <thead>... </thead> <tfoot>... </tfoot> <tbody>... </tbody> </table> <caption> 은 <table> 에 반드시첫번째로삽입
30 행과열만들기 30 표는여러행으로구성 행, <tr> </tr> 한행은여러셀로구성 제목 ( 헤딩 ) 셀, <th> 데이터셀, <td> <thead>, <tbody>, <tfoot> 은여러 <tr> 포함가능 <table> <thead> <tr><th> 이름 </th><th>html</th><th>css</th></tr> </thead> <tbody> <tr><td> 황기태 </td><td>80</td><td>70</td></tr> <tr>...</tr> </tbody> </table>
31 예제 2 16 기본표만들기 31 <head><title> 기본테이블만들기 </title></head> <h3> 기본구조를가진표 </h3> <hr> <table border="1"> 1 픽셀테두리. 5 장의 CSS3 로표현하는것이바람직함 <caption>1 학기성적 </caption> <thead> <tr><th> 이름 </th><th>html</th><th>css</th></tr> </thead> <tfoot> <tr><th> 합 </th><th>225</th><th>230</th></tr> </tfoot> <tbody> <tr><td> 황기태 </td><td>80</td><td>70</td></tr> <tr><td> 이재문 </td><td>95</td><td>99</td></tr> <tr><td> 이병은 </td><td>40</td><td>61</td></tr> </tbody> </table>
32 예제 2-17 이미지를가지는표만들기 32 <head><title> 표에이미지삽입 </title></head> <h3> 표에이미지삽입 </h3> <hr> <table> <caption> 좋아하는과일 </caption> <tbody> <tr> <td><img src="media/apple.jpg"></td> <td><img src="media/banana.jpg"></td> <td><img src="media/mango.jpg"></td> </tr> </tbody> </table> 디폴트굵기 (0) 로하여테두리제거. 굵기조절은 CSS3 로하는것이바람직 이미지들은 HTML 파일이있는경로아래 media 폴더를만들고그곳에두면된다.
33 하이퍼링크만들기, <a> 33 <a> 태그의 href 속성을이용하여하이퍼링크작성 하이퍼링크 (hyperlink) 란? 다른 HTML 페이지의연결고리 같은웹사이트의다른 HTML 페이지 다른웹사이트의 HTML 페이지모두연결가능 하이퍼링크는텍스트나이미지로작성 항해 하이퍼링크를따라다른웹페이지를방문하는것
34 하이퍼링크만들기 34 <a> 태그의 href 속성에하이퍼링크작성 같은웹사이트에있는웹페이지연결 <a href= picturepage.html > 클릭하면사진페이지로이동합니다.</a> 다른웹사이트의웹페이지연결 <a href= > 네이버 </a> <a href= > 사이트로그인 </a> 이미지하이퍼링크만들기 <a href= > <img src= naver.png alt= 네이버사이트 > </a>
35 하이퍼링크텍스트의색 35 하이퍼링크텍스트의색 링크텍스트 (standard link) 처음색 밑줄과함께 blue 방문후링크 (visited lnk) 색 purple 마우스로링크를누르고있는동안 (active link) red 링크색변경가능 CSS3 를이용하여링크색지정가능
36 36 예제 2 18 하이퍼링크만들기 <head><title> 링크만들기 </title></head> <h3> 링크만들기 </h3> <hr> 포털사이트 <ul> <li><a href=" 네이버 </a></li> <li><a href=" 다음 </a></li> </ul> 신문사이트 <ul> <li><a href=" <img src="media/iconetnews.png" alt=" 전자신문 "> </a> </li> <li><a href=" <img src="media/iconchosun.png" alt=" 조선일보 "> </a> </li> </ul> <hr> <a href="ex2-17.html"> 예제 2-17 로이동 </a> 현재사이트의다른페이지로이동하는링크 링크클릭
37 예제 2-19 링크의 target 속성활용 37 <head><title> 링크의 target 속성활용 </title></head> <h3> 링크의 target 속성활용 </h3> <hr> <ul> <li><a href=" target="_blank">w3c( 새윈도우, _blank)</a> <li><a href=" target="_self"> 전자신문 ( 현재윈도우, _self)</a> <li><a href=" target="_parent"> 네이버 ( 부모윈도우, _parent)</a> <li><a href=" target="_top"> 매일경제신문 ( 브라우저윈도우, _top)</a> </ul> 새탭에서열기
38 <a> 태그의 id 속성으로앵커만들기 38 앵커? HTML 페이지내의특정위치 <a id= 앵커이름 > 으로앵커생성 <a id="chap1">1 장서론 </a> chap1 앵커 <a href= #chap1 > 서론으로가기 </a> 클릭하면 chap1 앵커위치로이동시키는하이퍼링크
39 동일페이지내앵커와링크사례 링크 <a href="#intro">1 Introduction</a> 앵커 <h3 id="intro">1 Introduction</h3> 39
40 40 예제 2 20 앵커로이동하는링크만들기 앵커 <head><title> 링크만들기 </title></head> <h3>elvis Presley</h3> <hr> <ul> 링크 <li><a href="#love">love me tender</a> <li><a href="#can">can't help falling in love</a> <li><a href="#it">it's now or never</a> </ul> <h3 id="love">love me tender</h3> Love me tender, Love me sweet, Never let me go.<br> You have made my life complete, <br> And I love you so.<br> Love me tender, Love me true, <br> All my dreams fulfilled.<br> For my darling I love you, And I always will.<br> <h3 id="can">can't help falling in love</h3> Love me tender, Love me sweet, Never let me go.<br> You have made my life complete, And I love you so.<br> Love me tender, Love me true, All my dreams fulfilled.<br> For my darling I love you, And I always will.<br> <h3 id="it">it''s now or never</h3> It's now or never, Come hold me tight<br> Kiss me my darling, Be mine tonight<br> Tomorrow will be too late,<br> It's now or never. My love won't wait.<br> 앵커위치로이동
41 예제 2-21 파일다운로드링크만들기 41 <head><title> 파일다운로드 </title></head> <h3> 친구들아! 여기서다운받아!</h3> <hr> <ul> <li><a href="media/elvis.png" download> 엘비스이미지다운로드 </a> <li><a href="media/chapter9.pdf" download>chapter9.pdf 다운로드 </a> <li><a href="media/embraceableyou.mp3" download>mp3 다운로드 </a> <li><a href="ex2-09.html" download> 예제 2-9 HTML 파일다운로드 </a> <li><a href="media/test.hwp" download> 한글파일다운로드 </a> </ul> 링크클릭시이미지파일다운로드
42 인라인프레임 42 인라인프레임만들기, <iframe> HTML 페이지내에 HTML 페이지삽입 예 ) 200x150 크기의인라인프레임에 iframe.html 출력 <iframe src="iframe1.html" width="200" height="150"> 브라우저는 iframe 태그를지원하지않습니다. </iframe>
43 예제 개의인라인프레임을가진웹페이지 43 ex2-22.html <head><title>iframe 을가지는웹페이지 </title> </head> <h3>2 개의 <iframe> 을가집니다.</h3> <hr> <iframe src="iframe1.html" width="200" height="150"> </iframe> <iframe src="iframe2.html" width="200" height="100"> </iframe> iframe1.html <head><title> 첫번째 iframe</title></head> <h4> 첫번째 iframe</h4> iframe2.html <head><title> 두번째 iframe</title></head> <h4> 두번째 iframe</h4>
44 인라인프레임에출력할문서를 srcdoc 속성으로만들기 44 <head><title>srcdoc 속성활용 </title></head> <h3>srcdoc 에 HTML 문서작성 </h3> <hr> <iframe src="iframe1.html" width="200" height="80" srcdoc="<head></head> hello" ></iframe> srcdoc 속성이있으면 src 속성은무시됨
45 예제 2-23<iframe> 으로 2 개의신문사이트내장하기 45 <head><title>iframe 을이용한신문사이트 </title></head> <h3>2 개의신문사이트입니다.</h3> <hr> <iframe src=" width="300" height="300"></iframe> <iframe src=" width="300" height="300"></iframe> <iframe> <iframe>
46 브라우저윈도우와인라인프레임의계층관계 46 인라인프레임윈도우의이름 <iframe src="iframe1.html" name= left ></iframe> 브라우저윈도우와인라인프레임의계층관계 브라우저윈도우와프레임윈도우는부모자식관계 윈도우사이의계층관계를나타내는용어 parent 윈도우 - 부모윈도우 child 윈도우 - 부모윈도우 top 윈도우 - 최상위브라우저윈도우 다음슬라이드에서 left, right 프레임의 parent 윈도우 : 브라우저윈도우 upper, lower 프레임의 parent 윈도우 : right 윈도우 left, right, upper, lower 프레임의 top 윈도우 : 브라우저윈도우
47 fig2-04.html <head><title> 브라우저윈도우 (top)</title></head> <h3>2 개의 <iframe> 윈도우를가집니다 </h3> <hr> <iframe src="leftframe.html" name= "left" width="100" height="500"></iframe> <iframe src="rightframe.html" name= "right" width="400" height="500"></iframe> rightframe.html <head><title>right iframe</title></head> <h4>right iframe</h4> <hr> <iframe src=" name="upper" width="100%" height="200"></iframe> <iframe src=" name="lower" width="100%" height="200"></iframe> 브라우저 left right upper child 윈도우 left 윈도우 브라우저윈도우 child 윈도우 right 윈도우 parent 윈도우 top 윈도우 parent 윈도우 lower upper 윈도우 lower 윈도우 47
48 target 속성으로출력할윈도우지정 48 target 속성 <base>, <a>, <area>, <form> 태그에서 HTML 페이지를출력할윈도우지정 target 속성에사용가능한값 _blank - 새로운브라우저윈도우 ( 탭 ) 생성 _self - 현재윈도우 _parent - 부모윈도우 _top - 최상위브라우저윈도우 윈도우이름 - 대상윈도우이름
49 target 속성사용예 49 링크클릭시 frame1 이름의프레임에 출력 <iframe src=" name="frame1"></iframe>... <a href=" target="frame1">w3c</a> 링크클릭시새윈도우 ( 탭 ) 에 W3C 사이트출력 <a href=" target="_blank">w3c</a> 링크클릭시현재윈도우 ( 탭혹은프레임윈도우 ) 에 W3C 사이트출력 <a href=" target="_self">w3c</a> 링크를클릭하면부모윈도우에 W3C 사이트출력 <a href=" target="_parent">w3c</a> 링크클릭시모든프레임윈도우제거, 브라우저윈도우에 W3C 사이트출력 <a href=" target="_top">w3c</a>
50 50 예제 2-24 target 속성으로프레임윈도우활용 ex2-24.html <head><title>target 속성활용 </title></head> <h3>target 속성활용 </h3> <hr> <iframe src="ex-24-sitelist.html" name="left" width="200" height="300"> </iframe> <iframe src=" name="right" width="300" height="300"> </iframe> ex2-24-sitelist.html <head><title> 사이트리스트 </title></head> <h4> 사이트리스트 </h4> <ul> <li><a href=" target="right">w3c</a> <li><a href=" target="_self"> 전자신문 </a> <li><a href=" target="_top"> 매일경제신문 </a> <li><a href=" target="_blank"> 새창에 W3C</a> </ul> left 프레임 right 프레임
51 미디어삽입 51 HTML5에서웹페이지에미디어삽입의표준화 <audio>, <video> 태그 HTML5에서오디오비디오를삽입하는표준태그 플러그인필요없음 HTML5 표준브라우저는플러그인없이오디오비디오재생 비표준미디어재생시 비표준미디어 플래시등 <embed>, <object> 태그
52 <video> 태그 52 <video> 태그사례 예 ) 320x240 공간에, bear.mp4 재생. 자동시작. 제어버튼출력 <video src="bear.mp4" width="320" height="240" controls autoplay></video> 비디오소스별도지정방법 <video width="320" height="240" controls autoplay> <source src="bear.mp4" type="video/mp4"> 브라우저가 video 태그를지원하지않습니다. </video>
53 <video> 태그속성 53
54 54 예제 2-25 <video> 태그로비디오삽입 <head><title> 비디오삽입 </title></head> <h3> 비디오삽입 </h3> <hr> <video src="media/bear.mp4" width="320" height="240" controls autoplay> 브라우저가 video 태그를지원하지않습니다. </video> controls 속성에의해생긴콘트롤 240 픽셀 320 픽셀
55 <audio> 태그 55 <audio> 태그사례 mymusic.mp3 를자동으로재생시작하고, 제어버튼출력 <audio src="mymusic.mp3" controls autoplay loop></audio> 선택재생가능 mymusic.mp3를재생할수없으면, mymusic.ogg 선택 <audio controls autoplay> <source src="mymusic.mp3" type="audio/mpeg"> <source src="mymusic.ogg" type="audio/ogg"> 브라우저가 audio 태그를지원하지않습니다. </audio>
56 <audio> 태그 56
57 57 예제 2-26 <audio> 태그로오디오삽입 <head> <title> 오디오삽입 </title> </head> <h3> 오디오삽입 </h3> <hr> 페이지로드즉시음악이연주됩니다. <audio src="media/embraceableyou.mp3" controls autoplay loop> 브라우저가 audio 태그를지원하지않습니다. </audio> 모바일브라우저에서는보안의이유로 <audio> 태그의 autoplay 속성이작동하지않는다. 사용자가브라우저상에서재생콘트롤을터치해야작동한다.
미쓰리 파워포인트
computer & internet 07. FRAME TAG FRAME? 프레임이란? : 웹페이지를수직이나수평으로여러개영역으로나누어다른웹문서가들어갈수있도록구성할수있음. 이때나누어진각각의창을프레임이라고함. 2 FRAME 문서의구조 HTML 문서에서 태그기능을 프레임문서구조에서는 이대신함 일반웹페이지구조 ..
Javascript
1. HTML 이란? HTML 은 Hyper Text Mark Up Language 의약자로예약되어있는각종태그라는명령어를이용하여웹페이지를작성할때사용하는언어입니다. 2. HTML 의기본구조 < 태그 > 내용 < 태그속성 = 변수 > 내용
C스토어 사용자 매뉴얼
쪽지 APP 디자인적용가이드 I. 쪽지 APP 소개 2 I. 쪽지 APP 소개 쪽지 APP 을통해쇼핑몰의특정회원또는특정등급의회원그룹에게 알림메시지나마케팅을위한쪽지를발송하실수있습니다. 쪽지 APP의주요기능 1. 전체회원, 특정ID, 특정회원그룹별로쪽지발송가능 2. 발송예약기능 3. 발송한쪽지에대해수신및열람내역조회가능 4. 쇼핑몰페이지에서쪽지함과쪽지알림창제공 3
PowerPoint Presentation
WordPress 를이용한웹사이트만들기 2015 년 한지웅 WordPress 를이용한웹사이트만들기 Day 1 Day 2 Day 3 Day 4 Day 5 1. 웹사이트제작기초 HTLM 기본 CSS 기본 WordPress 개론 ( 웹사이트구축툴 ) 2. 웹호스팅 / 웹사이트구축 웹호스팅업체선택 cpanel 설정 WordPress 설치 3. WordPress 기초활용
PowerPoint 프레젠테이션
03 장 HTML5 기본태그 1. 글자태그 2. 목록태그 3. 테이블태그 4. 이미지태그 5. 공간분할태그 HTML5 에서지원하는기본태그를사용할수있다. 공간분할태그와시맨틱태그의용도를이해하고사용할수있다. 1. 글자태그 가장많은비중을차지하는태그 그림 3-1 글자태그중심의웹페이지 1.1 제목글자태그 제목글자태그 문서의제목을표현할때사용 h : Heading을의미 표
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
PowerPoint 프레젠테이션
05 장 CSS3 선택자 1. 선택자개요 2. 기본선택자 3. 속성선택자 4. 후손선택자와자손선택자 5. 반응 / 상태 / 구조선택자 CSS 블록을생성할수있다. 선택자를이해하고적절한선택자를활용할수있다. 1 선택자개요 CSS3 선택자 특정한 HTML 태그를선택할때사용하는기능 선택한태그에원하는스타일이나스크립트적용가능 그림 5-1 CSS 블록 CSS 블록 style
제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호
제이쿼리 () 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 CSS와마찬가지로, 문서에존재하는여러엘리먼트를접근할수있다. 엘리먼트접근방법 $( 엘리먼트 ) : 일반적인접근방법
2009년 상반기 사업계획
웹 (WWW) 쉽게배우는데이터통신과컴퓨터네트워크 학습목표 웹서비스를위한클라이언트 - 서버구조를살펴본다. 웹서비스를지원하는 APM(Apache, PHP, MySQL) 의연동방식을이해한다. HTML 이지원하는기본태그명령어와프레임구조를이해한다. HTTP 의요청 / 응답메시지의구조와동작원리를이해한다. CGI 의원리를이해하고 FORM 태그로사용자입력을처리하는방식을알아본다.
이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2
03 장. 테두리여백지정하는속성 이번장에서는테이블, 레이어, 폼양식등의더예쁘게꾸미기위해서 CSS 를이용하여 HTML 요소의테두리속성을바꾸어보자. 이장에서다룰내용 1 2 3 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 01. 테두리를제어하는스타일시트 속성값설명 border-width border-left-width
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
PowerPoint 프레젠테이션
How to produce table XHTML 임정희 M2community 1 Table of Contents 1. XHTML - XHTML 과 HTML 2. Table XHTML - Table의이해 - Table 링크연결 - Table 작성 2 15 th KCSE Editor s Workshop, Seoul 2015 XHTML XHTML 기존에사용되던 HTML
쉽게 풀어쓴 C 프로그래밍
CHAPTER 13. HTML5 위치정보와드래그앤드롭 SVG SVG(Scalable Vector Graphics) 는 XML- 기반의벡터이미지포맷 웹에서벡터 - 기반의그래픽을정의하는데사용 1999 년부터 W3C 에의하여표준 SVG 의장점 SVG 그래픽은확대되거나크기가변경되어도품질이손상되지않는다. SVG 파일에서모든요소와속성은애니메이션이가능하다. SVG 이미지는어떤텍스트에디터로도생성하고편집할수있다.
쉽게 풀어쓴 C 프로그래밍
CHAPTER 7. HTML 와 CSS 로웹사이트만들 기 웹사이트작성 웹사이트구축과정 내비게이션구조도 홈페이지레이아웃 헤더 web Shop 내비게이션메뉴
Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드]
![Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드]](/thumbs/99/139882462.jpg "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
PowerPoint 프레젠테이션
Html 은웹에서 text, images, movie 등다양한정보의요소를 담을수있는문서형식이다. 정보 (txt, imges) 전송 = 동일한어플리케이션 = 정보 (txt, imges) 정보 (txt, imges Movie, 동작 ) 정보 (txt, imges movie) 어플리케이션 웹브라우저 HTML5 는기존 HTML 에차별화된특징을가진 최신버전의웹표준언어.
Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx
과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part1. JavaScript / Ch10. 문서객체모델 2014년 1학기 Professor Seung-Hoon Choi 10 문서객체모델 문서객체모델 (Document Object Model, DOM) 웹브라우저가 HTML 페이지를인식하는방식 document
다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");
다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp"); dispatcher.forward(request, response); - 위의예에서와같이 RequestDispatcher
PowerPoint 프레젠테이션
명품웹프로그래밍 1 2 강의목표 1. CSS3로 HTML 태그가출력되는위치를조절할수있다. 2. CSS3로리스트를예쁘게꾸밀수있다. 3. CSS3로표를예쁘게꾸밀수있다. 4. CSS3로폼을꾸미고사용자의입력에반응하게할수있다. 5. CSS3로애니메이션, 전환 (transition), 변환 (transform) 효과를만들수있다. 배치 3 배치 CSS3 로 HTML 태그가출력되는위치지정
PowerPoint 프레젠테이션
HTML5 웹프로그래밍입문 2 장.HTML5 문서의기본 목차 2.1 기본문서만들기 2.2 단락과텍스트꾸미기 2.3 목록및표작성하기 2.4 문서구조화하기 소스코드실행사이트 주소 : http://webclass.me/html5_2e 폴더 ch02/ ~ ch13/ 에각장의예제가있어서실행결과확인및소스보기가가능합니다. 2 HTML5 문서의기본 2.1 기본문서만들기 2.1.1
PowerPoint 프레젠테이션
HTML5 웹프로그래밍입문 3 장. 링크와멀티미디어 1 목차 3.1 링크달기 3.2 이미지사용하기 3.3 오디오와비디오다루기 3.4 객체포함하기 2 3.1 링크달기 3.1.1 하이퍼텍스트와링크 3.1.2 문서간이동 3.1.3 문서내특정위치로이동 3 하이퍼텍스트 / 하이퍼미디어 HTML(HyperText Markup Language) 하이퍼텍스트의마크업언어 HTML
슬라이드 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 멀티미디어 최근인터넷사용자가급증하면서기업 / 개인용홈페이지가급증하였고다양한홈페이지를만들기위해많은기술들이생겨나고있음
네트워크 명령 실습
HTML 실습 Contents 1. WWW, HTTP, HTML 개요 2. HTML 기본구조 3. HTML 기본태그 1. 글자관련 2. 서식관련 3. 표관련 4. 하이퍼링크관련 5. 프레임관련 6. 멀티미디어관련 7. 배경등꾸미기관련 8. 아이템화관련 1. HTML 개요 1. HTML(Hyper Text Markup Language) A. 웹문서를표현하는기술
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 이라는 언어로 만들어진 일종의 프로그램 웹페이지는 텍스트, 이미지, 동영상,
네트워크 명령 실습
HTML 실습 Contents 1. HTML 개요 2. HTML 기본구조 3. HTML 기본태그 1. 글자관련 2. 서식관련 3. 표관련 4. 하이퍼링크관련 5. 프레임관련 6. 멀티미디어관련 7. 배경등꾸미기관련 8. 아이템화관련 3.4 하이퍼링크태그 1. 하이퍼링크란윈도우의도움말같은형태로문서안에특정문자열이나이미지를마우스로클릭했을때관련된다른문서, 그림, 음악,
e-비즈니스 전략 수립
CSS3 속성 HTML5 웹프로그래밍입문 ( 개정판 ) Contents 학습목표 CSS3가지원하는스타일속성과스타일값을활용할수있습니다. CSS3를사용해레이아웃을잡을수있습니다. 내용 CSS3 단위 박스속성 display 속성 배경속성 글자속성 위치속성 float 속성 그림자속성 그레이디언트 2/85 1. CSS3 단위 키워드단위 W3C에서미리정의한단어 키워드를입력하면키워드에해당하는스타일이자동으로적용
PowerPoint 프레젠테이션
HTML5 웹프로그래밍입문 5 장. 고급표현을위한 CSS3 활용 1 목차 5.1 박스모델설정하기 5.2 레이아웃설정하기 5.3 다양한효과설정하기 5.4 움직임설정하기 2 5.1 박스모델설정하기 5.1.1 영역설정을위한박스모델 5.1.2 박스모델유형의지정 3 영역설정을위한박스모델 배경영역 , , : 해당하는줄만큼배경 ,
PowerPoint 프레젠테이션
ONE page html 이란? 원페이지는최근의홈페이지제작트렌드로한페이지에상단에서하단으로의마우스스크롤링을통해서컨텐츠를보여주는스타일의홈페이지입니다. USER 의시선을분산시키지않고위쪽에서아래쪽으로마우스스크롤링을통해서홈페이지의컨텐츠를보여주게됩니다. 반응형으로제작되어스마트폰, 아이패드, 태블릿,PC, 노트북등다양한디바이스에서자동으로최적화됩니다. ONE page 웹사이트사례
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 는각각의스타일속성에다양한값을입력
AMP는 어떻게 빠른 성능을 내나.key
AMP는 어떻게 빠른 성능을 내나? AU개발 김태훈 kishu@navercorp.com AMP 란무엇인가? AMP 방식으로 HTML을 만들고 AMP JS를 로딩하고 AMP 컴포넌트만 사용하면 웹페이지의 빠른 렌더링을 보장 + 구글 검색 결과에서 즉시 로딩(빠르고 멋있게) AMPs are just Web Pages! AMPs are just Web Pages!
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',
Microsoft PowerPoint HTML.ppt
웹프로그래밍 () HTML () 2006 년봄학기 문양세강원대학교컴퓨터과학과 웹페이지제작단계및환경 주제와주제와내용선정 어떤어떤내용을내용을담을담을것인지것인지,, 어떤어떤단계로단계로제작할제작할것인지것인지결정결정 디자인디자인 웹페이지페이지구조구조 저작권저작권확인확인 로고로고, 아이콘, 아이콘또는또는멀티미디어멀티미디어등다양한다양한소재를소재를어떻게어떻게꾸밀꾸밀것인지것인지구성구성
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 취약점을 다른 취약점과 연계하여
SIGIL 완벽입문
누구나 만드는 전자책 SIGIL 을 이용해 전자책을 만들기 EPUB 전자책이 가지는 단점 EPUB이라는 포맷과 제일 많이 비교되는 포맷은 PDF라는 포맷 입니다. EPUB이 나오기 전까지 전 세계에서 가장 많이 사용되던 전자책 포맷이고, 아직도 많이 사 용되기 때문이기도 한며, 또한 PDF는 종이책 출력을 위해서도 사용되기 때문에 종이책 VS
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
Javascript
1. 이벤트와이벤트핸들러의이해 이벤트 (Event) 는웹브라우저에서발생하는다양한사건을말합니다. 예를들면, 버튼을마우스로을했다거나브라우저를닫았다거나 Enter 키를눌렀다거나등등아주다양한사건들이있습니다. 그렇다면이벤트핸들러 (Event Handler) 는무엇일까요? 이다양한이벤트들을핸들링 ( 처리 ) 해주는것입니다. 예를들면, 어떤버튼을했을때메시지창이뜨게하는등을말합니다.
웹의 뼈대 HTML의 이해 개요 및 텍스트 태그
HTML 의이해 - 개요및텍스트태그 최현종 ( 서원대학교 ) HTML 의개요 웹문서란무엇인가? 인터넷에올려진문서 HTML : 다양한멀티미디어요소까지다룰수있는인터넷표준웹문서 웹브라우저란무엇인가? 웹문서를보기위한프로그램 대표적인웹브라우저 - 인터넷익스플로러 - 넷스케이프내비게이터 - 오페라 그림 1. 인터넷익스플로러 HTML 의정의 - Hyper Text Markup
INDEX 들어가기 고민하기 HTML(TABLE/FORM) CSS JS
개발자에게넘겨주기편한 TABLE&FORM 마크업 김남용 INDEX 들어가기 고민하기 HTML(TABLE/FORM) CSS JS 들어가기 이제는 ~ 서로간의이슈웹표준 & 웹접근성왜웹표준으로해야할까요? 모든웹페이지는 ~ 퍼블리싱순서 이제는 ~ 디자이너 디자이너 퍼블리셔 Front-end (UI 개발자 ) 퍼블리셔 Front-end (UI 개발자 ) 서버개발자 서버개발자
PowerPoint 프레젠테이션
SECUINSIDE 2017 Bypassing Web Browser Security Policies DongHyun Kim (hackpupu) Security Researcher at i2sec Korea University Graduate School Agenda - Me? - Abstract - What is HTTP Secure Header? - What
지도상 유의점 m 학생들이 어려워하는 낱말이 있으므로 자세히 설명해주도록 한다. m 버튼을 무리하게 조작하면 고장이 날 위험이 있으므로 수업 시작 부분에서 주의를 준다. m 활동지를 보고 어려워하는 학생에게는 영상자료를 접속하도록 안내한다. 평가 평가 유형 자기 평가
수업주제 경찰 출동! (버튼, LED, 버저 사용하기) 9 / 12 차시 수업의 주제와 목표 본 수업에서는 이전 차시에 배웠던 블록들의 기능을 복합적으로 활용한다. 스위치 기능을 가진 버튼을 활용하여 LED와 버저를 동시에 작동시키도록 한다. 각 블록들을 함께 사용하는 프로젝트를 통해 각각의 기능을 익히고 보다 다양한 활용 방법을 구상할 수 있다. 교수 학습
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 을속성별로분리하고자할경우
쉽게 풀어쓴 C 프로그래밍
CHAPTER 11. 자바스크립트와캔버스로게임 만들기 캔버스 캔버스는 요소로생성 캔버스는 HTML 페이지상에서사각형태의영역 실제그림은자바스크립트를통하여코드로그려야한다. 컨텍스트객체 컨텍스트 (context) 객체 : 자바스크립트에서물감과붓의역할을한다. var canvas = document.getelementbyid("mycanvas"); var
예스폼 프리미엄 템플릿
HTML 과 CSS 를활용한개별디자인 D4 강사김준일 01. HTML, CSS 그리고메이크샵 1 2 쇼핑몰의구조와기능 이미지, 문구등내용을 담당하는언어 쇼핑몰 쇼핑몰이어떻게보여질지 표현 ( 디자인 ) 을담당하는언어 3 4 쇼핑몰의 UI 및배너등을 표현하며유효성검사등을 담당하는개발언어 쇼핑몰의핵심기능을담당하는 쇼핑몰프로그램으로 HTML,CSS,Javascript
PowerPoint Template
JavaScript 회원정보 입력양식만들기 HTML & JavaScript Contents 1. Form 객체 2. 일반적인입력양식 3. 선택입력양식 4. 회원정보입력양식만들기 2 Form 객체 Form 객체 입력양식의틀이되는 태그에접근할수있도록지원 Document 객체의하위에위치 속성들은모두 태그의속성들의정보에관련된것
PowerPoint 프레젠테이션
HTML5 웹프로그래밍입문 4 장. CSS3 스타일시트기초 1 목차 4.1 CSS3 시작하기 4.2 CSS 기본사용법 4.3 문자와색상지정하기 4.4 목록과표장식하기 2 4.1 CSS3 시작하기 4.1.1 스타일시트와 CSS3 기본개념 4.1.2 CSS 속성선언 4.1.3 문서일부분에 CSS 속성설정 3 스타일시트와 CSS3 기본개념 스타일시트란? 웹문서의출력될외형스타일
[ 네이버마일리지 ] 디자인셋팅매뉴얼 1. 장바구니페이지에네이버마일리지안내추가 - 위치 : HTML 디자인설정 > 장바구니 > 장바구니주문목록 {{$c_3}} [ 편집 ] 버튼클릭 > HTML 편집탭으로이동 > 여러개의장바구니모두결제버튼 {u9} [ 편집 ] 버튼클릭하
![[ 네이버마일리지 ] 디자인셋팅매뉴얼 1. 장바구니페이지에네이버마일리지안내추가 - 위치 : HTML 디자인설정 > 장바구니 > 장바구니주문목록 {{$c_3}} [ 편집 ] 버튼클릭 > HTML 편집탭으로이동 > 여러개의장바구니모두결제버튼 {u9} [ 편집 ] 버튼클릭하](/thumbs/88/117168284.jpg "[ 네이버마일리지 ] 디자인셋팅매뉴얼 1. 장바구니페이지에네이버마일리지안내추가 - 위치 : HTML 디자인설정 > 장바구니 > 장바구니주문목록 {{$c_3}} [ 편집 ] 버튼클릭 > HTML 편집탭으로이동 > 여러개의장바구니모두결제버튼 {u9} [ 편집 ] 버튼클릭하")
[ 네이버마일리지 ] 디자인셋팅매뉴얼 1. 장바구니페이지에네이버마일리지안내추가 - 위치 : HTML 디자인설정 > 장바구니 > 장바구니주문목록 {{$c_3}} [ 편집 ] 버튼클릭 > HTML 편집탭으로이동 > 여러개의장바구니모두결제버튼 {u9} [ 편집 ] 버튼클릭하여팝업에서코드수정 1) 장바구니페이지디자인수정위치 디자인관리 > HTML 디자인설정 > 장바구니이동
Microsoft PowerPoint - 3ÀÏ°_º¯¼ö¿Í »ó¼ö.ppt
변수와상수 1 변수란무엇인가? 변수 : 정보 (data) 를저장하는컴퓨터내의특정위치 ( 임시저장공간 ) 메모리, register 메모리주소 101 번지 102 번지 변수의크기에따라 주로 byte 단위 메모리 2 기본적인변수형및변수의크기 변수의크기 해당컴퓨터에서는항상일정 컴퓨터마다다를수있음 short
Microsoft PowerPoint - web-part01-ch09-브라우저객체모델.pptx
과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part1. JavaScript / Ch09. 브라우저객체모델 2014년 1학기 Professor Seung-Hoon Choi 9 브라우저객체모델 브라우저객체모델 (Browser Object Model, BOM) 웹브라우저와관련된객체들의집합 window, location,
SBR-100S User Manual
( 1 / 13 ) SBR-100S 모델에 대한 사용자 펌웨어 업그레이드 방법을 안내해 드립니다. SBR-100S 는 신규 펌웨어가 있을시 FOTA(자동업데이트) 기능을 통하여 자동 업그레이드가 되며, 필요시 사용자가 신규 펌웨어를 다운받아 수동으로 업그레이드 할 수 있습니다. 1. 준비하기 1.1 연결 장치 준비 펌웨어 업그레이드를 위해서는 SBR-100S
로거 자료실
redirection 매뉴얼 ( 개발자용 ) V1.5 Copyright 2002-2014 BizSpring Inc. All Rights Reserved. 본문서에대한저작권은 비즈스프링 에있습니다. - 1 - 목차 01 HTTP 표준 redirect 사용... 3 1.1 HTTP 표준 redirect 예시... 3 1.2 redirect 현상이여러번일어날경우예시...
4S 1차년도 평가 발표자료
모바일 S/W 프로그래밍 안드로이드개발환경설치 2012.09.05. 오병우 모바일공학과 JDK (Java Development Kit) SE (Standard Edition) 설치순서 Eclipse ADT (Android Development Tool) Plug-in Android SDK (Software Development Kit) SDK Components
PowerPoint 프레젠테이션
09 장 문서객체모델 1. 문서객체모델관련용어 2. 웹페이지생성순서 3. 문서객체선택 4. 문서객체조작 5. 이벤트 문서객체와문서객체모델의개념을이해한다. 문서객체를선택하고조작할수있다. 이벤트의종류를알아보고문서객체에이벤트를연결해본다. 1 문서객체모델관련용어 문서객체모델 (DOM) Document Object Model 웹브라우저가 HTML 파일을분석하고표시하는방법
쉽게 풀어쓴 C 프로그래밍
CHAPTER 6. CSS 레이아웃과애니메이션 레이아웃이란? 웹페이지에서 HTML 요소의위치, 크기등을결정하는것 집안에서의가구배치와비슷하다. 블록요소와인라인요소 블록 (block) 요소 - 화면의한줄을전부차지한다. 인라인 (inline) 요소 - 한줄에차례대로배치된다. 현재줄에서필요한만큼의너비만을차지한다. 블록요소 한줄을전부차지 , , ,
하둡을이용한파일분산시스템 보안관리체제구현
하둡을이용한파일분산시스템 보안관리체제구현 목 차 - 1 - - 2 - - 3 - - 4 - - 5 - - 6 - - 7 - - 8 - 1. 사용자가웹서버에로그인하여다양한서비스 ( 파일업 / 다운로드, 폴더생성 / 삭제 ) 를활용 2. 웹서버와연동된하둡서버에서업 / 다운로드된파일을분산저장. ( 자료송수신은 SSH 활용 ) - 9 - - 10 - - 11 -
0. 들어가기 전
컴퓨터네트워크 14 장. 웹 (WWW) (3) - HTTP 1 이번시간의학습목표 HTTP 의요청 / 응답메시지의구조와동작원리이해 2 요청과응답 (1) HTTP (HyperText Transfer Protocol) 웹브라우저는 URL 을이용원하는자원표현 HTTP 메소드 (method) 를이용하여데이터를요청 (GET) 하거나, 회신 (POST) 요청과응답 요청
PowerPoint 프레젠테이션
명품웹프로그래밍 1 2 강의목표 1. 웹의기본개념과구조를이해한다. 2. 웹서버와웹브라우저의상호관계를이해한다. 3. 웹문서와기존의전자문서와의차이점을이해한다. 4. 웹페이지를구성하는 HTML, CSS, 자바스크립트의 3 요소를이해한다. 5. HTML5의목적과기능을안다. 6. HTML5로웹페이지를작성하는과정을알고필요한도구를안다. 웹의기본목적과구성 3 웹의기본목적
var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");
자바스크립트 (JavaScript) - HTML 은사용자에게인터페이스 (interface) 를제공하는언어 - 자바스크립트는서버로데이터를전송하지않고서할수있는데이터처리를수행한다. - 자바스크립트는 HTML 나 JSP 에서작성할수있고 ( 내부스크립트 ), 별도의파일로도작성이가능하다 ( 외 부스크립트 ). - 내부스크립트 - 외부스크립트
Web Scraper in 30 Minutes 강철
Web Scraper in 30 Minutes 강철 발표자 소개 KAIST 전산학과 2015년부터 G사에서 일합니다. 에서 대한민국 정치의 모든 것을 개발하고 있습니다. 목표 웹 스크래퍼를 프레임웍 없이 처음부터 작성해 본다. 목표 웹 스크래퍼를 프레임웍 없이 처음부터 작성해 본다. 스크래퍼/크롤러의 작동 원리를 이해한다. 목표
쉽게 풀어쓴 C 프로그래밍
CHAPTER 3. HTML 멀티미디어와입력요소 웹브라우저와멀티미디어 예전방법 : HTML 안에서는 나 태그를사용하여야했고웹브라우저에는플래시나 ActiveX 를설치 HTML5: 와 태그가추가 오디오 요소의속성 오디오파일형식 MP3 'MPEG-1 Audio Layer-3' 의약자로 MPEG
02 장. 글꼴문단지정하기 이번장에서는스타일시트속성중에서글꼴과관련한속성과문단에관련된속성을살펴보도록하자.
02 장. 글꼴문단지정하기 이번장에서는스타일시트속성중에서글꼴과관련한속성과문단에관련된속성을살펴보도록하자. 이장에서다룰내용 1 2 3 4 5 글꼴꾸밈관련스타일시트텍스트관련스타일시트배경관련스타일시트목록관련스타일시트하이퍼링크관련스타일시트 2 01. 글꼴꾸밈관련스타일시트 v 글자에관련된스타일시트는크기, 스타일, 모양등에관련된 font 속성이가장많이사용 속성값설명 color
Dialog Box 실행파일을 Web에 포함시키는 방법
DialogBox Web 1 Dialog Box Web 1 MFC ActiveX ControlWizard workspace 2 insert, ID 3 class 4 CDialogCtrl Class 5 classwizard OnCreate Create 6 ActiveX OCX 7 html 1 MFC ActiveX ControlWizard workspace New
C H A P T E R 2
C H A P T E R 2 Foundations of Ajax Chapter 2 1 32 var xmlhttp; function createxmlhttprequest() { if(window.activexobject) { xmlhttp = new ActiveXObject( Micr else if(window.xmlhttprequest) { xmlhttp =
PowerPoint 프레젠테이션
Lecture 01: 웹프로그램과 HTML5 Kwang-Man Ko kkmam@sangji.ac.kr, compiler.sangji.ac.kr Department of Computer Engineering Sang Ji University 2019 1 2 강의목표 1. 웹의기본개념과구조를이해한다. 2. 웹서버와웹브라우저의상호관계를이해한다. 3. 웹문서와기존의전자문서와의차이점을이해한다.
Microsoft PowerPoint - web-part02-ch15-문서객체조작.pptx
과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part2. jquery Ch15. 문서객체조작 2014년 1학기 Professor Seung-Hoon Choi 15 문서객체조작 문서객체조작 자바스크립트만으로문서객체모델을다루려면복잡함 jquery를이용하면쉽게다룰수있다. 이책에서가장중요한부분 15.1 문서객체의클래스속성추가
쉽게 풀어쓴 C 프로그래밍
CHAPTER 10. DOM 과이벤트처리, 입력검 증 문서객체모델 (DOM) DOM 은 HTML 문서의계층적인구조를트리 (tree) 로표현 DOM 과 BOM HTML 문서를객체로표현한것을 DOM 웹브라우저를객체로표현한것을 BOM(Browser Object Model) HTML 요소찾기 동적인웹페이지를작성하려면원하는요소를찾아야한다. id 로찾기 태그이름으로찾기
MySQL-.. 1
MySQL- 기초 1 Jinseog Kim Dongguk University jinseog.kim@gmail.com 2017-08-25 Jinseog Kim Dongguk University jinseog.kim@gmail.com MySQL-기초 1 2017-08-25 1 / 18 SQL의 기초 SQL은 아래의 용도로 구성됨 데이터정의 언어(Data definition
mobile_guide_SA
네이버 모바일배너 모바일 네트워트 GUIDE AD GUIDE Version 1.0 03. 적용위치 04. Appendix 목차 네이버 모바일배너 개요 1. 텍스트형 광고 2. 이미지형 광고 3. 롤링형 광고 네이버 모바일배너 개요 1. 텍스트형 광고 2. 이미지형 광고 3. 롤링형 광고 01/03 네이버 모바일배너 개요 네이버 모바일배너는 네이버 모바일 서비스
<4D F736F F F696E74202D203130C0E52EBFA1B7AF20C3B3B8AE205BC8A3C8AF20B8F0B5E55D>
10 장. 에러처리 1. page 지시문을활용한에러처리 page 지시문의 errorpage 와 iserrorpage 속성 errorpage 속성 이속성이지정된 JSP 페이지내에서 Exception이발생하는경우새롭게실행할페이지를지정하기위하여사용 iserrorpage 속성 iserrorpage 는위와같은방법으로새롭게실행되는페이지에지정할속성으로현재페이지가 Exception
PART 1 CHAPTER 1 Chapter 1 Note 4 Part 1 5 Chapter 1 AcctNum = Table ("Customer").Cells("AccountNumber") AcctNum = Customer.AccountNumber Note 6 RecordSet RecordSet Part 1 Note 7 Chapter 1 01:
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,
Building Mobile AR Web Applications in HTML5 - Google IO 2012
Building Mobile AR Web Applications in HTML5 HTML5 -, KIST -, UST HCI & Robotics Agenda Insight: AR Web Browser S.M.AR.T: AR CMS HTML5 HTML5 AR - Hello world! - Transform - - AR Events 3/33 - - - (Simplicity)
슬라이드 1
GS 에너지백오피스 ( 국문 ) HTML 등록가이드 Version 1.0 Produced By e-motion 프로젝트 단위업무 GS 에너지홈페이지구축프로젝트 화면설계 _ 백오피스 HTML 등록가이드 작성자조정아작성일 2012-07-10-1- 목록 페이지 메뉴명 등록항목 3 Company > GS에너지소개 4 Company > CEO 메시지 5 Company
PowerPoint 프레젠테이션
기본과활용 목차 1. HTML와 CSS 시작 2. HTML 기본문서작성 3. 텍스트, 목록, 하이퍼링크 4. 박스, 표 5. 이미지와멀티미디어 6. 입력폼양식 웹개발환경 웹브라우저종류 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 웹개발편집기 메모장 (Notepad) 노트패드 ++(Notepad++) 아크로에디트 (AcroEdit) 드림위버 (Dreamweaver)
Data Provisioning Services for mobile clients
9 장. 요청흐름제어와모듈화 1. 액션태그를이용한흐름제어 액션태그 하나의 JSP 페이지에서다른 JSP 페이지로요청처리를전달할때사용 중요사항 from.jsp 가아닌 to.jsp 가생성한응답결과가웹브라우저에전달된다. from.jsp 에서사용한 request, response 기본객체가 to.jsp 에그대로전달된다.
슬라이드 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
슬라이드 1
웹프로그래밍 HTML, 자바스크립트, ASP 를중심으로 제 2 장 HTML 문법 목차 제 2 장 HTML 문법 2.1 기본태그 2.2 LINK 태그 2.3 Image 2.4 TABLE 2.5 FRAME 2.6 INPUT 양식 2 2.1 기본태크 구조태그 문자서식태그 문단서식태그 3 2.1.1 구조태그 HTML 태그들중가장기본이되는태그 : HTML
수식모드수식의표현법 수학식표현 조남운 조남운 수학식표현
조남운 mailto:namun.cho@gmail.com 2008.2.20 AMS-TEX 미국수학회 (American Mathematical Society) 에서만든수학패키지 대부분의수학표현은 AMS-TEX 을이용하고있음. 자세한내용은 AMS-TEX 매뉴얼을참조할것. http://www.ams.org/tex/amstex.html AMS-TEX 패키지선언 \usepackage{amssymb,
Cookie Spoofing.hwp
Cookie Spoofing&Sniffing By Maxoverpro[max]( 장상근) maxoverpro@empal.com http://www.maxoverpro.org 1. 서론 이문서는 Cookie Spoofing 과 Sniffing 에대해정석적인방법을이야기하도록하며또 한어느특정곳의취약점을설명하지않고직접제작한예제를가지고 Cookie Spoofing 과
세르게이의 HTML5&CSS3-내지_ indd
HTML CSS CHAPTER_2 HTML 문법 HTML 문서 HTML 문서기초요소와태그태그중첩빈요소특성불리언특성 XHTML5 여러버전을지원하는 HTML 문서 XHTML5 정의 문서타입과구조 MIME 타입일반적인 MIME 타입문서객체모델의미적요소 문법요약일반문법규칙 (X)HTML5 빈태그문법선택적태그를사용하는 HTML5 요소요소의타입브라우저호환성을위한스크립팅
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
PowerPoint 프레젠테이션
Ruby Programming 8 Web Crawling 한국어정보의전산처리 2017. 5. 24. Web Crawling 의요소기술 웹에접속하여웹문서읽어오기 open-uri 나 net/http 라이브러리이용. 웹문서분석 xml/html parser 라이브러리 ( 예 : nokogiri) 를이용할수도있으나 간단한분석일때는 scan 등의함수로정규표현을검색하여처리할수도있음.
PHP & ASP
단어장프로젝트 프로젝트2 단어장 select * from address where address like '% 경기도 %' td,li,input{font-size:9pt}
JSP 의내장객체 response 객체 - response 객체는 JSP 페이지의실행결과를웹프라우저로돌려줄때사용되는객체이다. - 이객체는주로켄텐츠타입이나문자셋등의데이터의부가정보 ( 헤더정보 ) 나쿠키 ( 다음에설명 ) 등을지정할수있다. - 이객체를사용해서출력의방향을다른
JSP 의내장객체 response 객체 - response 객체는 JSP 페이지의실행결과를웹프라우저로돌려줄때사용되는객체이다. - 이객체는주로켄텐츠타입이나문자셋등의데이터의부가정보 ( 헤더정보 ) 나쿠키 ( 다음에설명 ) 등을지정할수있다. - 이객체를사용해서출력의방향을다른 URL로바꿀수있다. 예 ) response.sendredirect("http://www.paran.com");
HTML Basic & Advanced
HTML Basic & Advanced Agenda - Markup에대한기본개념이해 - (X)HTML의구조및문법습득 - 실습예제및과제수행을통해실무에필요한스킬향상 Contents I. Markup의기본개념 II. HTML 구조및문법 III. 시멘틱마크업 IV. Tool 소개 V. 실습과제 2 Markup 의기본개념 HTML BASIC 3 Markup 이란? 문서의일부를
PowerPoint 프레젠테이션
How to produce ChemML and MathML 조윤상 ( 과편협기획운영위원 ) 1 Applications of XML Applications of XML RDF (Resource Description Framework) : 자원의정보를표현하기위한규격, 구문및구조에대한공통적인규칙을지원. RSS (Rich Site Summary) : 뉴스나블로그사이트에서주로사용하는콘텐츠표현방식.
PowerPoint 프레젠테이션
실습문제 Chapter 05 데이터베이스시스템... 오라클로배우는데이터베이스개론과실습 1. 실습문제 1 (5 장심화문제 : 각 3 점 ) 6. [ 마당서점데이터베이스 ] 다음프로그램을 PL/SQL 저장프로시져로작성하고실행해 보시오. (1) ~ (2) 7. [ 마당서점데이터베이스 ] 다음프로그램을 PL/SQL 저장프로시져로작성하고실행해 보시오. (1) ~ (5)
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 프로그램의
NATE CP 가이드 1. WML 페이지에서줄바꿈문제 개요 WML 페이지에서줄바꿈은명시적으로 <br/> 태그를사용하여야한다. 설명그림 2 의의도로제작된페이지에서 Card Styles 텍스트와 Select 박스사이에명시적인 <br/> 태그가없어, 그림 1 과같이줄바꿈이되
NATE CP 가이드 1. WML 페이지에서줄바꿈문제 WML 페이지에서줄바꿈은명시적으로 태그를사용하여야한다. 그림 2 의의도로제작된페이지에서 Card Styles 텍스트와 Select 박스사이에명시적인 태그가없어, 그림 1 과같이줄바꿈이되지않고한줄로보여짐. [ 그림 1] 비정상 [ 그림 2] 정상
HTML
Hyper Text Markup Language Bok, Jong Soon jongsoon.bok@gmail.com www.javaexpert.co.kr 1 HTML 문서의특징 HyperText Markup Language WWW 문서제작에쓰임 SpaceBar, Tab, Enter 인식못함 텍스트문서의형태 컴퓨터기종에독립적 확장명 :.html,.htm 태그는대소문자구별안함
Studuino소프트웨어 설치
Studuino 프로그래밍환경 Studuino 소프트웨어설치 본자료는 Studuino 프로그래밍환경설치안내서입니다. Studuino 프로그래밍 환경의갱신에따라추가 / 수정될수있습니다. 목차 1. 소개... 1 2. Windows... 2 2.1. 프로그래밍환경설치... 2 2.1.1. 웹설치버전설치방법... 2 2.2. Studuino 프로그래밍환경실행...
Microsoft Word - ijungbo1_13_02
[ 인터넷정보관리사필기 ] 기출문제 (11) 1 1. 지금부터인터넷정보관리사필기기출문제 (11) 를풀어보겠습니다. 2. 홈페이지제작할때유의할점으로가장거리가먼것은무엇일까요? 3. 정답은 ( 라 ) 입니다. 홈페이지제작시유의할점으로는로딩속도를고려하며, 사용자중심의인터페이스로제작하고, 이미지의크기는적당하게조절하여야한다. [ 인터넷정보관리사필기 ] 기출문제 (11)
ProQuest PPT Styles
Ebook Central 이용매뉴얼 JUNE 2019 ProQuest 한국지사 korea@asia.proquest.com 2 목차 Ebook Central 이용매뉴얼 1. Ebook Central 접속방법 도서관홈페이지내 Ebook Central 접속방법 ProQuest platform에서 Ebook Central 접속 2. e-book 검색 기본검색검색결과상세정보
Scopus 한국어이용가이드-3차수정
refine your results TM www.scopus.com 1 Step 2 키워드 검색방법 홈 페이지에서 찾고 싶은 단어를 입력해 Refine Results의 을 이용해 제한검색 로 상세확인 가능하며, 로 FullText 볼 수 있음 검색결과 보기 Scopus 탭 Scopus에 등재된 저널들의 검색 결과를 표시. More 탭 Scopus에 등재된 저널
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
Microsoft Word - CrossSiteScripting[XSS].docx
![Microsoft Word - CrossSiteScripting[XSS].docx](/thumbs/103/158529076.jpg "Microsoft Word - CrossSiteScripting[XSS].docx")
1 Education Giehong.E goodbyestar@nate.com abstract - 영리를목적으로한곳에서의불법적인배포는금지합니다. - 문서의내용은임의의가상테스트를대상으로한 OWASP10 의기본적인내용들이며교육을위해만들어진문서입니다. - 비인가받은악의적인행동은불법이며법적책임또한당사자에게있습니다 Copyright@2008 All Rights Reserved
슬라이드 1
웹접근성향상을위한 UI 개발표준화가이드 UI 개발팀최재성, 유순 웹접근성향상을위한 UI 개발표준화가이드 intro 웹접근성? IWA TFT 웹접근성준수실태 웹접근성? 웹표준? 웹사용성? 기대효과 웹접근성향상을위한가이드라인 웹표준화실무적용방법 웹접근성실무적용방법 웹사용성실무적용방법 앞으로 준수의당위성 IWA TFT (Improve Web Accessibility
슬라이드 1
Mobile Web Manual INTERNETNAYANA COPYRIGHT (C) INTERNETNAYANA CORP. RIGHT RESERVED MobileWeb Manual, Nayana 1. 계정확인하기 - FTP 접속및소스파일확인및다운로드 - 스킨에서수정해야될부분확인 2. 소스수정하기 - 인덱스수정하기 - 회사소개서브페이지수정 - 주요서비스서브페이지수정
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. 서비스가이드정보삭제...
Visual Basic 반복문
학습목표 반복문 For Next문, For Each Next문 Do Loop문, While End While문 구구단작성기로익히는반복문 2 5.1 반복문 5.2 구구단작성기로익히는반복문 3 반복문 주어진조건이만족하는동안또는주어진조건이만족할때까지일정구간의실행문을반복하기위해사용 For Next For Each Next Do Loop While Wend 4 For
Microsoft PowerPoint 세션.ppt
웹프로그래밍 () 2006 년봄학기 문양세강원대학교컴퓨터과학과 세션변수 (Session Variable) (1/2) 쇼핑몰장바구니 장바구니에서는사용자가페이지를이동하더라도장바구니의구매물품리스트의내용을유지하고있어야함 PHP 에서사용하는일반적인변수는스크립트의수행이끝나면모두없어지기때문에페이지이동시변수의값을유지할수없음 이러한문제점을해결하기위해서 PHP 에서는세션 (session)