본문 바로가기
  • 개발 / 공부 / 일상
HTML&CSS

(HTML) video, audio, etc Tags

by JJeongHyun 2023. 1. 9.
반응형

a 태그

  • 링크 관련 태그
  • style 속성에 css 명령어를 선언하지 않는다, 자식 태그로 스타일을 설정한다
  • href="이동할 주소" < 기본적으로 현재 주소를 기준, 다른 웹페이지로 이동하고 싶다면 해당 주소를 설정하면 된다
<a href="https://www.naver.com">
<a href="https://www.youtube.com" target="_blank">유튜브</a>

target="_blank" 설정을 해주면 새로운 탭이 생기면서 열린다

 

video 태그

  • src="해당 주소"
  • controls 속성은 영상의 컨트롤 박스를 출력 해 준다.
  • autoplay 속성은 영상이 로드가 완료 되면 바로 재생한다. 단점으론 해당 페이지가 로드완료 되자마자 재생되기에 욕이 나올 수 도 있다.
  • loop 속성은 영상을 반복하는 명령어 이다.
  • mute 속성은 음소거 기능을 설정할 수 있는 명령어이다.
<video src="./ì_¬ì_± - 58142.mp4" controls autoplay loop mute></video>


<iframe
      width="300"
      height="300"
      src="https://www.youtube.com/embed/_FwOMyE_jEQ"
      title="먼데이 키즈(Monday Kiz) - 흉터(Scar) M/V"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    ></iframe>

 

 

audio 태그

  • 아무 출력창 없이 배경음악처럼 재생하기 위한 명령어
  • controls 속성은 재생 on/off를 포함하여 여러 기본적인 기능들이 있는 제어 컨트롤창을 보여주며 명령어
<audio src="./goldn-116392.mp3" controls autoplay></audio>

태그들의 속성은 이름만 넣을 경우 값을 true로 설정한다. ←참/거짓의 값을 속성은 이름만으로 처리가 가능하다.

이름만 넣을 수 있는 속성들은 기본값으로 false이다.

즉, controls, autoplay 등 속성값을 주지 않는다면 기본 값인 false로 쉽게 말해 설정을 하지 않았다고 처리한다.

'HTML&CSS' 카테고리의 다른 글

(CSS) CSS & Link태그  (0) 2023.01.11
(CSS) padding, margin  (4) 2023.01.11
(HTML) Input 태그  (0) 2023.01.09
(HTML) form Tag  (0) 2023.01.09
(HTML) Table Tag  (0) 2023.01.09