728x90
1. 이미지
웹페이지에 이미지를 넣는 경우 img태그를 사용한다.
<body>
<img src="https://i.pinimg.com/564x/2e/23/7c/2e237cf9c4fefb3ada75eea7fe683ceb.jpg" width="100" height="100" />
<img src="wrong.jpg" alt="Image Missing!" />
</body>
| src | 이미지 파일 경로 및 주소 |
| alt | 이미지가 없을 경우 나오는 문구 |
| width | 이미지의 너비 |
| height | 이미지의 높이 |
2. 오디오
<body>
<audio src="audio/Re_Wind.mp3" autoplay></audio>
</body>| src | 음악 파일 경로 |
| preload | 재생 전 음악파일 불러오기 |
| autoplay | 음악파일 자동재생 |
| loop | 음악파일 반복재생 |
| controls | 음악파일 재생 도구 표시 |
웹브라우저별로 지원하는 음악파일의 형식이 다르다.
| MP3 | WAV | OGG | |
| Chrome | O | O | O |
| FireFox | O | O | O |
| Safari | O | O | X |
| Opera | O | O | O |
파일 형식의 차이 문제는 source태그를 통하여 해결 할 수 있다.
<body>
<audio autoplay>
<source src="audio/Re_Wind.mp3" />
<source src="audio/Re_Wind.ogg" />
</audio>
</body>3. 비디오
<body>
<video width="100" height="100" controls>
<source src="video/my_video.mp4" />
<source src="video/my_video.webm" />
</video>
</body>| src | 동영상 파일 경로 |
| poster | 동영상 준비 중에 표시될 이미지 파일 경로 |
| preload | 재생 전 동영상파일을 모두 불러올 것인기 지정 |
| autoplay | 동영상 파일을 자동 재생할 것인지 지정 |
| loop | 동영상 파일을 반복할 것인지 지정 |
| controls | 동영상 재생 도구를 표시할 것인지 지정 |
| width | 동영상의 너비 지정 |
| height | 동영상의 높이 지정 |
video태그도 audio와 마찬가지로 브라우저별로 파일 형식의 차이가 발생할 수 있다.
| MP4 | WEBM | OGV | |
| Chrome | O | O | O |
| FireFox | O | O | O |
| Safari | O | X | X |
| Opera | O | O | O |
728x90
'Web > HTML' 카테고리의 다른 글
| #7. Form & Tags (2) | 2023.02.27 |
|---|---|
| #5. List & Table (0) | 2023.02.24 |
| #4. HTML의 핵심 Link (0) | 2023.02.24 |
| #3. 텍스트 관련 태그들 정리 (0) | 2023.02.24 |
| #2. head 요소의 여러가지 태그들 (0) | 2023.02.21 |