IT 세상 해석하기

[HTML] 홈페이지에 이미지를 올리자! <img>태그 본문

프로그래머 공간/HTML

[HTML] 홈페이지에 이미지를 올리자! <img>태그

ikohong 2019. 11. 24. 08:30
728x90
반응형

[HTML] 홈페이지에 이미지를 올리자!  <img>태그

By i!kohong(아이코홍)


태그 설명


  • 그림을 삽입하는 기본 태그입니다.
  • <img>태그에서 사용할수 있는 파일명으로 GIF,JPG/JPEG,PNG 3가지가 있습니다.
GIF (Graphic Interchange Format) 움직이는 이미지 파일
JPG/JPEG (Joint Photographic Expert Group) 뛰어난 압축률이 특징
PNG (Portable Network Graphics) GIF와 JPG/JPEG의 장점을 특징으로 가진 차세대 그래픽 파일 포맷 형태

 


Attribute(속성)

src 그림 파일의 경로를 지정합니다.
height 그림의 세로 높이를 지정합니다. 단위는 픽셀과 퍼센트(%)입니다.
width 그림의 가로 높이를 지정합니다. 단위는 픽셀과 퍼센트(%)입니다.
alt 마우스를 가져다 대었을 떄 풍선 도움말처럼 툴팁 형식으로 그림에 대한 보충 설명글을 나타나게 합니다.
border 사진 테두리 선을 설정해줍니다.
vspace 그림 상하 여백을 픽셀 단위로 지정합니다.
hspace 그림 좌우 여백을 픽셀 단위로 지정합니다.
align left : 그림이 왼쪽으로 나타나고, 오른쪽에 글 문단이 나타납니다.
  right : 그림이 오른쪽으로 나타나고, 왼쪽에 글 문단이 나타납니다.
  top : 그림 상단에 맞추어 한 줄 글 문단이 나타나고 나머지는 그림 아래에 나타납니다.
  middle : 그림 세로의 중앙에 맞추어 한 줄 글 문단이 나타나고 나머지는 그림 아래에 나타납니다.
  bottom : 그림 하단에 맞추어 한 줄 글 문단이 나타나고 나머지는 그림 아래에 나타납니다.

예시


업데이트 예정입니다. (11/12)

 

728x90
반응형
Comments