Image Tag
웹페이지에 이미지를 삽입하는 경우 <img> tag를 사용한다.
함께 쓰이는 attribute는 다음과 같다.
src attribute: 이미지 파일의 경로alt attribute: 이미지 파일이 에러등으로 인해 표시가 안될경우 대체되는 텍스트width attribute: 이미지의 너비. CSS property를 사용하는 것이 일반적height attribute: 이미지의 높이. CSS property를 사용하는 것이 일반적
<!DOCTYPE html>
<html>
<body>
<img src="/images/karina.jpg" alt="karina" width="100">
<img src="/images/wrongname.gif" alt="이미지가 없습니다.">
</body>
</html>
Audio Tag
HTML5에서 새롭게 추가된 tag이며, <audio>로 지정한다.
함께 쓰이는 attribute는 다음과 같다.
src attribute: 음악 파일 경로preload attribute: 재생 전에 음악 파일을 모두 불러올 것인지 지정autoplay attribute: 음악 파일을 자동으로 재생할 것인지 지정loop attribute: 음악을 반복할 것인지 지정controls attribute: 음악 재생 도구를 표시할 것인지 지정. 브라우저마다 형태는 다르다.
<!DOCTYPE html>
<html>
<body>
<audio src="assets/audio/Kalimba.mp3" controls></audio>
</body>
</html>
웹브라우저 별로 지원하는 음악 파일 형식이 다르다. 이로 인해 재생되지 않는 문제는 <source> tag를 사용하여 해결할 수 있다. 여러 확장자 파일을 각각 지정해주어서 지원하는 파일 형식을 모두 충족시킬 수 있다. type attribute는 생략이 가능하다.
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="assets/audio/Kalimba.mp3" type="audio/mpeg">
<source src="assets/audio/Kalimba.ogg" type="audio/ogg">
</audio>
</body>
</html>Video Tag
HTML5에서 새롭게 추가된 tag이며, <video> 로 지정한다.
함께 쓰이는 attribute는 다음과 같다.
src attribute: 동영상 파일 경로poster attribute: 동영상 준비 중에 표시될 이미지 파일 경로preload attribute: 재생 전에 동영상 파일을 모두 불러올 것인지 지정autoplay attribute: 동영상 파일을 자동으로 재생할 것인지 지정loop attribute: 동영상을 반복할 것인지 지정controls attribute: 동영상 재생 도구를 표시할 것인지 지정. 브라우저마다 형태는 다르다.width attribute: 동영상의 너비를 지정height attribute: 동영상의 높이를 지정
브라우저마다 지원하는 파일 형식의 차이에 문제가 발생할 수 있다. 마찬가지로, <source> tag를 사용하여 형식 차이 문제를 해결한다. type attribute는 생략 가능하다.
<!DOCTYPE html>
<html>
<body>
<video width="640" height="360" controls>
<source src="assets/video/wildlife.mp4" type="video/mp4">
<source src="assets/video/wildlife.webm" type="video/webm">
</video>
</body>
</html>
더깊이