4장. 링크와 멀티미디어 표현하기
4.1 링크 달기
4.1.1 하이퍼텍스트와 링크
- 하이퍼텍스트
: 서로 연관된 문서나 텍스트 조각들을 연결하여 원하는 정보를 찾아갈 수 있도록 해주는 것 (노드와 링크로 표현)
- 하이퍼미디어: 텍스트 뿐아니라, 이미지, 그래픽, 오디오, 비디오 등의 멀티미디어 정보가 연결
- 노드: HTML 문서나 멀티미디어 정보를 표현하는 기본단위
- 링크: 노드를 연결하여 내비게이션이 가능하도록 하는 구성요소
- 앵커: HTML 문서 내에서 링크의 출발점이나 도착점을 의미
- 앵커 영역: 앵커가 설정되어 있는 영역
<HTML 문서에서 링크의 종류>
외부문서 연결 & 문서 내 다른 지점 (책갈피)
4.1.2 문서 간 이동
<a href=”주소” title="하이퍼링크 설명">숙명여자대학교</a>
- title 속성: 하이퍼링크에 설명을 하고 싶을 때 사용
- target 속성: 연결된 웹 문서를 여는 위치를 지정
- _self : 현재 창에서 열기(기본값)
- _blank : 새 창 또는 새 탭에서 열기
- _parent : 부모 프레임 창에서 열기
- _ top : 최상위 프레임 창에서 열기
- 프레임 이름 : 이름이 지정된 프레임 위치에서 열기
4.1.3 문서 내 특정 위치로 이동
- 책갈피 링크 : 동일한 문서 내에서 특정 지점으로 연결 방법
- 링크가 설정된 시작점
<a href="#고유아이디">시작점 링크</a>- 문서 내 이동할 목적지
<a id="고유아이디"></a>
4.2 이미지 사용하기
4.2.1 이미지 파일 종류
- GIF (드로잉 압축률 가장큼)
- JPEG, PNG에 비해 대체로 파일 크기 작다.
- 표현 가능 색상 256개 → 자연스러운 장면에는 부적합
- 사진이 아닌 클립아트나 드로잉 종류 이미지에 적합
- JPEG (색상 사진 압축률 가장 큼)
- 24비트의 칼라 → 수백만 개의 색상 표현
- 복잡한 그림이나 사진 등 색상 많이 사용하는 이미지에 적합
- PNG
- GIF와 JPEG 형식의 장점, 비압축 형식인 BMP 형식의 장점도 고려
- 24비트 (또는 32비트) 칼라를 사용
4.2.2 이미지 삽입
- 이미지 삽입 : <img> 요소
<img src="파일 이름" width="가로크기" height="세로크기">
- src, width, height 속성
- src 속성: 이미지 파일 이름 지정
- width 속성, height 속성: 이미지 크기 조정 (지정하지 않으면 이미지 본래 크기로)
- alt 속성 : 이미지에 대한 설명 텍스트
- <figure> 요소 : 그림, 사진, 다이어그램과 텍스트 등의 콘텐츠를 함께 묶어서 하나의 독립된 단위로 취급할 때 사용. (독립된 단위 → 제거하더라도 콘텐츠 흐름 영향 X)
- <figcaption> 요소 : <figure> 요소 제목 표현, <figure> 요소 내에 위치
<figure>
<table>
<tr>
<td><a href="book01.html"><img src="book01.jpg" alt="책표지" width="75"></a></td>
</tr>
</table>
<figcaption>[그림 1] 책소개</figcaption>
</figure>
4.3 객체 포함하기
4.3.1 <iframe>으로 문서 삽입하기
- <iframe> 요소: 브라우저 페이지 내에 또 다른 페이지 프레임을 삽입
- src 속성 : 내부 프레임에 출력할 파일의 url 지정
- width, height : 브라우저 프레임의 가로, 높이 크기
- name 속성 : 프레임의 이름
- <a> 요소의 target 속성에 <iframe> 이름을 지정
<iframe src="파일주소" width="폭" height="높이" name="이름"></iframe>
4.3.2 오디오/비디오 파일 종류
4.3.3 오디오 삽입하기
- <audio> 요소
- src 속성: 사운드 파일 이름
- controls 속성: 기본적인 미디어 제어기를 표시할 지 여부
- autoplay 속성: 파일이 로드되자마자 자동으로 재생시킨다는 의미
- loop 속성: 사운드를 반복 재생시킬 횟수
<audio controls autoplay src="재생할 사운드 파일 이름" loop="반복횟수"(autoplay)>
- <audio> 요소의 preload 속성 : 미리 로드되어야 하는지의 여부 지정
- preload 속성값
- auto(기본값): 페이지를 로드하고 바로 오디오 파일을 다운로드
- metadata: 사용자가 재생시키지 전까지는 오디오의 크기, 관련 정보 등과 같은 메타데이터만 다운로드
- none: 재생을 시작하기 전까지 오디오 파일을 다운로드 안함
- preload 속성값
- <source> 요소와 같이 사용하기 : 웹 브라우저에서 오디오 파일이 지원되지 않는 경우를 대비
4.3.4 비디오 삽입하기
- <video> 요소
- <audio> 요소의 속성과 동일
- poster 속성: 동영상이 로딩되고 있을 떄 보여줄 이미지
<video controls src="비디오 파일 이름" width="폭" height="높이">
- <video> 요소의 preload 속성 : 미리 로드되어야 하는지의 여부 지정
- preload 속성값
- auto(기본값): 페이지를 로드하고 바로 비디오 파일을 다운로드
- metadata: 사용자가 재생시키지 전까지는 비디오의 크기, 첫 프레임, 관련 정보 등과 같은 메타데이터만 다운로드 (페이지 로드 시 처음부터 비디오가 나타남)
- none: 재생을 시작하기 전까지 비디오 파일을 다운로드 안함 (페이지 로드 시 처음에는 비디오가 안 나타남)
- preload 속성값
'Web > HTML+CSS+JS' 카테고리의 다른 글
| [자바스크립트의 시작] Javascript 함수 (0) | 2023.05.03 |
|---|---|
| 웹프로그래밍첫걸음 5장. 폼 활용하기 (0) | 2023.05.01 |
| 웹프로그래밍첫걸음 3장. 문서 구조 표현하기 (0) | 2023.05.01 |
| 웹프로그래밍첫걸음 2장. HTML5 문서 기본 이해하기 (0) | 2023.05.01 |
| [자바스크립트의 시작] Javascript 제어문 (0) | 2023.03.29 |