이미지 관련 태그 <img>
태그 |
속성
|
사용법 |
<img> (empty tag) |
src : 삽입하고자하는 이미지의 경로 alt: 이미지 설명 문구 (대체문구) width: 이미지 가로크기(px, %) height: 이미지 세로크기(px, %) |
<img src = " "
alt = " " width = " "(px/ %)
height = " "(px/%) > |
src속성
-삽입하고자 하는 이미지의 경로
- 경로에는 상대경로와 절대경로가 있음
- 상대경로: 현재 작업중인 위치를 기준으로 경로를 찾는 방식
- 절대경로: 상위 디렉토리부터 해당 파일까지 경유한 모든 경로를 전부 기입하는 방식
alt 속성
- 사진의 경로가 없는 경로거나 이미지를 제대로 표현살 수 없는 경우 대체 텍스트의 용도
- 시각장애인들을 위한 스크린리더(화면낭독기)에서 이미지를 읽어주는 설명문구
- 웹 접근성 : 사용자의 신체적 특징, 지역, 나이, 지식수준 등을 고려하여 가능한 많은 사용자가 불편 없이 이용할 수 있도록 서비스를 만들어서 제공하는 것
width와 height속성
- 이미지의 가로, 세로길이 조정가능
- 고정길이(px), 가변길이(%)로 지정이 가능
- 고정길이단위(px) :
기본값 , 화면사이즈가 조정되더라도 이미지 크기가 변동되지 않음
<img src="resources\image\flower.jpg" alt=" 이 사진은 꽃1입니다" width = "100" height = "100"/>
<img src="resources/image/flower2.jpg" alt="이 사진은 꽃2입니다" width = "100" height = "150"/>
<img src="resources/image/flower3.jpg" alt="이 사진은 꽃3입니다" width = "100" height = "100"/>
<img src="resources/image/flower4.jpg" alt="이 사진은 꽃4입니다" width = "100" height = "100"/>
<br>
<h4>가변길이단위(%): 화면사이즈 혹은 부모요소 사이즈에 따라 이미지 크기도 같이 변동</h4>
<img src="resources\image\flower.jpg" alt=" 이 사진은 꽃1입니다" width = "15%" height = "15%"/>
<img src="resources/image/flower2.jpg" alt="이 사진은 꽃2입니다" width = "15%" height = "15%"/>
<img src="resources/image/flower3.jpg" alt="이 사진은 꽃3입니다" width = "15%" height = "15%"/>
<img src="resources/image/flower4.jpg" alt="이 사진은 꽃4입니다" width = "15%" height = "15%"/>
오디오 관련 태그 <audio>
태그 |
속성
|
사용법 |
<audio> |
src : 삽입하고자 하는 영상의 경로
controls :플레이어 노출여부 autoplay : 자동재생여부 loop: 반복재생여부 |
<audio src = "" controls ( = "controls" ) autoplay ( = "audioplay" ) loop ( = "loop" ) > * 속성명과 속성값이 같을 경우, 속성값을 생략함
|
<audio src="resources\audio\major.mp3 control" controls autoplay loop ></audio>
비디오 관련 태그 <video>
태그 |
속성
|
사용법 |
<video> | src : 삽입하고자하는 이미지의 경로 alt: 이미지 설명 문구 (대체문구) width: 이미지 가로크기(px, %) height: 이미지 세로크기(px, %) src : 삽입하고자 하는 영상의 경로 controls :플레이어 노출여부 autoplay : 자동재생여부 loop: 반복재생여부 poster: 썸네일 이미지지정 |
<video src = " "
alt = " "
width = " "(px/ %)
controls ( = "controls" ) height = " "(px/%) autoplay ( = "audioplay" ) loop ( = "loop" ) posrter= " "> |
<audio src="resources\audio\major.mp3 control" controls autoplay loop ></audio>
'HTML' 카테고리의 다른 글
[HTML]블럭요소와 인라인요소, div/ span / iframe (0) | 2022.10.19 |
---|---|
[HTML] form태그 / input태그 및 타입 (0) | 2022.10.19 |
[HTML] table관련 태그 (0) | 2022.10.19 |
[HTML] 목록관련 태그: ol / ul / dt / dl /dd (0) | 2022.10.19 |
[HTML] 글자관련 태그 (0) | 2022.10.19 |