방송대 HTML5웹프로그래밍 - 3강. 미디어, 시멘틱 요소

방송대 컴퓨터과학과/HTML5 웹프로그래밍

방송대 HTML5웹프로그래밍 - 3강. 미디어, 시멘틱 요소

꼽파 2023. 4. 19. 21:18

1. 미디어 표현

2. 시멘틱 요소

1. 미디어 표현

오디오를 재생하는 audio 요소

웹 페이지에서 오디오를 재생하기 위한 요소

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</audio>

</body>

</html>

오디오 형식

- MP3 (*.mp3)

- Wav (*.wav)

- Ogg (*.ogg, *oga)

속성

속성	설명
autoplay	웹 문서 로딩 시에 오디오를 자동으로 즉시 재생 여부
controls	오디오의 제어 버튼(재생, 일시정지, 볼륨 등) 표시 여부
loop	반복 재생 여부 * autoplay, controls, loop는 속성명만 사용함. 1) 속성명 / 2) 속성명 = "속성명" ex. loop="loop"
muted	음소거 여부
preload="값"	웹 페이지가 열릴 때 오디오의 로딩 방식 지정 • none : 재생 전까지 오디오 파일을 미리 로드하지 않음 • auto : (기본) 웹 페이지 로딩 시 바로 전체 파일을 자동으로 로드 • metadta : 재생 전까지 오디오의 메타 파일 (크기, 첫 프레임 등)만 로드 • autoplay 속성이 지정되면 preload 속성은 무시됨
src="URL"	재생할 오디오 파일의 URL

다양한 파일 형식을 지정하는 source 요소

하나의 미디어 소스에 대해 서로 다른 형식을 갖는 여러 개의 파일을 동시에 지정하기 위한 요소

audio/video 요소의 src 속성의 역할을 대신하는 것

가장 위에서 나열된 source 요소의 파일부터 차례대로 재생 가능 여부를 검사해서 재생

속성

scr="URL" → 재생할 미디어 파일의 URL

type="MIME형식" → "audio/mp3", "audio/wav", "audio/ogg" (파일을 받기 전에 형식을 미리 알려줌)

media="미디어 쿼리" → 파일을 위한 미디어 쿼리 지정

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Music by <a href="https://pixabay.com/ko/users/lexin_music-28841948/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=145636">Lexin_Music</a> from <a href="https://pixabay.com/music//?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=145636">Pixabay</a>

</audio>

</body>

</html>

</audio>

비디오를 재생하는 video 요소

비디오 재생을 위한 요소

audio 요소의 사용 방법과 거의 동일

</video>

비디오 형식

- MP4 (*.mp4)

- WebM(*.webm)

- Ogg(*.ogv)

속성

• audio 요소의 속성을 모두 그대로 사용

• autoplay, controls, loop, muted, preload, src

• width="픽셀", height="픽셀"

→ 화면에서 비디오 콘텐츠가 표시될 영역의 크기 (폭, 높이)

• poster="이미지 파일의 URL"

→ 지정한 비디오 데이터가 설정되어 있지 않거나 비디오가 로딩되는 동안에 보여 줄 이미지 지정

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<video src="GREEKYOGURT.mp4"

controls width="700" height="400" poster="20230411_180959.jpg">

현재의 브라우저는 video 요소를 지원하지 않습니다.

</video>

</body>

</html>

콘텐츠의 재생 구간 지정

• 미디어 콘텐츠를 재생할 때 특정 구간을 지정하여 재생

• audio/video 또는 source 요소의 src 속성을 이용해서 지정

• src="파일명"#t=[시작시간][,종료시간]"

* '[ ]' → 생략 가능

#t=[시:분:초][,시:분:초]	설명
src="a.mp4#t=1:20:32,2:05:00"	1시간 20분 32초 ~ 2시간 5분까지 재생
src="a.mp4#t=20,40"	20초 ~ 40초까지 재생
src="a.mp4#t=,30"	처음부터 30초까지 재생
src="a.mp4#t=30"	30초부터 재생 시작

현재의 브라우저는 video 요소를 지원하지 않습니다.

</video>

<video src="GREEKYOGURT.mp4#t=10,20"

controls width="700" height="400" poster="20230411_180959.jpg">

현재의 브라우저는 video 요소를 지원하지 않습니다.

</video>

2. 시멘틱 요소

시멘틱 요소

• semantic = 의미 있는, 의미의

