HTML5 기본태그 (이미지 태그)

- Image의 줄임말
- 이미지를 삽입해주는 태그
- 반드시 src라는 속성을 동반한다.
- </img>태그는 기록하지 않아도 된다.
- 사용법
    <img src=“경로/이미지화일 이름”>
    경로 : 상대경로만 사용한다.
    이미지를 삽입하려는 웹페이지와 같은 폴더에 있을 때 : 이미지 화일명만 기록한다.(나머지의 경우는 경로를     써주어야한다.)

 

(1) Src속성
    <img src=“경로/이미지 화일명”> 형식으로 쓰인다.
    1)경로
    웹문서와 이미지가 같은 폴더에 있는 경우
        Src=“이미지 화일명”
    이미지가 웹문서의 바로 하위 폴더에 있는 경우
        Src=“폴더명/이미지 화일명”
    이미지가 웹문서의 바로 상위 폴더에 있는 경우
    Src=“../이미지 화일명”

(2) Alt, title
    - Alt (Alternative) : 이미지가 제대로 로드 되지 않았을 경우 대체 문구를 나타낸다.
    - Title : 이미지 위에 마우스 포인터를 가져다 대었을 때 나타나는 풍선도움말의 문구를 나타낸다.

(3) Align
    -Align =Left, right 의 경우
        정렬과 관련된 속성으로, 텍스트와 이미지가 함께 있을 경우 텍스트에 대한 이미지의 위치를 지정한다
    -Align = top, middle, bottom 의 경우
        역시 정렬과 관계되는 속성이며, 이미지와 텍스트가 함께 있을 경우 이미지에 대한 텍스트의 수직 정렬에         관한 내용이다.

(4) Border
    <img src=“이미지화일명”border=숫자>형식으로 사용된다.
    이미지 테두리를 만들어 준다.
    이미지에 하이퍼링크가 만들어졌을 경우는 border= 0을 입력해 테두리를 없애주어야한다.
     숫자는 픽셀을 의미한다.

(5) Height, Width
    이미지의 너비와 높이를 설정해 주는 속성이다.
    <img src=“이미지화일명” Height=숫자 Width=숫자 >형식으로 사용된다.
    이미지의 크기를 HTML안에서 재설정하는 기능으로 너무 크게 하거나 너무 작게 하면 이미지가 깨지므로

작은 숫자값 안에서 조정해야 한다.