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 의기본개념 하이퍼텍스트 : 서로연관된문서나텍스트조각들을연결 하이퍼미디어 : 텍스트뿐아니라이미지, 그래픽, 오디오, 비디오등의멀티미디어정보가서로연결 하이퍼텍스트 / 하이퍼미디어의구조 각정보의조각은링크에의해서로연결 모든정보의접근은연결링크를선택하여내비게이션 4
노드, 링크, 앵커 노드, 링크, 앵커의개념 노드 : HTML 문서나멀티미디어정보를표현하는기본단위 링크 : 노드를연결하여내비게이션이가능토록하는구성요소 앵커 : HTML 문서내에서링크의출발점이나도착점을의미 앵커영역 : 앵커가설정되어있는영역 HTML 문서에서사용되는링크의종류 특정단어나문장, 혹은이미지에서다른문서로이동하는링크 외부 URL 로연결하는링크 문서내의다른지점으로의링크 5
문서간이동 <a> <a> 요소 : 링크의시작점앵커를표현 href 속성 : 이동하고자하는목적지문서의파일주소 (URL) 를지정 title 속성에는말풍선창에나올설명을기입 <a href= 파일이름혹은 URL 주소 title= 설명 > 링크텍스트 </a> 6
href 속성 : 이동하고자하는문서의위치지정 절대주소 : 다른웹사이트의문서로이동 href 속성에 http:// 로시작하는 URL 형식의인터넷주소기입 <a href="http://www.w3c.org">w3c 홈페이지방문 </a> 클릭 상대주소 현재의문서와같은폴더의위치에서부터상대주소로링크 <a href= booklist.html > 책목록 </a> 7
title 속성 하이퍼링크에대한설명을하고싶을때사용 하이퍼링크위에마우스를가져가면말풍선에설명등장 <a href="http://www.w3c.org" title ="W3C 홈페이지 "> W3C 홈페이지방문 </a> 8
링크예제 (1) : 문서간이동하기 <!DOCTYPE html> <html> <body> <h3> 도서목록페이지로이동 </h3> <p> 분야를클릭하면해당도서목록페이지로이동합니다.</br> 전공분야위에마우스를올리면해당전공학과의이름을볼수있습니다.</p> <ul> <li> <a href="" title=" 컴퓨터공학과 "> 컴퓨터 </a> </li> <li> <a href= link_internal.html" title= IT 공학과 "> IT 공학 </a> </li> <li> 전자공학 </li> <li> 인간공학 </li> </ul> </body> </html> 클릭 9
문서내특정위치로이동 <a> 동일한문서내에서특정지점으로연결 목적지인특정지점은일종의책갈피링크 예를들어, 목차를선택하면원하는책갈피위치로바로간다 문서가길경우사용하면효과적 목적지앵커의설정 <a id= 고유아이디 > 문서내이동할목적지 </a> 시작점앵커의설정 <a href = # 고유아이디 > 링크설정된 고유아이디 위치로이동 </a> [ 노트 : id 속성사용 ] 이전버전의 HTML에서는 name 속성을사용 HTML5에서는 name 속성대신 id 속성을사용권장 10
링크의목적지앵커지정 : <a id= > id 속성 : 문서내의원하는위치에목적지앵커를설정 이름을지정하는것이므로 <a> 와 </a> 사이에텍스트필요없음 예 ) <a id="book001"></a> <li> 컴퓨터와 IT 기술의이해 </li> 시작점앵커에서링크연결 : <a href= # > href 속성에목적지앵커의아이디를지정 목적지앵커에서아이디설정할때는이름만기입 아이디를이용할때는 # 으로시작 예 ) <a href="#book001"> 최윤철, 임순범공저, 컴퓨터와 IT 기술의이해 </a> 11
링크예제 (2) : 문서내위치로이동. <ol> <li> 최윤철, 임순범, 한탁돈공저, <a href="#book001"> 컴퓨터와 IT기술의이해 </a></li> <li>d. Morley, C. Parker, <a href="#book002">understanding Computers 15th Ed.</a></li> <li>g. Shelly, M. Vermaat, Discovering Computers</li> </ol></br> <h3> 참고도서소개 </h2> <ol> <a id="book001"></a><li> 컴퓨터와 IT 기술의이해 </li> <table border="1 > <tr><td> <ul> <li> 저자 : 최윤철, 임순범, 한탁돈공저 </li> <li> 출판사 : 생능출판사 </li> <li> 책소개 : 급변하는 IT기술의발전을이해하고다양한사회영역과 </li> </ul> </td></tr> </table> <a id= book001 > <a id="book002"></a><li>understanding Computers, 15th Ed</li> <table border="1 > <tr><td> <ul> <li> 저자 : D. Morley, C. Parker</li> <li> 출판사 : Cengage Learning</li> <li> 책소개 : Thoroughly Updated for the Latest Advances in Multimedia... 생략... 12 <a href= #book001 > <a id= book001 >
3.2 이미지사용하기 3.2.1 이미지파일종류 3.2.2 이미지삽입 13
이미지파일종류 GIF(Graphic Interchange Format) JPEG, PNG에비하여파일크기가작다 표현가능색상이 256개이므로자연스러운장면에는부적합 사진이아닌클립아트나드로잉같은종류의이미지에적합 JPEG(Joint Photographic Experts Group) 24비트의칼라를사용하므로수백만개의색상을표현 복잡한그림이나사진등색상을많이사용하는이미지에적합 PNG(Portable Network Graphic) GIF와 JPEG 형식의장점, 비압축형식인 BMP 형식의장점도고려 24비트 ( 또는 32비트 ) 칼라를사용 14
압축률비교 이미지 BMP 포맷 GIF 포맷 JPEG 포맷 PNG 포맷 419KB (317x451 픽셀 ) 8.01KB ( 압축률 52.3) 17.9KB ( 압축률 23.4) 22.8KB ( 압축률 18.4) 414KB (352x402 픽셀 ) 49.7KB ( 압축률 8.33) 27.2KB ( 압축률 15.2) 206KB ( 압축률 2.07) 15
이미지삽입 <img> <img src= 파일이름 width= 크기 height= 크기 alt= 대체텍스트 > <img> 요소의 src, width, height 속성 src 속성 : 이미지파일의이름을지정 width와 height 속성 : 크기를조정하고싶을때사용 src 속성 : 파일의경로 + 파일이름 예 <img src ="images/it_intro.jpg">it기술의이해 <img src ="images/it_intro.jpg" width="70">it기술의이해 <img src ="images/it_intro.jpg" width="70" height="50">it기술의이해 16
<img> 요소의 alt 속성 alternate text( 대체텍스트 ) 의약어 이미지에대한설명텍스트를지정 화면에이미지를로드못할경우그위치에텍스트가대신출력 이미지파일의주소가잘못되거나, 인터넷연결이너무느려서미처이미지를표시하지못하는경우등 예, <img src = IT_intro.jpg" alt=" 책표지 " >IT 기술의이해 [ 노트 ] <img> 의 align 속성이전버전의 HTML 에서는 <img> 요소의 align 속성으로이미지위치를정렬 HTML5에서는 <img> 요소에서 CSS 스타일지정으로위치를설정하도록권장 17
<figure>, <figcaption> <figure> 요소 그림, 사진, 다이어그램과텍스트등의콘텐츠를함께묶어서하나의독립된단위로취급하고싶을때사용 <figcaption> 요소 <figure> 요소를위한제목을표현, <figure> 요소내에위치 <figure> <table> <tr> <td><img src="it_intro.jpg" alt=" 책표지 " width="75"></td> <td>it 기술의이해 <br> 최윤철, 임순범 <br> 생능출판사 </td> </tr> </table> <figcaption>[ 그림 1] 책소개 </figcaption> </figure> 이미지에하이퍼링크연결 <a href = 링크할곳의파일이름 ><img src= 이미지파일이름 ></a> 18
이미지삽입예제 <table border="1"> <tr> <td> <figure> <a href="http://book.naver.com/bookdb/book_detail.nhn?bid=5339292"> <img src= IT_intro.jpg" alt=" 책표지 " width= 75"><br> <figcation> IT 기술의이해 </figcation></a> </figure> </td> <td> 최윤철, 임순범, 한탁돈공저 </td> <td> 생능출판사 </td> </tr> <tr> <td> <figure> <a href= > <a href="http://book.naver.com/bookdb/book_detail.nhn?bid=6746965"> <img src="steve.jpg" alt=" 책표지 " width="66" height="90"><br> <figcation> 스티브잡스 </figcation></a> </figure> </td> 19
3.3 오디오와비디오다루기 3.3.1 지원하는오디오 / 비디오파일형식 3.3.2 오디오삽입하기 3.3.3 비디오삽입하기 20
지원하는오디오 / 비디오파일형식 MP3 (*.mp3) : MPEG Audio Layer-3 MPEG-1 의오디오규격으로개발된형식, 대중적으로널리사용 Wave (*.wav, *.wave) 마이크로소프트와 IBM 이개발, 비압축방식의오디오형식 MPEG4 (*.mp4, *.m4v) MPEG-4 의 part14 에서규정된비디오파일형식, H.264 코덱사용 Ogg (*.ogg, *.ogv) 스트리밍방식의멀티미디어표현을위한공개소스기반형식 Vorbis, FLAC 등의오디오코덱, Ogg Theora 등의비디오코덱사용 WebM (*.webm) 구글이 HTML5 의동영상에사용하기위해최근에개발 21
웹브라우저에서오디오 / 비디오코덱의지원현황 22
오디오삽입하기 <audio> <audio controls autoplay src=" 재생할사운드파일이름 > src 속성 : 사운드파일이름을지정 controls 속성 : 기본적인미디어제어기를표시할지여부를지정 autoplay 속성 : 파일이로드되자마자자동으로재생시킨다는의미 loop 속성 : 사운드를반복재생시킬횟수를지정 예, <audio controls src="song.mp3" loop="3" autoplay> 브라우저에서 <audio> 를지원하지않습니다. </br> (song.mp3 파일이 3 회자동재생됩니다.) </audio> 23
<source> 요소와같이사용하기 브라우저에서오디오파일이지원되지않는경우를대비 <source> 요소에서같은내용을여러형식으로작성한파일지정 src 속성 : 오디오파일의이름지정 type 속성 : 오디오파일의 MIME 형식을지정 예, audio/mp3, audio/ogg, audio/wav 와같이지정 <audio controls autoplay> <source src="song.mp3" type="audio/mp3"> <source src="song.ogg" type="audio/ogg"> </audio> 웹브라우저에서오디오파일로드전에재생가능여부를확인 가장앞에있는파일의형식부터재생이가능한지확인 24
오디오예제 : <audio> 와 <source> <body> <audio controls autoplay> <source src="song.mp3" type="audio/mp3"> <source src="song.ogg" type="audio/ogg"> <source src="song.wav" type="audio/wav"> 브라우저에서 <audio> 요소, 혹은 mp3/ogg/wav 를지원하지않습니다. </audio> </body> 25
<audio> 요소의 preload 속성 미리로드되어야하는지의여부를지정 preload 속성값 auto( 기본값 ) : 페이지를로드하고바로오디오파일을다운로드 metadata : 사용자가재생시키기전까지는오디오의크기, 관련정보등과같은메타데이터만다운로드 none : 재생을시작하기전까지오디오파일을다운로드안함 26
비디오삽입하기 <video> <video controls src=" 비디오파일이름 " width=" 폭 " height=" 높이 " > <video> 요소의속성 src, controls, loop, autoplay 속성 : <audio> 요소의속성과동일 width, height 속성 : 화면에서비디오가표시될영역의크기를설정 videowidth, videoheight 속성 : 비디오자체의너비와높이를반환 Poster 속성 : 동영상이로딩되고있을때보여줄이미지를지정 preload 속성 : 브라우저가미리동영상을로딩할지지정 27
비디오예제 1: 비디오삽입 <html> <head> <title> 비디오삽입하기 </title> </head> <body> <video controls autoplay width="360" height="240" src="bear.mp4"> 비디오를재생할수없습니다. </video> </body> </html> 28
비디오미리로딩하기 preload 속성 auto( 기본값 ) : 웹브라우저가페이지를로드하고바로비디오파일을다운로드 metadata : 사용자가재생시키기전까지는비디오의크기, 첫프레임, 비디오관련정보등과같은메타데이터만다운로드 none : 재생을시작하기전까지비디오파일을다운로드안함 29
비디오예제 2: 비디오미리로드 <body> <video width="360" height="240" src="bear.mp4" controls preload="none"> 비디오를재생할수없습니다. </video> <video width="360" height="240" src="bear.mp4" controls preload="metadata"> 비디오를재생할수없습니다. </video> </body> 30
3.4 객체포함하기 3.4.1 <iframe> 으로다른문서의내용표시하기 3.4.2 <embed> 로외부객체포함하기 3.4.3 특정콘텐츠요소포함하기 31
<iframe> 으로다른문서의내용표시 <iframe> 요소 : 한화면에서링크로연결된내용보기 브라우저페이지내에또다른브라우저페이지프레임을삽입 여기에서링크된문서의내용을확인 <iframe src= 내부프레임에출력할파일경로 ></iframe> <iframe> 요소의속성 : src, width, height, name <iframe src = 파일주소 width= 폭 height= 높이 name= 이름 ></iframe> src 속성 : 내부브라우저내부프레임에출력할파일의 url 지정 width와 height 속성 : 브라우저프레임의가로, 높이크기 name 속성 : 브라우저프레임의이름 <a> 요소의 target 속성에 <iframe> 의이름을지정 32
<html> <body> <h3>iframe 에비디오삽입 </h3> <iframe width="380" height="280" src="iframe_test.txt"> </iframe> <iframe width="520" height="280" src="bear.mp4"> </iframe> </body> </html> 33
<iframe> 으로다른문서를링크 <ul> <li><a href="http://book.naver.com/bookdb/book_detail.nhn?bid= 5339292" target="intro"> 컴퓨터와 IT기술의이해 </a> </li> <li> D. Morley, C. Parker, Understanding Computers 15th Ed </li> <a href= target= intro > <li> G. Shelly, M. Vermaat, Discovering Computers </li> </ul> <li> 웹프로그래밍 </li> <ul> <li> 임순범, 박희민공저, HTML5 웹프로그래밍입문 </li> <li>< 최윤철, 임순범공저, <a href="http://book.naver.com/bookdb/book_...?bid=7413144" target= intro > <iframe name= intro > 소셜미디어시대의인터넷이해 </a> </li> </ul> </ol> <dl> <dt> 지정도서 </dt> <dd> 도서관에여러권비치되어있으며항상열람가능 </dd> </dl> <iframe src ="" name="intro" width="420" height="400"> </iframe> </body> 34
<embed> 로외부객체포함하기 <object> 혹은 <embed> 요소 주로 HTML 파일이아닌비디오, 오디오, 애니메이션등외부의애플리케이션파일을포함하는데사용 <embed> 요소의속성 : src, width, height <embed src=" 삽입할파일의 URL" width=" 폭 " height=" 높이 "> </embed> 예제 : <embed> 로유튜브파일삽입하기 <h3>embed 로파일삽입 </h3> <embed width="380" height="280" src="embed_test.txt"> <embed width="520" height="280" src="bear.mp4"> <h3>youtube 파일삽입 : iframe & embed</h3> <iframe width="560" height="315" src="https://www.youtube.com/embed/9bzkp7q19f0" frameborder="0" allowfullscreen></iframe> <embed width="560" height="315" src="https://www.youtube.com/embed/9bzkp7q19f0" frameborder="0" allowfullscreen></embed> 35
36
3.4.3 특정콘텐츠요소포함하기 <canvas> 요소로그림그리기 비트맵그래픽스 (bitmap graphics) 방식의그림 화면영역을 <canvas> 요소로정의하고난후, 정의된이영역에자바스크립트 API 를이용하여그림그리기 <canvas id=" 아이디 " width=" 가로크기 " height=" 세로크기 "> </canvas> <script type="text/javascript"> // 아이디로 canvas 찾아서 context 생성하기 // context 에그림그리기, 예, context.rect(0,0,80,80); 크기 80 짜리사각형 </script> <canvas id="mysample" width="80" height="80"> </canvas> <script type="text/javascript"> var canvas = document.getelementbyid("mysample"); var context = canvas.getcontext("2d"); context.rect(0,0,80,80); context.rect(10,10,40,40); context.fillrect(20,20,40,40); context.stroke(); </script> 37
<svg> 요소로벡터그래픽스그리기 벡터그래픽스방식으로정의된그림을표현 SVG 는 Scalable Vector Graphics 의약자 그림을그리고자하는영역의크기를 <svg> 요소로정의하고원하는벡터그래픽스요소를하위에포함 <svg width=" 가로크기 " height=" 세로크기 "> <!-- <circle>, <rect>, <path> 등벡터그래픽스를표현하는요소 --> </svg> <svg width="80" height="80"> <circle cx="40" cy="30" r="30" fill="green" /> <circle cx="15" cy="40" r="10" fill="red" /> <rect x="35" y="50" width="10" height="30" fill="brown"/> </svg> 38
<math> 요소로수학공식표현 수학공식을표현하는표준규약 mathml(math Markup Language) 수식의각항목을별도요소로표현하여필요시의미를파악하도록 <math> 요소내에각변수, 상수, 연산자등을분리하여 <mi>, <mn>, <mo> 등의요소로표현 <math> <semantics> <mrow> <mi>y</mi> <mo>=</mo> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>-</mo> <mrow> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> </msqrt> </mrow> <annotation>y=sqrt{b^2-4ac} </annotation> </semantics> </math> 39
<body> <h3>html 문서내에 canvas, svg, MathML 이포함 </h3> <p> 텍스트와그래픽이같은영역에섞여있다.<br> 벡터그래픽은 svg 로표현되고, 비트맵그래픽은 canvas 로표현된다 </p> <p>canvas 예제는 <canvas id="mysample" width="80" height="80"> </canvas> <script type="text/javascript"> </script> 이고, svg 예제는 <svg width="80" height="80"> </svg> 이다.</p> <p> 수학공식 <math> </math> 도 MathML 을이용하여텍스트와같이쓸수있다. </body> 40