• 표현 중심이 아닌 의미 있는 구조의 문서 작성을 위한 요소

• HTML 문서에 의미 부여가 가능

- 사람이 읽고 이해하는 것이 용이

- 검색 엔진, 문서 해석기 등에 의한 자동적인 문서 처리/해석도 가능

• 문서 구조화 : header, nav, section, article, aside, footer

• 블록 요소 : main, figure ~ figcaption, details ~ summary

• 인라인 요소 : time, meter, progress, ruby ~ rt, wbr

기존의 문서 구조화 방식

div : 여러 요소를 담아 놓는 콘테이너 역할

문서 구조화를 위한 요소

header	머리말(로고, 사이트 이름 등)을 나타내는 요소
nav	메뉴 영역을 나타내는 요소
section	제목/주제별로 나눌 수 있는 문서의 내용 영역을 구성하는 요소
article	개별 콘텐츠를 나타내는 요소
aside	좌우측의 보조 콘텐츠 영역을 나타내는 요소
footer	꼬리말(제작자 정보 및 저작권 정보 등)을 나타내는 요소

머리말과 꼬리말을 담는 header, footer 요소

header 요소	머리말 : 사이트 이름, 로고와 소개 정보 등
footer 요소	꼬리말 : 제작자 정보, 저작권 정보, 연락처 등
header & footer 요소	위치 무관 내용 중간(section/article)에서 사용되는 경우 → 머리글/바닥글 역할 section, header, footer 요소 포함 불가

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</section>

</body>

</html>

nav 요소

navigational links 영역

주로 웹 페이지 전체에 적용되는 상단의 메뉴를 표시하기 위한 링크를 모아 놓은 곳

→ 페이지의 모든 링크를 포함하는 것은 아님

aside 요소

주요 콘텐츠 이외에 남아 있는 콘텐츠나 참고가 되는 콘텐츠 등을 나타낼 때 사용

본문과는 직접 관련이 없지만 링크나 관련 정보를 표현

주로 웹 페이지의 왼쪽 또는 오른쪽에 위치

nav 요소

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<nav>

<ol>

⋯ 지식iN, 쇼핑, 사전, 뉴스, 증권, 부동산 ⋯

</ol>

</nav>

</body>

</html>

내용 영역 section, 개별 콘텐츠 article 요소

section 요소

하나의 주제로 구성된 문서의 내용 영역을 표현

하나의 section 요소에는 오직 하나의 헤딩 요소(h1~h6)만 사용

article 요소

독립적으로 분배 및 재사용이 가능한 개별 콘텐츠(뉴스 기사, 블로그 포스트 등)을 나타낼 때 사용

section 요소와 분리하여 개별적으로 사용 가능

→ article 요소 안에 section 또는 article 요소 포함 가능

section 요소

하나의 주제 안에 다른 세부 주제가 존재하는 경우

하나의 요소에 2개 이상의 헤딩 요소가 사용된 경우

헤딩 요소의 레벨에 따라 묵시적으로 결정

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<nav>

제목1의 본문 내용

</section>

제목 2의 본문 내용

</section>

제목1의 본문 내용

제목 2의 본문 내용

</section>

</ol>

</nav>

</body>

</html>

시멘틱 블록 요소

주요 콘텐츠 블록을 지정하는 main 요소

삽입 그림을 블록화하는 figure 요소

하위 요소 : figcaption

세부정보를 선택적으로 표시하는 details 요소

하위 요소 : summary

주요 콘텐츠 블록을 지정하는 main 요소

문서 body 영역의 주요 콘텐츠 블록을 지정할 때 사용

문서 전체에서 반복적으로 사용되는 콘텐츠는 포함 불가

- 사이드바, 내비게이션 링크, 저작권 정보, 사이트 로고, 검색 폼 등

문서에서 유일한 부분을 의미 → 오직 한 번만 사용

문서의 전체적인 레이아웃에는 영향을 주지 않음

article, aside, header, footer, nav 요소의 하위 요소로 사용 불가

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>HTML, CSS, JavaScript</p>

</article>

</article>

<h3>JavaScript</h3> <p>ES6, 2015</p>

</article>

</section>

</main>

</body>

</html>

삽입 그림을 블록화하는 figure 요소

본문에서 삽입된 독립적인 콘텐츠(그림, 다이어그램, 사진, 소스 코드, 동영상 등)를 하나로 묶어 블록을 형성하고, 캡션을 포함시켜 서로의 관계를 명확히 구조화시킬 때 사용

