HTML- 멀티미디어

🌱 이미지

 

<img src="이미지경로.jpg" alt="이미지 정보 텍스트" width="300" height="400">

src : 이미지 주소를 정해줌

alt : 사진에 대한 정보를 텍스트로 적을 수 있음

1. 코드만 보고도 어떤 사진인지 알 수 있음

2. 시각장애인을 위해 해당내용에 있는 내용을 읽어줌

3. 이미지 로딩 실패시 화면에 어떤 사진이었는지 유추할 수 있음

 

width, height 를 통해 이미지 사이즈 조절이 가능(단위 없이 써도 px로 인식).

css를 통해서도 변경 가능

 

🌱 비디오

<video scr="" autoplay muted controls  width="300" height="400"/>

 

autoplay : 자동재생

- 크롬에선 동작x, 사파리에서는 자동 재생

- 사용자에게 불쾌감을 줄 수 있으므로 꼭 muted와 함께 사용. 

muted : 음소거

- 크롬에서 autoplay옵션을 넣고 싶을때는 꼭 함께 사용해야 함. 

controls : 프로그래스 및 재생버튼들 노출

 

width, height 를 통해 이미지 사이즈 조절이 가능(단위 없이 써도 px로 인식).

css를 통해서도 변경 가능

 

🌱 오디오

<audio src="" controls autoplay muted ></audio>

 

autoplay : 자동재생

크롬에선 동작x, 사파리에서는 자동 재생

muted : 음소거

크롬에서 autoplay옵션을 넣고 싶을때는 꼭 함께 사용해야 함. 

controls : 프로그래스 및 재생버튼들 노출

 

🌱  ifeame

<iframe src=""  width="300" height="400">

인라인 프레임. html문서에서 다른 html문서를 보여주는 태그

- 그래서 적용 시 해당 태그 안에 html, body태그등까지 그대로 존재한다.

- 지도, 결제창 등을 띄울때도 사용.