[html]이미지, 오디오, 비디오, 하이퍼링크

◎ 이미지

<img src = "이미지 파일 경로" alt = "대체용 텍스트"> 이미지를 넣는 태그이다.

src에는 이미지 팡리 경로가, alt는 화면 낭독기가 이미지 대신해서 읽어줄 문구가 들어간다. 또한, 이미지가 깨졌을때 대체문구가 나오는데 이때에도 alt 문구가 나온다.

이미지 깨졌을 경우

이미지 너비는 width, 높이는 height로 조절가능하다.

둘 중 하나만 설정해도 나머지 하나는 자동으로 비율 맞춰 나온다.

단위는 %와 px가 있다.

%- 웹 브라우저의 창 너비와 높이 기준으로 배정한다. ex) width = 30%

px- 해당 픽셀 만큼 배정한다. ex) width=30

img 태그

width 비교

위의 코드처럼 위의 이미지는 width를 10%로 했을 경우 웹 페이지의 10%크기로 해주었고,

밑의 코드처럼 아래의 이미지는 width를 10으로 했을 경우 10px만큼 나타났다.

​

◎ 멀티미디어 넣기

object 태그는 비디오, pdf, 자바 애플릿, 오디오 파일 등 멀티미디어 파일을 넣을때 사용한다.

​

기본 문법은 다음과 같다.

<object width="너비" height="높이" data="파일경로와 이름"></object>

​

<object width="900" height="800" data="C:\Users\user\Desktop\공주\스페인어\pdf_01.pdf"></object>

object 문법 사용 결과

만약에 html의 <audio>,<video>,<object>를 지원하지 않는 웹페이지라면 대체할 만한 태그는 <embed>태그다.

<embed src="C:\Users\user\Desktop\공주\스페인어\pdf_01.pdf" width="900" height="800"><embed src="경로와 제목">

결과물은 object 사용과 동일하게 나온다.

​

◎ 오디오, 비디오 파일

오디오는 <audio></audio>, 비디오는 <video></video>이다.

<audio src="오디오 파일 경로"></audio>

<video src="비디오 파일 경로"></video>

​

비디오는 controls과 width를 더불어 사용한다. 그렇지 않으면 페이지 가득한 영상을 볼 수 있을 것이다.

controls: 해당 컨텐츠의 화면에 컨트롤 바를 설치

autoplay: 오디오, 비디오를 자동으로 실행

loop: 오디오, 비디오를 반복 재생

muted: 오디오, 비디오의 소리를 제거

preload: 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정. 기본값은 preload="auto"이고 auto 이 외에는 metadata, none이 있다.

width, height: 높이와 넓이를 정한다.

poster="파일이름" : 비디오 태그에서 사용하는 속성, 재생되기 전까지 화면에 표시될 이미지 지정.

※비디오나 오디오를 자동재생+반복재생 하려면 컨트롤 바를 제거하고, autoplay와 loop를 추가한다. 특히, 크롬에서 비디오를 자동 재생하려면 muted 속성을 넣어 소리를 꺼야만 한다. (이유: 크롬은 사용자의 제한된 네트워크 상황에서 과도한 데이터 소비를 방지하는 명목으로 자동재생 기능을 지원하지x)

​

◎ 하이퍼링크

<a></a> 태그를 써서 링크를 넣을 수 있다.

<a href = "넣고 싶은 페이지의 주소"> 텍스트나 이미지</a>

 

이미지에 링크를 추가할 수도 있다.

<a herf = "링크"><img src = "이미지 사진 경로" alt = "이미지에 대한 텍스트"></a>

이미지에 링크 넣기

위처럼 사진에 마우스를 갖다대면 손모양이 나오고, 클릭하면 지정한 페이지로 이동한다.

이동할 때 현재 쓰고있는 웹 페이지가 다른 페이지로 바뀌게 된다. 만약 새로운 창에 클릭한페이지가 뜨게하고 싶다면 <a> 태그 안에 target = "_blank"를 추가해주면 된다.