HTML 정리 3
HTML 정리
<video>
<video> 태그는 무비 클립(movie clip)이나 비디오 스트림(video stream)과 같은 비디오를 정의할 때 사용합니다.
<track>
<track> 태그는 <audio>나 <video> 요소와 같은 미디어 요소를 위한 텍스트 트랙(text track)을 정의할 때 사용합니다.
<video
src="./media/video.MOV"
width="320px"
height="240px"
poster="./img/sample.jpeg"
controls
muted
loop
></video>
<br />
<video src="./media/video.MOV" width="320px" height="240px" controls>
<track
kind="subtitles"
src="./media/video.en.vtt"
srclang="en"
label="영어"
/>
<track
kind="subtitles"
src="./media/video.de.vtt"
srclang="de"
label="독일어"
/>
</video>
<audio>
<audio> 태그는 음악이나 오디오 스트림과 같은 사운드를 정의할 때 사용합니다.
controls속성을 주어야 화면에 플레이어가 나오게 된다.
사용할수 있는 속성
속성명 속성값 설명 autoplay autoplay 오디오가 실행될 준비가 끝나는 대로 자동으로 실행됨을 명시함. controls controls 플레이 버튼이나 정지 버튼과 같이 오디오의 실행을 제어할 수 있는 제어기가 표시됨을 명시함. loop loop 오디오의 재생이 끝나면 자동으로 또다시 재생됨을 명시함. muted muted 오디오의 음성 출력이 음소거됨을 명시함. preload auto, metadata, none 페이지가 로드될 때 오디오 파일이 같이 로드되어야 하는지 여부와 그 방법을 명시함. src URL 오디오 파일의 위치(URL)를 명시함.
<audio src="./media/audio.mp3" controls></audio>
<audio src="./media/audio.mp3" preload="none"></audio>
<map>
<map> 태그는 클라이언트 사이드 이미지맵(client-side image-map)을 정의할 때 사용합니다.
이미지맵(image-map)은 클릭할 수 있는 영역을 가지는 이미지를 의미합니다.
<area> 요소는 이러한 이미지맵의 클릭할 수 있는 영역을 정의하는데 사용되며, 하나 이상의 <area> 요소를 포함
필수 속성인 name 속성은 <img> 요소의 usemap 속성과 결합하여, 이미지(image)와 맵(map) 사이의 관계를 설정
Image Map을 쉽게 만들 수 있는 사이트 : http://www.image-map.net/
<img src="./img/ikea.png" usemap="#image-map" />
<map name="image-map">
<area
target=""
alt="솜마르플레데르 식탁보"
title="솜마르플레데르 식탁보"
href="https://www.ikea.com/kr/ko/p/sommarflaeder-tablecloth-patterned-red-light-beige-40523035/"
coords="377,765,18"
shape="circle"
/>
<area
target=""
alt="쉰쇠 야외의자"
title="쉰쇠 야외의자"
href="https://www.ikea.com/kr/ko/p/sundsoe-chair-outdoor-grey-80509315/"
coords="574,559,18"
shape="circle"
/>
</map>
<iframe>
최근 추세는 <iframe>을 사용하지 않는 것을 권고한다.
React, Vue, Anguler iframe을 사용하지 않는다.
Java, JSP는 iframe을 사용한다.
<iframe> 태그는 인라인 프레임(inline frame)을 정의할 때 사용합니다.
인라인 프레임은 현재 HTML 문서에 다른 문서를 포함시킬 때 사용합니다.
고정 메뉴를 모든 페이지에 넣는건 비효율적이다.
body테그 상단에 iframe을 사용해 손쉽게 사용가능
ex.html
<div>
<a href="menu1.html">메뉴1</a>
<a href="menu2.html">메뉴2</a>
<a href="menu3.html">메뉴3</a>
<a href="menu4.html">메뉴4</a>
<a href="menu5.html">메뉴5</a>
</div>main.html
<div>
<iframe src="./ex.html" frameborder="0"></iframe>
</div>
실무에서는 반대로 사용하는 경우가 많다.
즉, body 테그 상단에 고정된 메뉴와 하단에 footer을 만들고 콘텐츠 부분을 iframe을 사용하는 방법을 많이 사용한다.
iframe의 src부분을 javascript를 사용하여 교체하는 방식을 사용.
<!-- <iframe> -->
<div>
<a href="menu1.html">메뉴1</a>
<a href="menu2.html">메뉴2</a>
<a href="menu3.html">메뉴3</a>
<a href="menu4.html">메뉴4</a>
<a href="menu5.html">메뉴5</a>
</div>
<div>
<iframe src="./iframe_menu1.html" frameborder="0"></iframe>
</div>
<div>footer area
