HTML | Media & Meta

크롱·2023년 2월 27일
0

HTML

목록 보기
4/6

📒 Media files

📌 Audio

<audio src="음악파일위치" controls></audio>

👉 결과 : controls 속성 - ui 생성


<audio src="음악파일위치" loop autoplay></audio>
  • loop : 반복재생
  • autoplay : 자동재생 (ex. 사이트 들어가자 마자 재생됨)



<audio controls> 
 <source src="파일 이름.wav 및 경로" type="audio/wav"/>
 <source src="파일 이름.mp3 및 경로" type="audio/mpeg"/>
 <source src="파일 이름.ogg 및 경로" type="audio/ogg"/>
</audio>

👉 여러개를 넣어도 하나만 뜸 : 안되는 브라우저를 위해 여러 종류의 파일넣음




📌 Video

  • Audio 랑 문법은 같다
<video controls src="#"></video>

👉 결과 :



👇 비디오도 브라우저를 위해 여러 종류의 파일을 넣기도 한다.

<video controls autoplay> 
 <source src="파일 이름.mov 및 경로" type="video/mp4"/>
 <source src="파일 이름.mp4 및 경로" type="audio/mp4"/>
</audio>


📌 iframe

현재 HTML 문서에 다른 문서를 포함시킬 때 사용

<iframe src="https://www.youtube.com/watch?v=_kl3bcALyww" frameborder=0>
</iframe>


📌 abbr & address & pre

  • abbr
<p>
<abbr title="Posttraumatic Stress Disorder">PTSD</abbr>가 모에용?
</p>

👉 결과 :

PTSD가 모에용?


  • pre
<pre>
 ㅇ ㅏ ㄴ ㅕ ㅎ ㅏ ㅅ ㅔ ㅇ
   ㄴ    ㅇ            ㅛ
</pre>

👉 결과 :

 ㅇ ㅏ ㄴ ㅕ ㅎ ㅏ ㅅ ㅔ ㅇ
   ㄴ    ㅇ            ㅛ


📒 Meta

  • meta 태그 name에 따라 content를 써주면 된다.




출처: 김버그의 html & css 는 재밌다
profile
👩‍💻안녕하세요🌞

0개의 댓글