img
예제 코드
<img src="01.png" alt="이미지를 불러올 수 없습니다." width="70%">
<img src="01.png" alt="이미지를 불러올 수 없습니다." width="300px">
<img src="01.png" alt="이미지를 불러올 수 없습니다." width="20%">
<img src=" " alt="이미지를 불러올 수 없습니다." width="50%">실행 결과
-
img: 이미지를 삽입할 때 사용. 기본형:<img src="" alt=""> -
src: 이미지 source이다. -
alt: 이미지 대체 텍스트이다. -
width,height: 이미지의 크기값을 지정한다. ex) 200px, 40%(화면의 40% 크기로 표시)
둘 중 하나만 입력 시 고정 비율로 표시된다.
object
예제 코드
<object data="01.jpg" width="300px"></object>
<object data="form.html" width="400px" height="200px"></object>
<object data="multi/bgsound.mp3" height="200px"></object>
<object data="multi/fire.mp4" height="200px"></object>실행 결과
-
object: 사진 뿐만 아니라 pdf, 음악, 동영상 등 다양한 파일을 넣을 수 있는 태그이다. -
data: 소스 지정 -
width,height: 크기 지정 -
img태그와 달리 닫는 태그가 있다.
embed
예제 코드
<embed src="multi/test.pdf" width="300px">
<embed src="multi/bgsound.mp3" widht="300px">
<embed src="multi/fire.mp4" width="300px">실행 결과
embed: 미디어를 삽입할 때 사용한다.
object가 안될 때 사용한다.
닫는 태그가 없다.
audio, video
예제 코드
<audio src="multi/bgsound.mp3" autoplay loop></audio>
<video src="multi/fire.mp4" autoplay loop muted></video>실행 결과
(영상이 음소거된 채로 자동 반복 재생되고 있다.
음악이 자동 반복 재생되고 있다. 플레이어는 없다.
플레이어를 표시하려면 audio태그에 controls를 추가한다.)
-
audio: 오디오 파일을 넣을 수 있는 태그 -
video: 비디오 파일을 넣을 수 있는 태그 -
autoplay: 파일 자동 실행 -
loop: 반복 재생 -
닫는 태그가 있다.
a
예제 코드
<a id="thref" href="https://youtu.be/zmPPBJkmDA8" target="_blank">이곳을 클릭!</a>
<a href="https://youtu.be/fTR8pqiTP40" target="_blank">
<img src="ymk.gif" width="70%">
</a>이미지를 클릭하세요!실행 결과
이미지를 클릭해보세요!
-
a (anchor) : 문서, 사이트로 연결해주는 태그이다.
기본형 :<a href="주소" target="_blank"></a>
닫는 태그가 있다. -
href (hypertext reference) : URL을 입력받아 연결해준다.
-
target : 링크를 클릭했을 때 문서가 열릴 위치를 명시한다.
- _blank : 새로운 창에서 연다.
- _self : 현재 프레임에서 연다. 기본값으로 생략한다.
- _parent : 현재 프레임의 부모 프레임에서 연다.
- _top : 현재 윈도우 전체에서 연다.
- 프레임 이름 : 명시된 프레임에서 연다.
map, area
예제 코드
<img src="swim.jpg" usemap="#body">
<map name="body">
<area shape="rect" coords="190,190,335,313" href="http://velog.io" target="_blank">
</map>실행 결과
사람의 몸을 클릭해보세요! (수정 페이지에서만 적용됨..)
-
usemap: image와 map을 연결할 수 있다. -
map: 이미지맵을 만들 때 사용한다.
하나의 map에 여러 개의 area를 포함할 수 있다. -
이미지맵 : 클릭할 수 있는 영역을 가지는 이미지
-
area: 이미지맵의 클릭할 수 있는 영역을 정의할 때 사용한다. -
shape: rect, circle, default(기본값 : 전체 영역), poly(다각형) -
coords: area의 좌표를 지정한다.shape="rect"인 경우 :x1, y1, x2, y2(사각형의 왼쪽 위 모서리와 오른쪽 아래 모서리의 좌표.)shape="circle"인 경우 :x, y, radius중심좌표와 반지름의 길이.shape="poly"인 경우 :x1, y1, x2, y2, ...
