<HTML5> 7강 img 태그 / <map> 태그

<img> 태그

- image 의 약자

- 이미지를 처리하는 태그이다.
- inline 요소 (하위계층)
- 시작태그로만 구성되어있다.(닫는태그가 없다.)

- width height 값으로 사이즈를 조정할 수 있다.

- alt 값은 그래픽 정보를 접할 수 없는 사람들을 위한 텍스트 정보로 사진에 대한 설명을 기재한다.(의미없는 사진은 x)

- padding 속성을 갖을 수 없다

 

img태그 속성

- src="이미지 경로/파일명.확장자"  (source)

- alt="텍스트정보" (접근성-리더기가 읽는다)

   ex) <img src="이미지경로/파일명.jpg" alt="이미지">
    

css속성을 사용한 배경이미지 처리 

- background:url(이미지의경로) 위치 rpeat값 (repeat/no-repeat/repeat-x/repeat-y)

- top/bottom/left/right/center  px(left) px(top)/% % .

- 아무것도쓰지않으면 left top 을 기본값으로 가진다.

 

a태그를 사용한 링크 이미지

- 이미지태그를 a태그로 감싸면 이미지 태그에 하이퍼링크가 걸린다.

   ex) <a href="도메인주소" target="_blank><img src="이미지경로/파일명.jpg" alt="이미지"></a>

 

 

<map> 태그

- 이미지의 특정 부분을 지정 분할에서 링크를 연결하는 것.. 

- <area> 태그와 함께 사용해야 한다.

- shape는 이미지 크기를 지정한다

 - <map name> 이미지 맵의 이름을 지정한다. 여기 이름이 img태그의 usermap 속성에 사용된다.

 

ex)

<img src="도메인주소"  usemap="#imgMap">

<map name="imgMap">

  <area shape="rect" coords="1, 1, 2, 2" href="도메인주소" target="값" alt="값" />

  <area shape="rect" coords="4, 4, 6, 6" href="도메인주소" />

</map>

 

*맵은 수정중