HTML5 웹 프로그래밍 입문(배포용) 3장. 링크와 멀티미디어.

Presentation on theme: "HTML5 웹 프로그래밍 입문(배포용) 3장. 링크와 멀티미디어."— Presentation transcript:

1 HTML5 웹 프로그래밍 입문(배포용) 3장. 링크와 멀티미디어

2 목차 3.1 링크 달기 3.2 이미지 사용하기 3.3 오디오와 비디오 다루기

3 3.1 링크 달기 3.1.1 하이퍼텍스트와 링크 3.1.2 문서간 이동 3.1.3 문서 내 특정 위치로 이동
3.1.4 <iframe>으로 다른 문서의 내용 표시 하기

4 하이퍼텍스트/하이퍼미디어 HTML(HyperText Markup Language) HTML의 기본 개념
하이퍼텍스트의 마크업 언어 HTML의 기본 개념 하이퍼텍스트 : 서로 연관된 문서나 텍스트 조각들을 연결 하이퍼미디어 : 텍스트 뿐 아니라 이미지, 그래픽, 오디오, 비디오 등의 멀티미디어 정보가 서로 연결 하이퍼텍스트/하이퍼미디어의 구조 각 정보의 조각은 링크에 의해 서로 연결 모든 정보의 접근은 연결 링크를 선택하여 내비게이션

5 노드, 링크, 앵커 노드, 링크, 앵커의 개념 HTML 문서에서 사용되는 링크의 종류
링크 : 노드를 연결하여 내비게이션이 가능토록 하는 구성요소 앵커 : HTML 문서 내에서 링크의 출발점이나 도착점을 의미 앵커 영역 : 앵커가 설정되어 있는 영역 HTML 문서에서 사용되는 링크의 종류 특정 단어나 문장, 혹은 이미지에서 다른 문서로 이동하는 링크 외부 URL로 연결하는 링크 문서 내의 다른 지점으로의 링크

6 문서간 이동 <a> <a> 요소 : 링크의 시작점 앵커를 표현
href 속성 : 이동하고자 하는 목적지 문서의 파일 주소(URL)를 지정 title 속성에는 말풍선 창에 나올 설명을 기입 <a href=”파일이름 혹은 URL 주소” title=”설명”> 링크 텍스트 </a>

7 href 속성 : 이동하고자 하는 문서의 위치 지정
절대 주소 : 다른 웹 사이트의 문서로 이동 href 속성에 시작하는 URL 형식의 인터넷 주소 기입 <a href=“ 사무국(kor) 방문</a> 상대 주소 현재의 문서와 같은 폴더의 위치에서부터 상대주소로 링크  <a href=“booklist.html”>책 목록</a> 클릭

8 title 속성 하이퍼링크에 대한 설명을 하고 싶을 때 사용 하이퍼링크 위에 마우스를 가져가면 말풍선에 설명 등장
<a href=" title ="W3C 대한민국 사무국"> W3C 사무국(kor) 방문</a>

9 링크 예제 (1) : 문서간 이동하기 [예제 3-1] 문서간 이동 링크 (ex301_external.html) - 70쪽 클릭

10 문서 내 특정 위치로 이동 <a> 동일한 문서 내에서 특정 지점으로 연결 목적지인 특정 지점은 일종의 책갈피 링크
예를 들어, 목차를 선택하면 원하는 책갈피 위치로 바로 간다 문서가 길 경우 사용하면 효과적 목적지 앵커의 설정 <a id=“고유아이디”> 문서 내 이동할 목적지 </a> 시작점 앵커의 설정 <a href = “#고유아이디”> 링크 설정된 ‘고유아이디’ 위치로 이동</a> [노트: id 속성 사용] 이전 버전의 HTML에서는 name 속성을 사용 HTML5에서는 name 속성 대신 id 속성을 사용 권장

11 링크의 목적지 앵커 지정: <a id=”…”>
이름을 지정하는 것이므로 <a> 와 </a> 사이에 텍스트 필요 없음 예) <a id="book001"></a> <li>멀티미디어 배움터 2.0</li> 시작점 앵커에서 링크 연결: <a href=”#…”> href 속성에 목적지 앵커의 아이디를 지정 목적지 앵커에서 아이디 설정할 때는 이름만 기입 아이디를 이용할 때는 #으로 시작 예) <a href="#book001">최윤철, 임순범 공저, 멀티미디어 배움터2.0</a>

12 링크 예제 (2) : 문서 내 위치로 이동 [예제 3-2] 문서 내 이동 링크
(ex302_internal.html) – 72쪽

13 실행결과 <a id=”…”> <a href=”…”> <a id=”…”>

14 <iframe>으로 다른 문서의 내용 표시
브라우저 페이지 내에 또 다른 브라우저 페이지 프레임을 삽입 여기에서 링크된 문서의 내용을 확인 <iframe src=“내부 프레임에 출력할 파일 경로”></iframe> <iframe> 요소의 속성 : src, width, height, name <iframe src =”파일주소” width=”폭” height=”높이” name=”이름”></iframe> src 속성 : 내부 브라우저 내부 프레임에 출력할 파일의 url 지정 width와 height 속성 : 브라우저 프레임의 가로, 높이 크기 name 속성 : 브라우저 프레임의 이름 <a> 요소의 target 속성에 <iframe>의 이름을 지정 

15 [예제 3-3] 링크 결과 iframe에서 보기 (ex303_iframe.html) – 75쪽

16 실행결과 <a href=”…” target=”intro”> <iframe name=”intro”>

17 3.2 이미지 사용하기 3.2.1 이미지 파일 종류 3.2.2 이미지 삽입

