이미지
| src | 이미지 경로 지정 |
| alt | 이미지가 없을 때 나오는 글자 지정 |
| width | 너비 |
| height | 높이 |
- 이미지 경로 url로 지정하기
아래의 코드와 같이 url 주소를 복사해서 지정할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="https://img1.daumcdn.net/thumb/R720x0.q80/?scode=mtistory2&fname=http%3A%2F%2Fcfile7.uf.tistory.com%2Fimage%2F24283C3858F778CA2EFABE">
</body>
</html>
2.내 폴더에 저장되어 있는 이미지로 지정하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="다운로드.jpeg">
<img src="다운로드.jpeg" width="300" height="300">
<br>
<img src="없는이미지.jpeg" width="300" height="300">
<img src="없는이미지.jpeg" width="300" height="300" alt="존재하지 않는 이미지 입니다.">
</body>
</html>
src는 상대경로로 지정해주면 된다.
이미지를 그냥 불러왔을 때와 너비와 높이를 지정해 주어서 불러왔을 때
그리고 존재하지 않는 이미지를 불러왔을 때 alt값을 지정해주면 어떻게 뜨는지 확인해 보았다.
오디오
| src | 오디오 경로 지정 |
| preload | 음악 재상하기 전에 모두 불러올지 지정 |
| autoplay | 자동재생 할지 지정 |
| loop | 음악을 반복할지 지정 |
| controls | 음악 재생 도구를 출력할지 지정 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio src="music.mp3"></audio>
</body>
</html>이렇게 음악만 삽입하면 따로 화면상에 아무것도 뜨지 않는다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio src="music.mp3" controls=controls></audio>
</body>
</html>controls 명령어를 통해서 음악 재생도구가 화면에 출력되는 것을 확인할 수 있다.
비디오
| src | 비디오 경로 지정 |
| poster | 비디오 준비 중일 때의 이미지파일 경로 지정 |
| preload | 비디오를 재생하기 전에 모두 불러 올지 |
| autoplay | 비디오 자동 재생할지 |
| loop | 비디오 반복할지 |
| controls | 비디오 재생도구 출력할지 |
| width | 너비 |
| height | 높이 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video src="감자도리.mp4" width="500" height="500" controls= controls poster="다운로드.jpeg"></video>
</body>
</html>비디오를 상대경로로 불러왔으며 비디오 재생 도구를 출력하도록 하였다.
또한 poster 태그를 통해서 비디오가 준비중일 때 이미지가 뜨도록 하였다.
'Web > HTML 기본 개념' 카테고리의 다른 글
| select 태그를 통해서 여러 데이터 나열하기 (0) | 2021.03.05 |
|---|---|
| [HTML]입력양식 태그 (1) | 2021.03.05 |
| [HTML]테이블 열,행 합치기 (0) | 2021.03.05 |
| [HTML]테이블 태그 (0) | 2021.03.05 |
| [HTML]글자 태그(2) (0) | 2021.03.02 |
