<HTML5+CSS3> HTML5와 이미지

웹 문서와 이미지

-웹에서 사용할 수 있는 이미지 파일 형식은 

GIF-JPG나 PNG형식에 비해 파일 크기가 작지만 표시할 수 있는 색상 수가 최대 256가지뿐으로 아이콘이나 작은 이미지에 사용 투명한 배경이나 움직이는 이미지에 사용

JPG,JPEG-사진을 웹 페이지에 넣기 위해 개발된 형식 GIF에 비해 다양한 색상과 명암을 표현 디지털 카메라에서 저장하는 사진 파일은 대부분JPG 형식이다.

PNG-투명 배경을 만들 수도 있고 사물이 가진 색상도 최대한 그대로 유지되기 때문에 최근에 많이 사용되는 이미지 파일 형식.

<img>태그 -이미지 넣기

웹 문서에 이미지를 삽일할 때는 <img>태그를 사용한다. 이 태그는 인라인 태그이므로 이미지 바로 옆에 다른 요소가 나란히 배치된다. 즉 <p>태그 같은 블로 태그는 스스로 자신만의 영역을 가지기 때문에 앞위로 줄바꿈이 생기지만 <img>태그 같은 인라인 태그는 스스로 영역을 가지지 않기 때문에 다른 요소들 사이에 끼어들어간다.

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

src 속성은 이미지 파일이 있는 경로를 표시하기 위해 반드시 사용해야 하며, 그 외의 속성은 필요에 따라 생략할 수도 있다.

ex) <img src="home.png">

<img>이미지 태그의 속성

앞에서 웹 문서에 이미지를 삽입할 때는 <img>태그를 사용한다고 했지만 <img>태그를 넣을때 src와 같이 이미지 경로를 성정해 주는 속성도 함께 쓰는데 꼭 알고 가야하는 속성을 살펴보겠습니다.

1.src속성-이미지와 파일 경로 지정하기

-이미지 파일의 경로는 웹 문서 파일의 위치를 기준으로 정해진다. 같은 폴더면 그냥 이름하고 확장자만 적으면 되지만 하위 폴더면 <img src="폴더명/이미지이름.확장자"> 이렇게 적어줘야 한다.

2.width,height속성 - 이미지 크기 조정하기

-width와 height속성을 사용하지 않는다면 워본 이미지 크기 귿그대로 브라우저 화면에 표시 된다.

3.alt속성

-서핑을 하다보면 이미지가 보여야 할 자리에 X표시가 보이는 경우가 종종있는데 이는 시각 장애인을 위한 화면 리더기가 지에 대해 읽어줄 대체 텍스트를 넣기위해 alt속성을 사용한다

ex)<img src="ddd.jpg" alt="홈으로 가기>

이처럼 alt속성을 이용해 대체 텍스트를 지정할 때 메뉴나 로고 또는 내용을 눈에 띄게 하기 위해 그래픽으로 처리한 텍스트 등 내용이 포함된 이미지들을 사용했다면 alt에 이미지 파일에 보이는 글자들을 그대로 넣어줘야한다.

그러나 특별한 의미가 없는 아이콘 같은 경우 alt="" 이렇게 지정하면 된다.

4.title 속성(툴팁 표시하기)

-이미지 위로 마우스 포인터를 가져갔을 때 작은 설명 상자가 표시되게 할수 있는 것을 툴팁이라고 한다.

ex)<img= src="daw.png" alt="요안도라 자세히 보기" title="동백꽃 뚝뚝 떨어지는 요안도라">

5.usemap속성 (이미지 맵 지정하기)

-하나의 이미지에 여러 개의 링크를 만들어 놓은 것을 이미지 맵이라고 한다. 즉 한 이미지상에서 클릭하는 위치에 따라 서로 다른 링크가 열리는 것이다.

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

shape속성은 맵의 형태를 지정하는 것으로 사각형(rect)등이있고

coords 좌표에는 사각형 영역의 시작 좌표와 끝 좌표를 차례로 입력하면 된다. 176p참고