HTML문서에서 이미지, 비디오, 오디오의 경우 HTML문서에 직접 삽입되기 보다는 링크되는 형태이다.
각각의 태그와 형식을 알아보자!
1. 이미지 태그 🖼️
<img> 태그는 이미지를 생성 할때 사용하는 태그이다.
<body> <img /> </body>
<img> 태그에 사용될 수 있는 속성은 굉장히 많지만, 중요하게 쓰이는 몇 가지만 정리하겠다.
src에 저장된 경로를 입력 해주면 HTML문서에 링크되어 이미지가 바로 뜨게 된다. 이미지의 경로가 잘못 되었을 경우 이미지가 나오지 않기 때문에 경로를 잘 입력해주어야 한다. alt는 이미지의 텍스트란으로 만약 이미지가 없을 경우에 alt를 사용해 오류 메세지 등을 지정 할 수 있다.
- 참고 : 경로를 지정 할때는 상대적 경로와 절대적 경로 두가지 방법으로 지정 할 수 있다.
절대적 경로는 항상 동일한 주소를 유지하는 경로를 의미
상대적 경로는 현재 작성하고 있는 파일의 위치에 따라 달라지는 경로를 의미
상대적 경로를 지정 할때는 현재 파일 위치를 기준으로 생각해야 한다.
/: 경로 구분, 이동
./: 현재 작성 중인 파일을 의미
../: 위의 위치 (상위 폴더로 이동)
▶ 사용 예시
상대적경로와 절대적 경로를 사용하여 토끼 이미지를 출력한 모습
<body>
<img src="../images/토끼인사.jpg" alt="토끼 인사" width="300" height="300" />
<img src="nothing" alt="nothing" width="300" height="300" />
<img src="https://i.pinimg.com/236x/d3/44/75/d344758118af1146fe331dcd427b6032.jpg"/>
</body>
2. 오디오 태그🙂
<audio> 태그는 음악을 재생 할 수 있게 해주는 태그이다.
<body> <audio> </audio> </body>
<audio> 태그도 마찬가지로 사용될 수 있는 속성은 굉장히 많지만, 중요하게 쓰이는 몇 가지만 정리해보겠다.
▶ 사용 예시
<body>
<audio src="../sound/piano.mp4" controls="controls"></audio>
</body>
3. 비디오 태그😏
video 태그는 동영상을 볼 수 있게 해주는 태그이다.
<body> <video> </video> </body>
video 태그에서 사용 할 수 있는 속성들이다. <audio> 와 상당히 비슷한 것 같다.
▶ 사용 예시
<body>
<video src="../video/city.mp4" width="200px" height="200px" controls="controls"></video>
<body>
개발자 꿈나무