2024.08.09. HTML - 비디오태그, 오디오태그, a 태그

* 비디오 태그, 오디오 태그

- object, embed : ~ HTML4 까지 사용함. 
<object> : 주로 pdf 파일 올릴 때 사용함. 아직도 사용하는 곳이 있다.
<embed> : 브라우저중에서 object 못 사용하는 태그에서 사용했음. 음악만 가능함.
- video, audio : HTML5 ~ 현재까지 사용중.
  controls : 플레이 컨트롤 나오려면 controls 가 있어야 함.
  autoplay : 자동재생이 되어야하지만 구글에서는 자동재생이 안되도록 되어있다.
  loop : 반복재생
  muted : 음소거를 하면 autoplay 가 적용이 된다.
  poster : 썸네일 

- [ <video>, <audio> 태그 사용예시 ]

<audio src="medias/spring.mp3" controls autoplay loop muted>

* a태그 : 하이퍼링크 역할을 하는 태그

- target 속성 : 연결한 내용이 표시될 위치, 현재창을 할지, 새창을 할지 등을 지정, 
   _self : 기본값, 자기창
   _blank : 새창이나 새탭에서 열림.
   _parent 현재 프레임의 부모 프레임에서 새웹페이지가 열fla.
   _top : 최상위 프레임에서 열림.

- [ <a> 태그 target 속성 사용예시 ]

<a href="image.html" target="_blank">

 

- [ <a> 태그 download 속성 사용예시 ]

<a href="image1/top.jpg" download>top.jpg download</a>
<a href="medias/product.pdf" download="pdf">product 다운로드(클릭)</a> 
<!-- 다운로드 파일 이름 지정한 것으로 받아짐. 파일이 pdf.pdf 이름으로 다운로드 됨.-->

- 앵커 : 현재문서 내에서 특정 위치로 이동하는 하이퍼링크. ex.나무위키 각주
   [ <a> 태그의 앵커 속성 사용예시 ] 

<태그 id="앵커명">표시할 내용</태그><!-- 문서내에서 찾아갈 위치의 태그를 정해서 태그의 id 속성을 지정.-->
<a href="#앵커명">표시할 내용</a><!-- 동일한 이름의 id속성값을 찾아서 이동. -->

<a href="#top">처음으로</a><!-- 문서의 맨위로 이동 -->

 

* 그 외 잡지식.   - href="#~" 같은 문서 내에서 이동함.   - id는 같은 이름이 여러개 있을 수 없다.   - class는 같은 이름 여러개 가능함.