제발 제 코드에 훈수하세요

멀티미디어란 영상·음성·문자 등과 같은 다양한 정보 매체를 복합시킨 장치라고 한다.

대부분의 사람들이 멀티미디어를 행하고 있을 것이다.

스마트폰이나 데스크톱 등 다양한 매체에서 멀티미디어적 요소들을 많이 본다.

이렇게 다양한 매체에 꼭 있는 것이 바로 인터넷이다.

우리는 인터넷에서 멀티미디어 정보를 주고받는다. 

요새는 웹이 아닌 어플을 통해 그러한 정보를 많이들 주고받는다.

하지만 모바일폰을 통해서도 웹사이트에 들어오기 때문에 우리는 멀티미디어적 요소를 다룰 수 있어야 한다.

멀티미디어 요소

멀티미디어 요소에는 이미지, 사운드, 미디어 이렇게 세 가지가 있다.

이미지(image) 

이미지 태그는 <img>로 쓰고 단일 태그이다.

<img>에 꼭 넣어줘야 하는 속성 값 두 가지는 바로 src(source, 자료), alt(alternative, 대체)이다

src에는 경로와 파일명을 적어 주어야 한다.

<img src = "images/file.png" />

슬래시( / )로 폴더를 구분해주고 이렇게 확장자 명까지 넣어주면 페이지에 이미지가 나올 것이다.

또한 ../로 상위 폴더를 표시해주기도한다. ../../는 두 번 상위 폴더이다. 

alt는 접근성을 위해서 필요한 요소이기도하고 이미지를 설명해주는 속성이다.

<img src = "images/file.png" alt = "파이리미지입니다." />

사운드(sound)

사운드 태그는 <audio>로 쓰고 종료가 있는 태그이다.

<audio>에 꼭 들어가야 하는 태그는 src태그이다.

로컬 환경에서는 그렇지 않지만 서버에서는 대소문자를 구분한다.

<audio src = "Sound.mp3">
</audio>

미디어(media)

미디어 태그는 <video>로 쓰고 종료가 있다.

<video>도 마찬가지로 src가 꼭 들어간다.

추가적인 속성으로 controls와 autoplay가 있다.

controls는 재생 일시정지와 같은 바를 영상 하단에 만들어준다.

autoplay는 자동재생을 해주는 속성이다.

<video src = "video.mp4" controls autoplay>
</video>

※<audio>와 <video>가 <img>처럼 단일 태그가 아닌 이유

원래 확장자가 여러 개로 나뉘어 있었다

그리고 그것들을 브라우저가 허용할 수 없었기 때문에 

src속성을 여러 개 적어주어야 했다.

HTML5인 현재는 그렇지 않지만 종료가 있는 채로 쓴다.

figure태그, figcaption태그

figure태그는 <figure>로 쓰고 종료가 있는 태그이다.

위와 같은 요소들을 컨테이너처럼 담을 수 있는 태그이다.

figcaption태그는 <figcaption>로 쓰고 종료가 있는 태그이다.

요소에 설명을 넣는 태그로 <figure> 내에 한 번 쓸 수 있다.(안 쓸 수도 있다.)

<figure>와 <figcaption>을 활용해 이미지와 설명을 넣어보자

<figure>
  <img src="images/bird.jpg" alt="멋진 노을 구름 사이로 햇빛이 촤하고 들어오는 중간에 새가 훨훨 날아감">
  <img src="images/bird2.jpg" alt="노란 부리를 가진 새">
  <figcaption>멋진 노을 위를 나는 새와 그 새의 정체 </figcaption>
</figure>

이렇게 두 개의 이미지에 동시에 설명을 넣을 수 있다.

기본의 <img>와 다르게 들여 쓰기가 된 상태에서 이미지가 나타난다.

alt값과 <figcaption>이 갔다면 alt를 생략할 수 있다.

블락, 인라인 요소

이제까지 태그들은 두 가지 요소로 구분할 수 있다. 

바로 블락,인라인 요소이다.

블락 요소는 <br/>(줄 바꿈 태그)를 쓰지 않아도 자동으로 줄 바꿈 되는 요소들을 말한다.

인라인 요소는 <br/>을 써야 하는 요소들을 말한다.

인라인 요소는 블락 요소보다 작다. 때문에 인라인 요소가 블락 요소를 감쌀 수 없다.

하지만 HTML5에서 <a>는 편의상 블락요소를 감쌀 수 있다.

이 두 요소는 나중에 CSS(StyleSheet)를 위해서 알 필요가 있다.

※접근성

페이지의 접근성은 인터넷 사용자라면 모두를 위한 것이다.

장애우들에게도 마찬가지이다. 

아까 배웠던 alt속성은 시각장애우에게 필수적이다.(파일이 깨졌을 때 설명을 보기 위한 것도 포함)

alt속성은 이미지를 설명해 주는데 시각장애우들은 소리로만 그것을 볼 수 있다. 

따라서 눈 감고 그 이미지를 느낄 수 있도록 상세한 설명을 적어주는 것이 필요하다.

공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요) 

그럼~ 앙 제바