DAY 79. HTML - 멀티미디어 태그, 하이퍼링크 태그

 

멀티미디어 관련 태그

이미지 태그

<img/>

웹 페이지에 사진이나 그림을 삽입할 때 사용하는 태그

 

<속성>

• src : 삽입할 이미지 경로를 지정하는 속성
• alt : 이미지가 출력이 안되면 설명 문구를 출력한다.
• width, height : 이미지의 크기를 설정

 

<map></map>, <area>

이미지를 구역 별로 나누어 링크를 걸어주는 태그

<img>태그에 usemap 속성을 지정해야 한다.

 

<img sr="경로" usmap="#tt">
<map name="tt">
		<area shap="모양" coords="시작위치, 끝위치" href="링크경로" target="위치">
</map>

 

<audio></audio>

웹 브라우저에서 플러그인 없이 음악 재생이 가능하게 하는 태그

<속성>

• src : 음악 파일의 경로 지정
• controls : 재생 도구 출력 지정
• autoplay : 자동 재생 여부 지정(모바일에서 적용 안됨)
• loop : 반복 여부 지정
• preload

1. none : 미리 다운로드 하지 않는다.
2. metadata : 기본 정보는 가져온다. (크기, 첫 프레임, 오디오 길이 등)
3. auto : 미리 다운로드 한다.

<video></video>

웹 브라우저에서 플러그인 없이 미디어 재생이 가능하게 하는 태그

 

<속성>

• poster : 재생 전 출력할 이미지 출력 / 경로 입력
• width, height

 

---

 

하이퍼링크 관련 태그

<a></a>

페이지에서 해당 부분을 클릭하면 지정된 페이지로 이동하는 태그이다.

외부 사이트 연결, 문서 내부에서 이동이 가능하다.

 

<속성>

• href : 링크한 페이지의 id 값이나 사이트 주소를 지정한다.
• target : 링크 페이지가 표시될 위치(새 창, 현재 창)를 지정한다.
• download : 링크한 페이지를 표시하지 않고 다운로드 한다.
• rel : 현재 페이지와의 관계를 지정한다.
• hreflang : 링크한 페이지의 언어를 지정한다.
• type : 페이지의 파일 유형을 지정한다.

<!-- 문자 -->
<a href="주소">
		링크표시 문구
</a>

<!-- 이미지 -->
<>
<>

<!-- 내부에서 이동하기 -->
<p id="p1"></p>

<a href="#p1">
		링크 표시 문구
</a>