목차
- 이미지 태그 <img> </img>
1-1. 경로 src
1-2. 이미지 설명 alt
1-3. 사진 너비와 높이 width, height
1-4. 이미지맵 usemap - 2. 미디어 태그 <audio>와 <video>
2-1. 오디오 태그 <audio> </audio>
2-2. 비디오 태그 <video> </video>
1. 이미지 태그 <img> </img>
<img src=“경로” alt=“설명 문구” wigth=“넓이” height=“길이” />
- 웹 페이지에 사진이나 그림을 삽입할 때 사용하는 태그이다.
| src | 삽입할 이미지 경로를 지정하는 속성 |
| alt | 이미지에 대해 설명하는 텍스트 속성 |
| width, height | 이미지 크기를 설정하는 속성(너비, 높이) |
1-1. 경로 src
- src 속성에 경로를 설정하여 이미지 파일을 불러온다. 설정 방식에는 ① 절대경로 방식, ② 상대경로 방식이 존재한다.
- ① 절대경로 방식은 파일이 저장된 물리적 위치 전체를 말한다. 즉 D드라이브 폴더 안에 담겨있다면 D:\...부터 파일 확장자까지를 말한다.
<img src="../sample/image/city1.PNG">
- ② 상대경로 방식의 경우 현재 작성 중인 내 위치에서부터의 접근을 허용하는 것이다. 이때 상위 경로로 접근하기 위해서는 ../로 작성한다.
1-2. 이미지 설명 alt
- alt 속성은 사진 경로가 잘못되었거나 이미지를 제대로 표현할 수 없는 상황일 때 대체 텍스트 용도로 쓰인다.
- 나아가 시각 장애인들을 위한 화면 낭독기 프로그램에서 이미지를 대신하는 텍스트로 작성되기도 한다.
<img src="../sample/image/river.PNG" alt="강 사진">
- 존재하지 않는 파일명을 작성하자 대체 텍스트가 출력된 모습이다.
1-3. 사진 너비와 높이 width, height
- width, height 속성으로 사진의 너비와 높이를 지정할 수 있다.
- 고정 크기 단위(px 등)의 크기로 지정 가능하며, 가변 크기 단위(%)로도 쓰일 수 있다.
<img src="../sample/image/flower1.PNG" width="200px" height="150px">
- 고정 크기 단위(px)로 쓴 경우 화면 사이즈가 줄어도 크기가 변하지 않는다.
<img src="../sample/image/flower1.PNG" width="15%" height="150px">
- 가변 크기 단위(%)로 작성된 경우 화면 사이즈 또는 기준 사이즈에 따라 크기가 변경된다.
1-4. 이미지맵 usemap
- 이미지 구역을 2개로 나눠 각각 링크를 설정할 수 있다.
<body>
<img src="../sample/image/river1.PNG" usemap="#map">
<map name="map">
<area shape="rect" coords="00, 00, 300, 500"
href="https://www.naver.com" target="_blank">
<area shape="circle" coords="450, 250, 150"
href="https://www.google.com" target="_self">
</map>
</body>
2. 미디어 태그 <audio>와 <video>
HTML5부터는 플러그인 기능 사용하지 않고 오디오, 비디오와 같은 미디어들을 직접 HTML 문서에서 실행시킬 수 있는 태그가 제공된다.
| src | 오디오파일의 경로 지정 | |
| controls | "controls", "", - | 재생도구 출력 지정 |
| autoplay | "autoplay", "", - | 자동 재생여부 지정 |
| loop | "loop", "", - | 반복여부 지정 |
| preload | "none", "metadata", "auto" | none : 미리 다운로드하지 않음 metadata : 기본 정보는 가져옴(크기, 첫 프레임, 오디오 길이 등) auto : 미리 다운로드 진행함 |
2-1. 오디오 태그 <audio> </audio>
- <audio>는 웹 브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 태그이다.
- 활용할 수 있는 속성은 위와 같은 것들이 있다.
<body>
<audio src="../sample/audio/music.mp3" controls="controls"
loop="loop"></audio>
</body>
2-2. 비디오 태그 <video> </video>
- 활용할 수 있는 속성은 위와 같은 것들이 있다.
- 그밖에도 <video>의 경우는 poster 속성 또한 고려 대상이다. 재생 전 썸네일처럼 띄워둘 사진을 지정할 수가 있다.
<body>
<video src="../sample/video/video.mp4" controls="controls"
poster="../sample/image/flower1.PNG"></video>
</body>
'Frontend > HTML' 카테고리의 다른 글
| [HTML/수업 과제 practice] 글자 목록 태그, 테이블 태그 (0) | 2022.02.09 |
|---|---|
| [HTML5] 하이퍼링크 태그 | a | href | target (0) | 2022.02.09 |
| [HTML5] 영역 분할 태그 | div | span | iframe | 시맨틱 (0) | 2022.02.09 |
| [HTML5] 테이블 태그 | table | rowspan | colspan | thead (0) | 2022.02.08 |
| [HTML5] 목록 태그 | li | ul | ol | dl (0) | 2022.02.08 |
