★이미지 태그
웹에서 사용할 수 있는 이미지 파일 형식(▼)
|
파일 형식 |
설명 |
|
GIF (Graphic Interchange Form) |
JPG나 PNG 형식에 비해 파일 크기가 작지만 표시할 수 있는 색상 수가 최대 256가지뿐으로, 웹 페이지에서 아이콘이나 불릿 등 작은 이미지에 주로 사용 투명한 배경이나 움직이는 이미지를 만들 수 있음 |
|
JPG 또는 JPEG (Joint Photographic Experts Group) |
사진을 웹 페이지에 넣기 위해 개발된 형식이기 때문에 GIF에 비해 다양한 색상과 명암을 표현할 수 있음 대부분의 디지털카메라에서 JPG형식으로 파일을 저장 |
|
PNG (Portable Nework Graphics) |
투명 배경을 만들 수 있고 사물이 가진 색상도 최대한 그대로 유지되기 때문에 최근에 많이 사용 |
하지만!
- 웹 사이트에 해상도가 높은 사진도 업로드가 가능해 졌지만 모바일에서 다운로드 하기에 시간과 데이터 비용의 소모가 크다.
- 또한 모바일의 화면도 데스크탑에 비해 작기 때문에 작은 화면에서는 이미지의 제 크기를 보여주기 어렵다.
이런 단점이 존재한다.
따라서 요즘은 PC용 웹 사이트와 모바일용 웹 사이트를 따로 제작한다.
즉, 이미지 삽입 후 CSS를 이용하거나 Canvas API를 이용해 원래의 이미지를 편집하지 않고 텍스트 형식의 소스 코딩을 통해 이미지를 편집한다.
<img>태그 - 이미지 넣기
- 기본형 : <img src="경로" 속성="속성값">
- <img>태그의 속성
<img src="경로">
이미지 파일과 웹 문서 파일(.html)이 같은 경로에 존재 : 이미지 파일의 이름만 사용
<img src="image.jpeg">
:
이미지 파일이 웹 문서 파일(.html)의 하위 폴더에 존재 : 하위 폴더이름과 이미지 파일 이름 사용
<img src="images/image.jpeg">
:
이미지 파일이 이미 인터넷에 올라와 있을 경우 : 인터넷에 올라와 있는 이미지의 URL을 사용(웹 이미지는
인터넷에 접속할 수 있어야 표시됨)
저작권의 문제를 조심해야함
: :
<img src="경로" width="number" height="number">
브라우저 창에 원하는 크기로 조정하여 넣고 싶을 때 사용
사용 안 할 경우 원본 이미지 크기 그대로 화면에 표시됨
↓
:
<img src="image.jpeg" width="300" height="150">
:
↓
<img src="경로" alt="...">
이미지가 보이지 않고 엑스박스로 뜨는 경우나 시각 장애인을 위해서 등 alt 속성이 필요(시각장애인의 경우 화면 리더기가 이미지에 대해 읽어주기 위해 대체 텍스트가 필요)
대체텍스트 입력 시 검색엔진에서 이미지를 더 잘 노출해줌
메뉴나 로고처럼 특정 텍스트를 포함한 이미지 파일의 경우 대체 텍스트는 이미지 파일에 보이는 글자들을 그대로 넣어주어야 함
<img src="경로" title="...">
마우스 포인터를 이미지 파일에 갖다 대었을 경우 포인터 자리에 작은 설명 상자가 표시되게 하는것을 툴팁(tooltip)이라 한다.
툴팁은 title속성을 사용
<img src="경로" usemap="#abc">
<map name="abc">
<area shape="rect" coords="0, 0, 128, 116" href="경로">
<area shape="rect" coords="129, 0, 250, 116" href="경로">
</map>
이미지 파일 클릭 시 #abc 맵에 연결해 해당되는 링크로 연결
shape 속성과 coords 속성을 이용해 해당되는 영역 설정
(이미지 파일명 : map.png)
<img src="map.png" usemap="#favorites">
<map name="favorities">
<area shape="rect" coords="0, 0, 128, 116" href="http://www.twitter.com/">
<!-- "0, 0, 128, 116"은 (0, 0) ~ (128, 116) 영영을 말함-->
<area shape="rect" coords="129, 0, 250, 116" href="https://www.facebook.com/">
<!-- "129, 0, 250, 116"은 (129, 0) ~ (250, 116) 영역을 말함-->
</map>
:
<figure>태그 - 캡션 대상 지정하기
- 기본형 : <figure>
캡션을 붙일 요소
</figure>
- 이미지 뿐만 아니라 오디오, 비디오 같은 미디어 파일 또는 텍스트 단락에 캡션을 붙일 때 사용
- <figure>태그만 사용할 경우 브라우저 상으로는 표시되지 않지만 브라우저에게 특정 위치에 미디어 파일이 존재함을 알려주기 위해 사용하기도 함
- 단순히 이미지를 묶고 싶을 경우 <div>태그 사용
<figcaption>태그 - 캡션 설명 붙이기
- 기본형 : <figcaption>...</figcaption>
- <figure>태그를 사용해 캡션을 붙일 대상을 묶어 놓은 후 <figcaption>태그를 사용해 캡션을 붙임
※실습하기※
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<
figure><img src="pen.png" width="200" height="200">
<img src="pencil.png" width="200" height="200">
<img src="eraser.png" width="200" height="200">
<figcaption>학용품</figcaption>
</figure>
<figure>
<img src="shirt.png" width="200" height="300">
<img src="pants.png" width="200" height="300">
<img src="socks.png" width="200" height="300">
<figcaption>옷</figcaption>
</figure>
</body>
</html>
▲결과
'Programming > HTML5' 카테고리의 다른 글
| [9장] 실습 (0) | 2015.07.20 |
|---|---|
| [8장]HTML5 태그(5) - 멀티미디어 태그 (0) | 2015.03.20 |
| [6장]HTML5 태그(3) (2) | 2015.01.27 |
| [5장]File Zilla 사용법 (0) | 2015.01.24 |
| [4장]HTML5 태그(2) (0) | 2015.01.24 |