18 이미지 파일 종류 GIF(Graphic Interchange Format)
JPEG, PNG에 비하여 파일 크기가 작다 표현 가능 색상이 256개이므로 자연스러운 장면에는 부적합 사진이 아닌 클립아트나 드로잉 같은 종류의 이미지에 적합 JPEG(Joint Photographic Experts Group) 24비트의 칼라를 사용하므로 수백만 개의 색상을 표현 복잡한 그림이나 사진 등 색상을 많이 사용하는 이미지에 적합 PNG(Portable Network Graphic) GIF와 JPEG 형식의 장점, 비압축 형식인 BMP 형식의 장점도 고려 24비트(또는 32비트) 칼라를 사용

19 압축률 비교

20 이미지 삽입 <img> <img> 요소의 src, width, height 속성
<img src=“파일이름” width=”크기” height=”크기” alt=”대체 텍스트”> <img> 요소의 src, width, height 속성 src 속성 : 이미지 파일의 이름을 지정 width와 height 속성 : 크기를 조정하고 싶을 때 사용 src 속성 : 파일의 경로 + 파일 이름 예 <img src ="images/multimedia.jpg">멀티미디어 배움터 <img src ="images/multimedia.jpg" width="70">멀티미디어 배움터 <img src ="images/multimedia.jpg" width="70" height="50">멀티미디어 배움터

21 <img> 요소의 alt 속성 “alternate text(대체 텍스트)”의 약어 이미지에 대한 설명 텍스트를 지정
화면에 이미지를 로드 못할 경우 그 위치에 텍스트가 대신 출력 이미지 파일의 주소가 잘못되거나 , 인터넷 연결이 너무 느려서 미처 이미지를 표시하지 못하는 경우 등 예, <img src ="multimedia.jpg" alt=" 책표지" >멀티미디어 배움터 [노트: <img>의 align 속성] 이전 버전의 HTML 에서는 <img> 요소의 align 속성으로 이미지 위치를 정렬 HTML5에서는 <img> 요소에서 CSS 스타일지정으로 위치를 설정하도록 권장

22 <figure>, <figcaption>
그림, 사진, 다이어그램과 텍스트 등의 콘텐츠를 함께 묶어서 하나의 독립된 단위로 취급하고 싶을 때 사용 <figcaption> 요소 <figure> 요소를 위한 제목을 표현, <figure> 요소 내에 위치 이미지에 하이퍼링크 연결 <a href =”링크할 곳의 파일이름”><img src=”이미지 파일이름”></a> <figure> <p>멀티미디어 배움터 2.0</p> <img src="multi.jpg" alt="책표지" width="70"><br> <figcation>[그림 1] 책 소개</figcaption> </figure>

23 이미지 삽입 예제 [예제 3-4] 이미지 삽입 예제 (ex304_images.html) – 81쪽

24 실행결과 <a href=”…”>

25 3.3 오디오와 비디오 다루기 3.3.1 지원하는 오디오/비디오 파일 형식 3.3.2 오디오 삽입하기
3.3.3 비디오 삽입하기

26 지원하는 오디오/비디오 파일 형식 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의 동영상에 사용하기 위해 최근에 개발

27 웹브라우저에서 오디오/비디오 코덱의 지원 현황

28 오디오 삽입하기 <audio>
<audio controls autoplay src="재생할 사운드 파일 이름”> src 속성 : 사운드 파일 이름을 지정 controls 속성 : 기본적인 미디어 제어기를 표시할 지 여부를 지정 autoplay 속성 : 파일이 로드되자마자 자동으로 재생시킨다는 의미 loop 속성 : 사운드를 반복 재생시킬 횟수를 지정 예, [예제 3-5] 오디오 삽입 예제 1 (ex305_audio1.html) – 85쪽

29 <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>

30 오디오 예제 : <audio>와 <source>
[예제 3-6] 오디오 삽입 예제 2 (ex306_audio2.html) – 87쪽

31 <audio> 요소의 preload 속성
미리 로드되어야 하는지의 여부를 지정 preload 속성값 auto(기본값) : 페이지를 로드하고 바로 오디오 파일을 다운로드 metadata : 사용자가 재생 시키기 전까지는 오디오의 크기, 관련 정보 등과 같은 메타데이터만 다운로드 none : 재생을 시작 하기 전까지 오디오 파일을 다운로드 안함

32 비디오 삽입하기 <video>
<video controls src="비디오 파일 이름" width="폭" height="높이" > <video> 요소의 속성 src, controls, loop, autoplay 속성: <audio> 요소의 속성과 동일 width, height 속성: 화면에서 비디오가 표시될 영역의 크기를 설정 videoWidth, videoHeight 속성: 비디오 자체의 너비와 높이를 반환 Poster 속성: 동영상이 로딩되고 있을 때 보여줄 이미지를 지정 preload 속성: 브라우저가 미리 동영상을 로딩 할 지 지정

33 비디오 예제 1: 비디오 삽입 [예제 3-7] 비디오 예제 1 (ex307_video1.html) – 89쪽

34 비디오 미리 로딩하기 preload 속성 auto(기본값) : 웹브라우저가 페이지를 로드하고 바로 비디오 파일을 다운로드
metadata : 사용자가 재생 시키기 전까지는 비디오의 크기, 첫 프레임, 비디오 관련 정보 등과 같은 메타데이터만 다운로드 none : 재생을 시작 하기 전까지 비디오 파일을 다운로드 안함

35 비디오 예제 2: 비디오 미리 로드 [예제 3-8] 비디오 예제 2 (ex308_video2.html) – 91쪽