코드잇 학습일기 Day14. 멀티미디어(이미지, 비디오, 오디오)

한동안 바쁜 일이 있어서 코드잇 강의를 듣지 못했다. 더 미루면 이번 주 코드잇 학습일기 챌린지를 할 수 없을것만 같아서, 시간을 쪼개어 모니터 앞에 앉았다.

 

멀티미디어 태그

 

이미지를 넣을 때 <img>

이미지를 넣을 때에는 <img> 라는 태그를 사용한다. 태그 안에 src 속성값으로 이미지 경로를 적어주면 된다.

 

<img src="이미지 경로" alt="이미지 정보" width="너비값(숫자)" height="높이값(숫자)" />

 

이미지 태그와 함께 사용하는 속성으로 alt가 있는데, 이 곳에는 이미지에 대한 정보를 텍스트로 넣는다. 그러면 마크업만 보고 어떤 이미지인지 알 수 있으며, 이미지를 볼 수 없는 시각장애인용 스크린리더 프로그램에서도 alt에 적혀있는 내용을 읽어준다. 또한 이미지 다운로드에 실패했을 때에도 이 이미지를 보여준다. 이미지를 보지 못해도 어떤 이미지인지 대충 짐작이 가능하기 때문에 사용자를 배려하여 되도록이면 alt 속성을 적어주는 것이 좋다.

cf. 이미지 태그는 종료 태그를 사용하지 않는다. </img>를 쓰지 않는데 Xhtml1.0에서는 반드시 끝에 />를 넣어주어야 하고, html5에서는 생략해도 웹표준에 어긋나지 않는다고 한다.

 

비디오를 넣을 때 <video>

이미지 태그와 마찬가지로 <video> 태그 안에 src 속성으로 비디오 경로를 넣는다.

 

<video src="비디오 경로" autoplay muted controls width="너비값(숫자)" height="높이값(숫자)"></video>

 

비디오 태그와 함께 사용하는 속성 몇가지를 알아보자. autoplay는 브라우저가 열리면 자동으로 재생하겠다는 의미인데, 구글 크롬 브라우저에서는 동작하지 않고 사파리에서만 동작한다. 자동재생을 하면 갑자기 소리가 나와서 불쾌감을 줄 수 있기 때문이다. (상냥한 크롬...) 크롬에서도 동작하게 하고 싶다면 muted라는 속성과 함께 써야 한다. muted는 소리를 끄는(음소거) 속성이다.

 

그리고 controls라는 속성을 사용하면 아래쪽에 프로그래스 바, 재생 버튼 등이 보인다. 사이즈는 단위 없이 사용하면 된다.

 

비디오 태그에 controls 속성 추가

 

오디오 파일을 넣을 때 <audio>

오디오 태그는 src 속성으로 오디오 경로만 넣으면 보통 화면에 표시되지 않는다. 

 

<audio src="오디오 경로" controls autoplay></audio>

 

화면에도 표시하고 싶다면 controls 라는 속성을 추가해야 한다. 비디오와 마찬가지로 자동재생 속성이 있다. 오디오 자동재생도 크롬에서는 동작하지 않고 사파리에서는 동작한다.

---

그리고 배운 내용을 제대로 이해했는지 퀴즈로 확인하는 시간! 내가 만든 화면은 이미지가 두 줄로 표시되는데 (태그들 사이에 공백이 생김), 실습 결과에서는 한 줄로 보여져서 당황했다. 해설을 통해서 <img> 태그들을 엔터치지 않고 쭉 나열하면, 각 태그들 사이에 불필요한 공백이 생기지 않는다는 사실을 알 수 있었다👍🏻👍🏻👍🏻

 

코드잇 퀴즈 해설

 

그래도 듣다보니 강의 4개 완강! 코드잇 강의는 길지 않아서 확실히 수강에 부담이 없다. 코딩 강의이니 되도록이면 컴퓨터 앞에서 들으려고 하는 편이지만, 정말 시간이 없을 때에는 출퇴근길 버스나 지하철에서도 OK

 

코드잇 오늘 공부 인증

 

담주에는 일정 조절을 잘 해서 강의를 좀 더 많이 들을 수 있도록 노력해야겠다.