HTML5 시맨틱 태그와 멀티미디어

가은·2022년 7월 12일

HTML과 CSS

목록 보기

2/8

📍시맨틱 태그

시맨틱 태그는 작성한 소스를 보고 문서 내용을 정확히 알 수 있으며 '웹 접근성'을 고려하였을 때 중요하다.

header 태그 : 머리말 지정하기
▪️ header 태그는 특정 부분의 머리 말에 해당한다.
▪️ 주로 페이지 맨 위쪽이나 왼쪽에 삽입하며 헤더의 내용은 form 태그를 사용하여 검색 창을 넣거나 nav 태그를 사용하여 사이트 메뉴를 넣는다.

nav 태그 : 문서를 연결하는 내비게이션 링크
▪️ 동일한 사이트 안의 문서나 다른 사이트 문서로 연결하는 링크 모음을 나타낸다.
▪️ 내비게이션 매뉴나 푸터에 있는 사이트 링크 모음 부분에도 많이 사용된다.
▪️ 사용하는 위치의 영향을 받지 않아 다른 태그 안에 포함할 수도 있고 독립적인 사용도 가능하다.
▪️ 여러 nav 태그를 사용할 경우, id를 따로 지정해주면 스타일 시트에서 각 내비게이션에 맞게 스타일을 지정할 수 있다.

article 태그 : 콘텐츠 내용 넣기
▪️ 웹 상의 실제 내용을 넣는다.
▪️ 블로그의 포스트나 웹 사이트의 내용, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목 등이 해당된다.
▪️ article 태그를 적용한 부분을 떼어내 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 된다면 사용한다.

aside 태그 : 본문 이외의 내용 표시하기
▪️ 사이드바는 필수 요소가 아니므로 광고나 링크 모듬 등 문서의 메인 내용에 영향을 미치지 않는 내용들을 넣을 때 주로 사용한다.

ifame 태그 : 외부 문서 삽입하기
▪️ 웹 문서 안에 내용을 직접 입력하는 것이 아닌 다른 외부 문서를 삽입한다.
▪️ 웹 문서 안에 다른 웹 문서를 가져와 표시하는 것을 인라인 프레임(inline frame)이라고 하고 이를 삽입하는 태그가 iframe이다.

속성	설명
width	인라인 프레임의 너비
height	인라인 프레임의 높이
name	인라인 프레임의 높이
src	프레임에 표시할 문서의 주소 지정
seamless	프레임의 테두리를 없애 마치 본문의 일부처럼 보이도록 만들며 속성 값 없이 seamless라고 쓴다. (크롬과 사파리만 지원)

footer 태그 : 제작 정보와 저작권 정보 표시

address 태그 : 사이트 제작자 정보, 연락처 정보 나타내기
▪️ 주로 footer 태그 안에 사용되며 웹 페이지 제작자의 이름이나 제작자의 웹 페이지, 피드백을 위한 연락처 정보를 넣는데 사용한다.
▪️ 웹 사이트와 관련된 우편 주소도 포함한다.
▪️ 단순한 우편 주소를 표기할 용도라면 address 태그 보단 p 태그를 이용해 표시한다.

div 태그
▪️ 콘텐츠를 묶어 시각적 효과를 적용할 때 사용한다.
▪️ id, class 이름을 붙여 css와 연결하여 사용한다.

📍웹과 멀티미디어

플러그인 사용하기 (외부 파일 삽입)

object / embed 태그

속성	설명
date	외부 파일의 경로 지정
type	포함시킨 내용의 유형 지정
name	다른 요소와 구분할 수 있는 이름 지정
width, height	포함시킨 내용의 너비, 높이 값 지정

오디오 / 비디오 재생하기

audio 태그 : 오디오 파일 삽입하기

속성	설명
autoplay	오디오 자동 재생
controls	웹 화면에 컨트롤 막대 표시재생/멈춤, 진행 바, 볼륨 등 표시
loop	오디오 반복 재생
muted	오디오를 재생해 진행하지만 소리는 끔
preload	재생 버튼을 눌러 재생하기 전에 오디오 파일을 다운로드해 준비

video 태그 : 비디오 파일 삽입하기

<video src="비디오 파일 경로" [속성] [속성="속성값"]></video>

source 태그 : 여러 미디어 파일 한꺼번에 지정하기
▪️ 브라우저에 따라 지원하는 오디오/비디오 코덱이 다르기 때문에 다른 브라우저 사용자를 위해 모두 재생할 수 있도록 ogv 파일을 지정 해주어야 한다.

audio태그와 video태그의 속성

▪️ width, height 속성 : 비디오 크기 조절
▪️ controls 속성 : 컨트롤 막대 표시
▪️ preload 속성 : 파일 다운로드 여부

속성 값	설명
none	미디어 파일을 미리 다운로드하지 않고 사용자가 재생 버튼을 눌러야만 다운로드를 시작
metadata	미디어 파일을 즉시 사용하지 않을 것이라고 생각해 미디어 파일 전체를 다운로드하지 않고 메타 정보만 다운로드
auto	사용자가 즉시 이용할 수 있도록 웹 문서를 로드할 때 미디어 파일도 모두 다운로드가 끝나도 사용자가 재생 버튼을 눌러야 재생 (기본값)

▪️ muted 속성 : 소리는 끄고 화면만 재생
▪️ autoplay 속성 : 자동 재생
▪️ loop 속성 : 반복 재생
▪️ poster 속성 : 문제 상황 표시

track 태그 : 비디오 화면에 자막 추가하기 (외부 자막 파일 연결)

▪️ kind 속성 : 자막의 종류 지정

속성 값	설명
subtitles	자막 설정소리를 켤 수 있지만 이해할 수 없는 경우, 다른 언어로 번역한 자막일 경우 사용 (기본값)
captions	청각장애인용 자막이거나 소리를 들을 수 없거나 켤 수 없는 경우 사용
descriptions	비디오 콘텐츠에 대한 설명 (비디오 화면에 표시X)
chapters	비디오 탐색을 위한 장 제목 (비디오 화면에 표시X)
metadate	비디오 콘텐츠 정보 (비디오 화면에 표시X)

▪️ scr 속성 : 자막 텍스트의 파일 경로 지정
▪️ srclang 속성 : 사용한 언어 지정 (kind 속성 값이 subtitle이면 반드시 지정)
▪️ label 속성 : 자막이 여러 개일 경우, 자막을 식별할 수 있도록 제목을 달아줌
▪️ default 속성 : 자막 파일이 여러 개일 경우, 기본으로 사용할 자막을 default로 지정