요소의 위치는 주요 콘텐츠와 독립적

→ 삭제하더라도 문서의 흐름에는 아무런 영향을 주지 않음

figcaption 요소figure 요소에 대한 캡션을 표시하는 자식 요소위치 : figure 요소 바로 다음 또는 맨 마지막

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p> figure 요소는 본문에 삽입된 그림, 다이어그램,

사진, 소스코드, 동영상 등과 같은

독립적인 콘텐츠를 블록화할 때 사용 </p>

<figcaption>그림1. 맛있는 그릭요거트</figcaption>

</figure>

</body>

</html>

세부정보를 선택적으로 표시하는 details 요소

사용자의 요구(핸들(▶) 클릭)에 따라 추가적인 세부정보를 보여주거나 숨기는 형태의 상호작용을 지원하는 요소

세부정보는 어떤 종류의 콘텐츠도 가능

open 속성 → 세부정보가 사용자에게 보여지도록 지정

summary 요소

세부정보에 대한 캡션을 지정하는 details 요소의 자식 요소

캡션의 클릭을 통해서도 세부정보의 표시 여부의 선택이 가능

미사용 → "세부정보"라는 기본 제목 표시

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>웹페이지의 구조와 내용 정의</p>

</details>

<p>웹페이지의 출력 모양 지정</p>

</details>

<summary>JavaScript</summary>

<p>웹페이지의 동작을 프로그래밍</p>

</details>

</body>

</html>

시멘틱 인라인 요소

시간/날짜를 지정하는 time 요소

주어진 값이나 비율을 나타내는 meter 요소

작업의 진행률을 나타내는 progress 요소

루비 주석을 지정하는 ruby 요소

- 하위요소 : rt

줄바꿈의 허용 위치를 지정하는 wbr 요소

시간/날짜를 지정하는 time 요소

시간/날짜 표현에 의미를 부여하기 위한 요소 (컴퓨터는 2023-03-01이 날짜인지 모름)

datetime 속성 : 시스템이 인식할 수 있도록 정확한 형식의 시간/날짜를 지정

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>기상 시간은 <time>07:00</time>이며,

취침 시간은 <time>23:00</time>입니다.</p>

2014년 말

</time>에 발표되었다</p>

</body>

</html>

주어진 값이나 비율을 나타내는 meter 요소

일정 범위 안의 측정값이나 분포 비율 등을 표시할 때 사용

측정기 gauge : 현재 디스크 사용량과 같이 일정 시점에서 주어진(정적인) 양을 표시

속성

value : (필수) 실제로 측정한 현재의 값

min, max : 요소가 인식하는 최소값(0.0)과 최대값(1.0)

low, high : 허용되는 범위의 최소값/최대값 (min ≤ low ≤ high ≤ max)

optimum : 최적의 값

<body>

<p> 지방선거 투표율

</p>

작업의 진행률을 나타내는 progress 요소

작업의 현재 진행 정도를 나타낼 때 사용

파일 복사, 다운로드 등과 같이 동적으로 변하는 작업의 진행 정도를 표현할 때 유용

속성

- value : 완료된 작업의 양을 나타내는 현재 상태의 값 (0.0 ~ 1.0 또는 0.0 ~ max)

- max : 작업에 필요한 작업량의 최대값 (1.0)

<body>

파일 다운로드 상태:

</body>

현재 진행 중인 상태의 값(value)의 지속적인 업데이트가 필요

→ 반드시 자바스크립트와의 연동이 필요

루비 주석을 지정하는 ruby 요소

하나 이상의 구문 콘텐츠에 루비 주석을 표시할 때 사용

루비 주석 : 일본어/한자의 기본 문자열 주변에 발음법이나 의미를 나타내기 위해 추가되는 짧은 텍스트

ruby 요소 : 하나 이상의 문자로 구성되는 기본 텍스트를 작성

rt 요소 : ruby 요소의 자식 요소, rt 요소 바로 앞에 오는 하나 이상의 구문에 대한 루비 주석 표시

줄바꿈 허용 위치를 지정하는 wbr 요소

텍스트에서 줄바꿈을 허용할 위치를 지정할 때 사용

"허용 위치" : 줄바꿈이 수행되어도 괜찮은 지점

해당 위치에서 실제로 줄바꿈이 무조건 수행되는 것이 아니라 레이아웃의 배치 상황에 따라 결정

긴 URL 또는 단어/텍스트를 표시할 때 유용

728x90