본문 바로가기

HTML / CSS / Java Script

그림 삽입 태그 img, 멀티미디어 삽입 태그 embed 형식과 속성

<IMG>, <EMBED> 태그

웹문서를 그림없이 글자로가 있다면 방문자가 쉽게 싫증? 낼수도 있다?
웹사이트에 그림을 넣으면 쉽게 정보를 전달할수 있지만 지나치게 많이 사용하면 불러오는(Loading)속도가 느려지는 원인이 될수 있다.



img태그


웹문서에서 그림을 삽입할때 <IMG>를 사용하는데 <IMG>에는 많은 속성을 사용할수 있다.

형식

<img src="그림파일" width="293" height="256" border="0" alt="설명">

src="그림파일" : 선택그림의 경로와 파일이름, HTML파일과 그림파일의 위치에 따라 상대경로와 절대 경로로 입력함
width="293" height="256" : 삽일한 그림의 폭과 높이
border="0" : border값을 "0"으로 하면 테투리가 없고 "1"이상값을 넣으면 해당 두께만큼 테두리가 생긴다.
alt="설명" : 그림을 설명을 입력, 그림위에 마우스 포인트를 올려놓으면 해당설명이 풍선도움말로 나옴

IMG 태그의 속성

src : 삽입할려는 그림의 경로와 파일이름을 지정
width : 그림의 폭을 픽셀단위로 지정
height : 그림의 높이를 픽셀단위로 지정
border : 그림의 테두리설정
alt : 그림에 대한 풍선도움말설정
align : left(왼쪽), right(오른쪽), top(위쪽에 문장), middle(가운데 문장), bottom(아래쪽문장)에 맞춤
hspace : 그림과 문장사이에 가로여백을 지정
vspace : 그림과 문장사이에 세로여백지정


embed태그


<EMBED>는 이미지외에 웹문서에는 동영상파일이나 음악파일 같은 개체를 삽입위해 사용함

형식


<embed src="멀티미디어파일" width=" " height=" " autostart=false>

EMBED 태그의 속성

src : 삽입할려는 파일의 경로와 파일이름을 지정
width : 재생매체의 폭을 픽셀단위로 지정
height : 재생매체의 높이를 픽셀단위로 지정
autostart : 매체이 자동 실행여부설정
hspace : 그림과 문장사이에 가로여백을 지정
vspace : 그림과 문장사이에 세로여백지정