이미지태그
| <img> | HTML 문서에 이미지를 추가하기 위한 태그 |
| 파일 형식 | GIF, JPG, PNG |
| 투명도(Alpha chanel => GIF, PNG만 가능) | |
| 주요 속성 | src(경로), alt(이미지 대신 출력할 문자 지정), width/height(하나만 지정하면 비율대로 변경되는데, 두개 다 지정하면 사진의 비율도 달라짐), style, border |
<body style="background-color: yellow">
<img src="Tulips.jpg" width="300" alt="이미지없음"
title="튤립이 예뻐~~~">
이미지에 링크 걸기
img 태그를 a 태그로 감싸주면 됨.
<a href="http://www.w3c.org"><img src="html5logo.png"></a>
이미지에 제목 달기
<figure>
<figcaption style="text-align: center;"">[그림] 튤립</figcaption>
<img src="Tulips.jpg" alt="튤립" width="500">
</figure>
상대 경로 지정하여 이미지 폴더에서 가져오기
<img src="images/프리지아.jpg" width="300">
비디오 태그
| <video> | HTML 문서에 비디오를 추가하기 위한 태그 |
| 파일 형식 | mp4, WebM |
| 주요 속성 | src, poster(버퍼링시 이미지를 보여줌), preload, autoplay(자동 시작), loop(무한 반복 재생), controls(영상 재생/멈춤 바), width/height, muted(음소거) |
<video src="videos/movie.mp4" controls></video><br>
<video src="videos/mov_bbb.mp4" controls autoplay loop></video>
controls, autoplay, loop는 속성내용이 속성명과 같기 때문에 속성명만 명시해줘도 사용 가능함.
YOUTUBE 연동하기
iframe을 사용하여 연결
youtube에서 제공하는 형태로 그대로 사용, 크기만 조절.
소스코드 복사해서 붙여넣기하면 됨.
<iframe width="1252" height="704"
src="https://www.youtube.com/embed/bryJnK5W-E4"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
오디오 태그
| <audio> | HTML 문서에 오디오를 추가하기 위한 태그 |
| 파일 형식 | mp3, ogg, wav |
| 주요 속성 | src, type, preload, autoplay(자동으로 시작됨), loop(끝나면 멈추는데 계속 재생됨), controls(컨드롤바 보여주는지 안 보여주는지 조정하는거) |
<audio src="audios/eagle.mp3" controls autoplay loop></audio>
'HTML5 CSS3' 카테고리의 다른 글
| 0512 HTML - form 태그, 회원가입 예제 만들기 (0) | 2020.05.13 |
|---|---|
| 0512 HTML - iframe 공간 분할 예 (0) | 2020.05.13 |
| 0511 HTML - table (0) | 2020.05.12 |
| 0511 HTML - 기초2 (0) | 2020.05.11 |
| 0508 HTML - 기초1 (0) | 2020.05.11 |