공간, video, audio 태그

남자김용준·2021년 9월 1일
0

HTML

목록 보기
3/4

공간 태그

div, span 태그

HTML5가 나오기 전에는 div,span 태그가 공간 태그로 많이 사용되었다. 이는 공간 태그의 layout을 구성하는 데 사용된다.

HTML의 태그는 inline 형식과 block 형식으로 구분한다. inline 형식은 자기 자신의 내용만큼만 크기를 설정하고, block 형식은 가로 길이로 화면의 끝까지 크기를 설정한다.

div 태그는 block, span 태그는 inline 형식으로 지원한다. 그렇기 때문에 div 태그는 서로 같은 라인에 있지 못하고, span 태그는 서로 같은 라인 (가로 정렬)에 위치할 수 있다.

header 태그

HTML5엣거 등장한 태그로, header 영역을 구성할 때 사용한다. 웹에서 사용하는 header는 웹페이지의 상단을 뜻한다.

footter 태그도 HTML5에서 새로 생겼다. footer 영역은 웹페이지의 하단을 뜻한다.

nav 태그는 내비게이션 역할을 하는 링크들의 영역에 사용한다.

section 태그

section 태그는 서브 제목과 관련된 내용을 표시할 때 사용한다.

article 태그

article 태그는 신문기사를 작성하거나 블로그에 글을 작성할 때 사용된다.

video 태그

<video src="동영상 주소">
  웹브라우저가 HTML5의 video 태그를 지원하지 않을 때 출력할 내용
</video>

video 태그에는 여러 프로퍼티가 있다.

  • src : 비디오 파일의 주소
  • controls: 컨트롤러 표시 (재생, 멈춤, 슬라이드바, 볼륨, 음소거)
  • autoplay: 자동 재생
  • loop: 반복 재생
  • width: 영상의 가로 길이
  • height: 영상의 세로 길이
  • muted : 음소거
  • poster : 동영상의 대표 이미지

audio 태그

<audio>
  <source src="오디오 주소" type="audio/확장자">
</audio>
profile
frontend-react

0개의 댓글