## img 태그 ##
-> 웹 페이지에 사진이나 그림을 삽입할 때 사용하는 태그
속성
src : 삽입할 이미지 경로를 지정하는 속성
alt : 이미지를 설명해주는 텍스트 속성 (만약 이미지가 깨졌을 경우
출력되는 글자)
width,height : 이미지의 크기를 설정하는 속성
작성법
<img src="경로" alt="설명 문구" width="넓이" height="길이" />
※ 웹 페이지 사용 가능한 확장자
GIF : 파일 크기가 작아 아이콘이나 블릿 기호에 많이 사용
투명한 배경이나 움직이는 이미지를 만들 수 있음
- 블릿 기호 : 특수 기호 같은 것
JPG/JPEG : 사진을 위해 개발된 확장자, 저장을 반복하다 보면 화질이
떨어 질 수 있음
PNG : 네트워크용으로 개발되었고, 요즘 많이 사용함
## 이미지 맵 태그 <map>, <area> ##
-> 이미지를 구역별로 나누어 링크를 걸어주는 태그
-> <img> 태그에 usemap 속성을 지정해야 함
속성
alt : 대체 텍스트 지정
coords : 분할할 지역 좌표 지정(시작,끝)
href : 링크 페이지 경로 지정
media : 링크 페이지 최적화 미디어 지정
rel : 현재 페이지, 링크페이지 관계 지정
shape : 링크로 사용할 영역 형태 지정 (default, rect, circle, poly)
target : 링크페이지가 열릴 위치 (새창, 현재창, 부모창, 취상위창)
작성법
<img src="경로" usemap="#tt">
<map name="tt">
<area shape="모양" coods="00,00(시작),00,00(끝) href="링크경로"
target="위치">
</map>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--강아지의 머리 다리부분을 클릭하면 다른데로 이동할수 있도록 할것이다. -->
<img src="img/dog.jpg" usemap=?#tt>
<map name="tt">
<!--머리부분 클릭하면 머리로 이동할 것이다. -->
<area shape="circle" coords="247,95,70" href="/img/head.jpg">
<area shape="circle" coords="365,296,56" href="/img/disk.jpg">
<area shape="circle" coords="529,329,57" href="/img/leg.jpg">
</map>
<!--위치값을 잡을때에는 http://maschek.hu/imagemap/imgmap/ 사이트를 참조하길 바랍니다.
여기들어가서
도구사진 갖고오면 업로드가 된다.
업로드 버튼 눌러라 그후 원으로해서 값다 갖고오면 된다.
-->
</body>
</html>
'IT일반과목 > HTML5+CSS3' 카테고리의 다른 글
| 20180907 멀티미디어태그 (하이퍼링크 a태그) (0) | 2018.09.07 |
|---|---|
| 20180907 멀티미디어태그 (오디오 태그, 비디오 태그) (0) | 2018.09.07 |
| 20180907 학원수업 영역태그, 이미지삽입 등 (0) | 2018.09.07 |
| 20180906 (HTML 글자태그, HTML 목록태그,실습) (0) | 2018.09.06 |
| 20180905 학원수업 과제1 (0) | 2018.09.06 |
