[HTML] Images - 13강 강의노트

- Image tag

웹페이지에 이미지를 어떻게 표현하나?

<img>태그를 이용하여 표현한다.

img 태그의 속성 중 가장 중요한 것은 src이다.

src의 값에는 경로, 파일명 등이 들어가게 된다.

alt 속성에는 대체문구를 넣는다. 웹 접근성을 위해 반드시 사용하는 것을 추천한다고 했다.

width, height는 너비 높이. 미리 정해두면 로딩 속도가 빠르다더라.

이미지가 심한 고화질에, 그 숫자도 심하게 많으면 서버에 과부하가 걸리는 요인이 되므로 적절하게 조절해야 한다.

img의 위치를 위해 align 속성을 쓰면 안된다.

예전엔 썼지만, HTML 4 이후로는 지원하지 않는 기능이다.

대신 Style = "float : left"이런 식의 style 속성을 사용하라.

한 이미지 내에서 특정 부위를 눌렀을 때 링크가 걸리게 하려면?

image maps을 사용한다.

우선 사진을 올리기 위해 <img>태그를 통해 사진을 프린팅하고, img 태그 안에 usemap이라는 속성과 그 아이디 값을 적어준다.

(id값 = #something)

그 후, ID(#planetmap)에 대한 정보를 가진 맵 태그를 만들어준다.

map 태그의 name속성에 들어가는 값과 img 태그의 usemap속성의 id값이 같아야 한다.

그 후 이미지의 특정 지역에 링크를 걸어줘야 하는데, 특정지역 하나하나를 area 태그로 잡아주면 된다.

area의 형태는 사각형, 원 등이 있다.

(shape = "value")

사각형의 위치 설정은, 좌상단 (x1, y1)좌표와 우하단 (x2, y2)좌표를 통해 할 수 있다.

(ex. coord = "x1, y1, x2, y2")

원의 위치 설정은 중심점(x1,y1)과 반지름을 통해 할 수 있다.

(ex. coords = "x1, y1, r")