HTML5 웹 프로그래밍 입문 (개정판) 3장. 링크와 멀티미디어
목차 3.1 링크 달기 3.2 이미지 사용하기 3.3 오디오와 비디오 다루기 3.4 객체 포함하기 소스코드 실행 사이트 주소 : http://webclass.me/html5_2e 폴더 ch02/ ~ ch13/에 각 장의 예제가 있어서 실행결과 확인 및 소스보기가 가능합니다. 링크와 멀티미디어
3.1 링크 달기 3.1.1 하이퍼텍스트와 링크 3.1.2 문서간 이동 3.1.3 문서 내 특정 위치로 이동 링크와 멀티미디어
하이퍼텍스트/하이퍼미디어 HTML(HyperText Markup Language) HTML의 기본 개념 하이퍼텍스트의 마크업 언어 HTML의 기본 개념 하이퍼텍스트 : 서로 연관된 문서나 텍스트 조각들을 연결 하이퍼미디어 : 텍스트 뿐 아니라 멀티미디어 정보가 서로 연결 하이퍼텍스트/하이퍼미디어의 구조 각 정보의 조각은 링크에 의해 서로 연결 연결 링크를 선택하여 내비게이션 링크와 멀티미디어
노드, 링크, 앵커 노드, 링크, 앵커의 개념 HTML 문서에서 사용되는 링크의 종류 링크 : 노드를 연결하여 내비게이션이 가능토록 앵커 : HTML 문서 내에서 링크의 출발점이나 도착점 앵커 영역 : 앵커가 설정되어 있는 영역 HTML 문서에서 사용되는 링크의 종류 특정 단어나 문장, 혹은 이미지에서 다른 문서/외부 URL/문서내 다른 지점으로 링크 링크와 멀티미디어
문서간 이동 <a> <a> 요소 : 링크의 시작점 앵커를 표현 <a href=”파일이름 혹은 URL 주소” title=”설명”> 링크 텍스트 </a> href 속성 : 이동하고자 하는 목적지 문서의 파일 주소(URL)를 지정 절대 주소 : http://로 시작하는 URL 형식의 인터넷 주소 <a href="http://www.w3c.org" title ="W3C 홈">W3C 홈페이지 방문</a> 상대 주소 : 현재의 문서와 같은 폴더의 위치에서부터 상대주소 <a href=“booklist.html”>책 목록</a> title 속성에는 말풍선 창에 나올 설명을 기입 클릭 링크와 멀티미디어
링크 예제 (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> 클릭 링크와 멀티미디어
문서 내 특정 위치로 이동 <a> 동일한 문서 내에서 특정 지점으로 연결 목적지인 특정 지점은 일종의 책갈피 링크 예를 들어, 목차를 선택하면 원하는 책갈피 위치로 바로 간다 목적지 앵커 지정: <a id=“고유아이디”> 목적지 </a> id 속성 : 문서 내의 원하는 위치에 목적지 앵커를 설정 이름을 지정하는 것이므로 <a> 와 </a> 사이에 텍스트 상관 없음 예) <a id="book001"></a> <li>컴퓨터와 IT기술의 이해</li> 시작점에서 연결: <a href = “#고유아이디”> 링크로 이동</a> href 속성에 목적지 앵커의 아이디를 지정 목적지 앵커에서는 아이디 이름만 설정 => 이용할 때는 #으로 시작 예) <a href="#book001">최윤철, 임순범 공저, IT기술의 이해</a> [노트: id 속성 사용] 이전 버전의 HTML에서는 name 속성을 사용 HTML5에서는 name 속성 대신 id 속성을 사용 권장 링크와 멀티미디어
<a href=”#book001”> 링크 예제 (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> <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="book002"></a><li>Understanding Computers, 15th Ed</li> <ul> <li> 저자 : D. Morley, C. Parker</li> <li> 출판사 : Cengage Learning</li> <li> 책소개 : Thoroughly Updated for the Latest Advances in Multimedia ... 생략 ... <a href=”#book001”> <a id=”book001”> 링크와 멀티미디어
3.2 이미지 사용하기 3.2.1 이미지 파일 종류 3.2.2 이미지 삽입 링크와 멀티미디어
이미지 파일 종류 GIF(Graphic Interchange Format) JPEG, PNG에 비하여 파일 크기가 작다 표현 가능 색상이 256개이므로 자연스러운 장면에는 부적합 사진이 아닌 클립아트나 드로잉 같은 종류의 이미지에 적합 JPEG(Joint Photographic Experts Group) 24비트의 칼라를 사용하므로 수백만 개의 색상을 표현 복잡한 그림이나 사진 등 색상을 많이 사용하는 이미지에 적합 PNG(Portable Network Graphic) GIF와 JPEG 형식의 장점, 비압축 형식인 BMP 형식의 장점도 고려 24비트(또는 32비트) 칼라를 사용 링크와 멀티미디어
압축률 비교 이미지 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) 링크와 멀티미디어
이미지 삽입 <img> <img> 요소의 src, width, height 속성 <img src=“파일이름” width=”크기” height=”크기” alt=”대체 텍스트”> <img> 요소의 src, width, height 속성 src 속성 : 이미지 파일의 이름 width와 height 속성 : 크기를 조정 예 <img src ="images/IT_intro.jpg">IT기술의 이해 <img src ="images/IT_intro.jpg" width="75">IT기술의 이해 <img src ="images/IT_intro.jpg" width="75" height="50">IT기술의 이해 링크와 멀티미디어
<img> 요소의 alt 속성 (“alternate text”) 이미지에 대한 설명 텍스트를 지정 이미지 파일의 주소가 잘못되거나 , 인터넷 연결이 너무 느려서 미처 이미지를 표시하지 못하는 경우 등 예, <img src =“IT_intro.jpg" alt=" 책표지" >IT기술의 이해 [노트] <img>의 align 속성 이전 버전의 HTML 에서는 <img> 요소의 align 속성으로 이미지 위치를 정렬 HTML5에서는 <img> 요소에서 CSS 스타일지정으로 위치를 설정하도록 권장 링크와 멀티미디어
<figure>, <figcaption> 그림, 사진, 다이어그램과 텍스트 등의 콘텐츠를 함께 묶어서 하나의 독립된 단위로 취급하고 싶을 때 사용 <figcaption> 요소 <figure> 요소를 위한 제목을 표현, <figure> 요소 내에 위치 이미지에 하이퍼링크 연결 <a href =”링크할 곳의 파일이름”><img src=”이미지 파일이름”></a> <figure> <table> <tr> <td><img src="IT_intro.jpg" alt="책표지" width="75"></td> <td>IT기술의 이해<br>최윤철, 임순범<br>생능출판사</td> </tr> </table> <figcaption>[그림 1] 책 소개</figcaption> </figure> 링크와 멀티미디어
이미지 삽입 예제 … <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> <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> <a href=”…”> 링크와 멀티미디어
3.3 오디오와 비디오 다루기 3.3.1 지원하는 오디오/비디오 파일 형식 3.3.2 오디오 삽입하기 3.3.3 비디오 삽입하기 링크와 멀티미디어
지원하는 오디오/비디오 파일 형식 MP3 (*.mp3) : MPEG Audio Layer-3 Wave (*.wav, *.wave) 마이크로소프트와 IBM이 개발, 비압축 방식의 오디오 형식 MPEG4 (*.mp4, *.m4v) MPEG-4의 part14에서 규정된 비디오 파일 형식, H.264 코덱 사용 Ogg (*.ogg, *.ogv) 스트리밍 방식의 멀티미디어 표현을 위한 공개소스 기반 형식 Vorbis, FLAC 등의 오디오 코덱, Ogg Theora 등의 비디오 코덱 사용 WebM (*.webm) 구글이 HTML5의 동영상에 사용하기 위해 최근에 개발 링크와 멀티미디어
웹브라우저에서 오디오/비디오 코덱의 지원 현황(2016) 링크와 멀티미디어
오디오 삽입하기 <audio> <audio controls autoplay src="파일 이름”> src 속성 : 재생할 사운드 파일 이름 controls 속성 : 미디어 제어기를 표시할 지 여부 autoplay 속성 : 파일이 로드되자마자 자동으로 재생 loop 속성 : 사운드 반복 재생 횟수 예, <audio controls src="song.mp3" loop="3" autoplay> 브라우저에서 <audio>를 지원하지 않습니다. </br> (song.mp3파일이 3회 자동재생 됩니다.) </audio> 링크와 멀티미디어
<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"> <source src="song.wav" type="audio/wav"> 브라우저에서 <audio> 요소, 혹은 mp3/ogg/wav 를 지원하지 않습니다. </audio> 링크와 멀티미디어
<audio> 요소의 preload 속성 미리 로드되어야 하는지의 여부를 지정 preload 속성값 auto(기본값) : 페이지를 로드하고 바로 오디오 파일을 다운로드 metadata : 사용자가 재생 시키기 전까지는 오디오의 크기, 관련 정보 등과 같은 메타데이터만 다운로드 none : 재생을 시작 하기 전까지 오디오 파일을 다운로드 안함 링크와 멀티미디어
비디오 삽입하기 <video> <video controls src="비디오 파일 이름" width="폭" height="높이" > <video> 요소의 속성 src, controls, loop, autoplay 속성: <audio> 요소의 속성과 동일 width, height 속성: 화면에서 비디오가 표시될 영역의 크기 videoWidth, videoHeight 속성: 비디오 자체의 너비와 높이 poster 속성: 동영상이 로딩되고 있을 때 보여줄 이미지 preload 속성: 브라우저가 미리 동영상을 로딩 할 지 여부 <video controls autoplay width="360" height="240" src="bear.mp4"> 비디오를 재생할 수 없습니다. </video> 링크와 멀티미디어
비디오 미리 로딩하기 preload 속성 auto(기본값) : 페이지를 로드하고 바로 비디오 파일을 다운로드 metadata : 비디오의 크기, 첫 프레임 등 메타데이터만 다운로드 none : 재생 시작 전까지 비디오 파일을 다운로드 안함 <video width="360" height="240" src="bear.mp4" controls preload="none"> 비디오를 재생할 수 없습니다. </video> <video width="360" height="240" src="bear.mp4" controls preload="metadata"> 링크와 멀티미디어
3.4 객체 포함하기 3.4.1 <iframe>으로 다른 문서의 내용 표시하기 3.4.2 <embed>로 외부객체 포함하기 3.4.3 특정 콘텐츠 요소 포함하기 링크와 멀티미디어
<iframe>으로 다른 문서의 내용 표시 브라우저 페이지 내에 또 다른 페이지 프레임을 삽입 <iframe src =”파일주소” width=”폭” height=”높이” name=”이름”> </iframe> src 속성 : 내부 프레임에 출력할 파일의 url 지정 width와 height 속성 : 브라우저 프레임의 가로, 높이 크기 name 속성 : 프레임의 이름 <a> 요소의 target 속성에 <iframe> 이름을 지정 <iframe width="380" height="280" src="iframe_test.txt"> </iframe> <iframe width="520" height="280" src="bear.mp4"> </iframe> 링크와 멀티미디어
<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> <li> G. Shelly, M. Vermaat, Discovering Computers </li> </ul> <li> 웹프로그래밍 </li> <li> 임순범, 박희민 공저, HTML5 웹프로그래밍 입문 </li> <li>< 최윤철, 임순범 공저, <a href="http://book.naver.com/bookdb/book_...?bid=7413144" target=”intro”> 소셜미디어 시대의 인터넷 이해 </a> </li> </ol> <iframe src ="" name="intro" width="420" height="400"> </iframe> </body> <a href=”…” target=”intro”> <iframe name=”intro”> 링크와 멀티미디어
<embed>로 외부객체 포함하기 <object> 혹은 <embed> 요소 주로 HTML 파일이 아닌 비디오, 오디오, 애니메이션 등 외부의 애플리케이션 파일을 포함하는데 사용 <embed> 요소의 속성 : src, width, height <embed src="삽입할 파일의 URL" width="폭" height="높이"> </embed> <h3>embed로 파일 삽입</h3> <embed width=“280" height="260" src="embed_test.txt"> <embed width=“380" height="260" src="bear.mp4"> 링크와 멀티미디어
유튜브 동영상 삽입하기 YouTube 메뉴 “공유 => 소스코드”에서 <iframe> 코드 복사 <iframe>을 <embed>로 바꾸어도 동일 <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> 링크와 멀티미디어
3.4.3 특정 콘텐츠 요소 포함하기 <canvas> 요소로 그림 그리기 [11장 참조] 비트맵 그래픽스(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> 링크와 멀티미디어
<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> 링크와 멀티미디어
<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> <annotation>y=sqrt{b^2-4ac} </annotation> </semantics> </math> 링크와 멀티미디어
<h3>HTML 문서 내에 canvas, svg, MathML이 포함</h3> <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> 링크와 멀티미디어