HTML5+CSS3 - 이미지 관련 태그

웹에서 사용할 수 있는 이미지 파일 형식은 GIF, JPG, PNG이다.

편집한 이미지는 용량이 커지므로, 이미지를 편집할 때는 HTML5의 Canvas API를 이용한다.

<img> 태그 - 이미지 넣기

<img src="경로" [속성="속성값"]>

이미지 태그는 인라인 태그이다.

src 속성: 이미지와 파일 경로 지정하기

경로 표시를 위해 반드시 사용한다.

HTML 파일 기준으로 경로가 정해지며, 다른 인터넷상에 있는 이미지의 주소를 알면 그 주소를 사용할 수도 있다.

웹서버에 올려두어야 어디서든 이미지를 볼 수 있다.

width, height 속성: 이미지 크기 조정하기

픽셀(px) 단위로 조정한다.

alt 속성: 이미지를 설명해 주는 대체 텍스트 추가

경로가 잘못되었거나 하는 이유로 이미지가 보이지 않을 때 표시되는 텍스트를 지정해준다.

<img src="test.jpg" alt="테스트">

title 속성: 툴팁 표시하기

이미지에 마우스를 갖다 댔을 때 툴팁이 표시되게 한다.

usemap 속성: 이미지 맵 지정하기

이미지 맵이란 하나의 이미지에 여러 개의 링크를 걸어 놓은 것이다.

<map> 태그를 사용해서 이미지 맵을 만들고, <img> 태그에서 usemap 속성으로 해당 이미지 맵을 지정한다.

<img src="maptest.png" usemap="#imagemap">

<map name="imagemap">

  <area shape="rect" coords="0,0,50,50" href="http://naver.com">

  <area shape="rect" coords="100,100,130,1300" href="http://google.com">

</map>

shape 속성은 영역의 모양이다. 원이나 다각형 사각형 등이 가능하다.

coords 속성은 좌표값이다. 시작점x, 시작점y, 끝점x, 끝점y

href 속성은 링크지정.

위와 같이 하면 하나의 이미지에 2군데에 링크가 생성되는 것이다.

coords 속성에 이미지의 좌표값을 지정해줘야하는데, 좌표값을 알기 위해서는

그림판으로 해당 이미지 파일을 열어서 보기-눈금자를 선택하고 마우스 포인터를 해당 위치로 가져다 대면 그림판 프로그램 왼쪽 하단에 x,y 좌표가 표시된다.

<figure> 태그 - 캡션 대상 지정하기

이미지에 캡션을 붙이기 위해 대상을 지정하는 태그이다.

캡션은 이미지, 오디오, 비디오 등 미디어 파일에 붙일 수 있고, 텍스트 단락에도 붙일 수 있다.

여러 개의 미디어 파일을 하나로 묶어서 붙일 수도 있다.

<figure>

  캡션 붙일 요소들..

</figure>

태그 안에 여러개의 요소를 넣으면 요소들은 연달아 표시되며, 하나의 캡션이 붙게 된다.

<figcaption> 태그 - 캡션 설명 붙이기

<figcaption> 내용 </figcaption>

<figure> 태그로 묶어 놓은 영역에 실제 캡션을 적용한다.

<figure>

  캡션 붙일 요소들..

  <figcaption> 이것은 캡션이다. </figcaption>

</figure>