[스크랩] 이미지 옆에 글 넣기 좌 우 상 하

사용형식 : <img src = "그림이 우치하는 경로 및 파일명">
                ex) <img src = "photo.jpg">

<img> 태그의 속성

 

alt : <img scr ="home.gif" alt="클릭하세요">  - 그림에 마우스 올리면 '클릭하세요' 설명 팁을 띄움

 

width : <img scr ="home.gif" width = 500> - 그림의 가로크기를 500픽셀로 설정
 <img scr ="home.gif" width = 50%> - 그림의 가로크기를 브라우저 크기를 기존으로 50%로 설정

 

height : <img scr ="home.gif" height = 300> - 그림의 세로크기를 300픽셀로 설정
 <img scr ="home.gif" height = 100%> - 그림의 세로크기를 브라우저 크기만큼 가득채움

 

align : <img scr ="home.gif" align = left> - 그림을 왼쪽 정렬하고 문장을 어울리게 배치
 <img scr ="home.gif" align = right> - 그림을 오른쪽 정렬하고 문장을 어울리게 배치
 <img scr ="home.gif" align = top> - 문장을 그림상단에 맞추어 정렬
 <img scr ="home.gif" align = middle> - 문장을 그림 중간에 맞추어 정렬
 <img scr ="home.gif" align = bottom> - 문장을 그림 하단에 맞추어 정렬
 <img scr ="home.gif" align = texttop> - 그림을 글자 상단에 맞추어 정렬
 <img scr ="home.gif" align = absmiddle> - 그림을 글자 중간에 맞추어 정렬
 <img scr ="home.gif" align = absbottom> - 그림을 글자 하단에 맞추어 정렬
 <img scr ="home.gif" align = baseline> - 그림 하단을 글자 기준선에 맞추어 정렬

 

border : <img scr ="home.gif" border=0> - 그림 테두리 표시하지 않음
 <img scr ="home.gif" border = 10> - 그림 테두리를 10픽셀로 표시

 

hspace : <img scr ="home.gif" hspace = 10> - 그림 좌우에 10픽셀만큼 여백 설정

 

vspace : <img scr ="home.gif" vspace = 10 > - 그림 상하에 10픽셀만큼 여백 설정

출처 : 수마석의 여행과 일상속으로

글쓴이 : 수마석 원글보기

메모 :