[HTML]링크와 멀티미디어

링크

---

하이퍼텍스트와 링크

HTML의 기본 개념: HypertText + HyperMedia 

                         각 정보의 조각을 링크에 의해 연결

노드: HTML 문서/멀티미디어 정보를 표현하는 기본 단위

링크: 각 노드를 연결해 내비게이션이 가능하도록 하는 연결선

앵커: HTML 문서 내에서 링크의 출발점이나 도착점

 

특정 단어나 문장, 혹은 이미지 --> 다른 문서, 외부 URL, 문서 내 다른 지점

 

 

---

태그 <a>

링크의 시작점 앵커 표현

 

- 문서 간 이동

<a href="파일 이름/URL 주소" title="설명"> 링크 처리할 텍스트 </a>

 

href 속성: 이동하려는 목적지 문서의 파일 주소 지정

                                                  → 절대 주소(http://로 시작하는 URL 형식 인터넷 주소) + 상대주소(현재 문서와 같은 폴더 위치에서의 상대주소)

title 속성: 커서를 링크를 설정한 텍스트에 뒀을 때 나타나는 말풍선의 내용

 

- 문서 내 특정 위치로 이동

: 동일한 문서 내에서 목적지인 특정 지점에 대한 일종의 책갈피 링크

 

<a id="고유 아이디"> (목적지) </a>

id 속성: 문서 내의 원하는 위치에 목적지 앵커 설정 

 

<a href="#고유아이디"> 링크 텍스트 </a>

href 속성에서 #고유아이디로 연결시킬 부분 설정

 

(+)

target 속성: 링크를 클릭했을 때 창을 어떻게 열지 설정

    _self: 링크를 클릭한 해당 창에서 열기

    _blank: 새 창으로 열기

    _parent: 부모 창에서 열기(부모 창이 없을 경우 _self)

    _top: 전체 브라우저의 가장 상위 창에서 열기(없을 경우 _self)

---

이미지 사용

이미지 파일 종류

-GIF(Graphic Interchange Format)

-JPEG(Joint Photographic Experts Group)

-PNG(Portable Network Graphic)

---

이미지 삽입

<img>

<img src="파일명" width="크기" height="크기" alt="대체 텍스트">

 

src 속성: 이미지 파일 이름(삽입할 이미지를 같은 폴더에 저장하고 저장된 이름 지정)

width, height 속성: 삽입되는 이미지의 크기 조정

(width="100%"로 지정하면 삽입하는 이미지를 비율에 맞춰 채운다)

alt 속성: 이미지에 대한 설명 텍스트 지정(이미지 파일주소가 잘못되었거나 로딩이 느린 경우)

 

<figure>

그림, 사진, 다이어그램, 텍스트 등의 콘텐츠를 하나로 묶어 하나의 독립된 단위로 취급하고 싶을 때 사용하는 태그

 

<figcaption> 

<figure>의 하위 태그로, <figure>요소의 제목을 표현

 

---

오디오, 비디오

지원하는 오디오/비디오 파일

-Mp3: MPEG-1의 오디오 규격으로 개발된 형식(*.mp3)

-Wave: Microsoft와 IBM이 개발한비압축 방식의 오디오 형식(*.wav, *.wave)

 

-MPEG4: MPEG-4에서 규정된 비디오 파일형식, H.264 코덱 사용(*.mp4,m4v)

-Ogg: 스트리밍 방식의 멀티미디어 표현을 위한 공개 소스 기반 형식(*.ogg, *.ogv)

          오디오 코덱(Vorbis, FLAC 등)+비디오 코덱(Ogg Theora 등) 사용

-WebM:구글이 HTML5의 동영상에 사용하기 위해 개발한 형식(*.webm)

---

오디오 삽입

<audio>

<audio controls autoplay src="파일명">

 

src 속성: 재생할 사운드 파일 이름

controls 속성: 미디어 제어기 표시 여부

autoplay 속성: 파일 로드 시, 자동 재생 여부

loop 속성: 사운드 반복 재생 횟수

(+)

preload 속성: 미리 로드 되어야 하는지의 여부 지정

     auto: 기본값, 페이지를 로드하고 바로 오디오 파일 다운로드, 로딩

     metadata: 사용자가 재생시키기 전까지는 오디오 크기, 관련 정보 등 메타데이터만 다운로드

     none: 재생을 시작하기 전까지 오디오 파일 다운로드 안함

 

<source>

audio/video의 하위 태그로 사용

브라우저에서 해당 파일 형식을 지원하지 않는 경우를 대비해 미디어 타입이나 코덱에 따라 여러 형식으로 작성한 파일을 지정

<audio controls autoplay>
      <source src="song.mp3" type="audio/mp3">
      <source src="song.ogg" type="audio/ogg">
      <source src="song.wav" type="audio/wav">
      브라우저에서 &lt;audio&gt;요소, 혹은 mp3/ogg/wav를 지원하지 않습니다
</audio>

src 속성: 오디오 파일의 경로(파일명)

type 속성: MIME 형식 지정 (audio/mp3, audio/ogg, audio/wav)

 

오디오 파일을 로드 하기 전에 지정한 순서대로 재생 가능 여부를 확인하고 실행

---

비디오 삽입하기

<video>

<video controls src="비디오 파일 명" width="폭" height="높이">

 

src, controls, loop, autoplay 속성: <audio>의 속성들과 동일

width, height 속성: 화면에서 비디오가 표시되는 영역의 크기

videoWidth, videoHeight 속성: 비디오 자체의 너비와 높이

poster 속성: 동영상을 로딩할 때 보여줄 이미지 지정

preload 속성: 브라우저가 미리 동영상을 로딩할 지 여부

    auto: 기본값, 페이지를 로드하고 바로 비디오 파일 다운로드

    metadata: 비디오의 크기, 첫 프레임 등 메타데이터만 다운로드

    none: 재생 시작 전 까지 비디오 파일 다운로드 안함

 

---

객체 포함

---

다른 문서의 내용 표시

<iframe>

브라우저 페이지 내에 또 다른 페이지 프레임 삽입

<iframe src="파일주소" width="폭" height="높이" name="이름"> </iframe>

 

src 속성: 내부 프레임에 출력할 파일의 url 지정

width, height 속성: 브라우저 프레임의 크기 지정

name 속성: 프레임의 이름 지정

    → a태그의 target 속성에 iframe의 name 속성의 이름을 지정할 수 있음

---

외부 객체 포함하기

<object>, <embed>

주로 HTML 파일이 아닌 비디오, 오디오 등 외부 애플리케이션 파일을 포함할 때 사용

<embed width="폭" height="높이" src="삽입할 파일의 URL">

---

특정 콘텐츠 요소 포함하기

<canvas>

bitmap graphics 방식의 그림

화면 영역을 <canvas>로 정의하고 난 후, 정의된 영역에 자바스크립트 API를 이용해 그림 그리기

<canvas id="아이디" width="폭" height="높이"> </canvas>

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

vector graphics 방식의 그림 (SVG = Scalable Vector Grahpics)

그림을 그릴 영역의 크기를 정의하고 원하는 벡터 그래픽스 요소를 하위에 포함

<svg width="폭" height="높이"> (vector graphics 요소들) </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)-모두 m으로 시작하는 요소들

수식의 각 항목을 별도의 태그들로 표현

참고: ko.wikipedia.org/wiki/MathML

<mi>식별자(문자)</mi>

<mo>연산자</mo>

<mn>숫자</mn>

<mtext>텍스트</mtext>

<mfrac>분수</mfrac>

<msqrt>근호</msqrt> 또는 <mroot>근호</mroot>

<mfenced>괄호내부</mfenced>

등등...

 

[참고: HTML5 웹 프로그래밍 입문(개정판)]