<LINK>
현재 문서와 외부의 문서간의 연결 관계를 기술하는 태그
주로 <head> 태그 안에서 CSS의 stylesheet 문서를 연결할 때 사용
예)
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
<img>
이미지를 웹 페이지에 표시함.
해당 웹 사이트에 있는 파일 뿐만 아니라 외부에 있는 파일도 사용 가능함.
src, alt 등의 필수 속성과 width, height, align 등의 추가 속성을 가짐.
필수 속성
src 절대경로 : 외부 웹사이트의 전체 경로를 입력
예) src=http://static.naver.com/www/u/2010/0504/191841282.gif
src 상대경로 : 문서가 존재하는 웹 사이트의 경로를 입력
예) src="naver.gif"
alt : 이미지를 표시하지 못할 때 나타나는 문자열로, 모바일 기기나 시각장애가 있는 경우 사용하는 스크린리터 등의 웹 브라우저에서 이미지 대신 사용됨.
추가 속성
align : 이미지 출력 시 정렬을 결정함. (이 설정은 사용하지 않도록 권고되었음.)
top, bottom, middle, left, right
border : 이미지의 테두리 굵기를 결정함. (이 설정은 사용하지 않도록 권고되었음.)
pixels
height : 이미지의 높이를 결정함.
pixel을 숫자 ("10px" or "10")로 입력하거나 percent로 ("20%") 입력함.
width : 이미지의 넓이를 결정함.
pixel을 숫자 ("10px" or "10")로 입력하거나 percent로 ("20%") 입력함.
usemap : 이미지 내 링크가 있는 경우, 참고할 <map> 태그의 이름을 결정함.
#mapname
<map>, <area>
이미지 전체에 링크를 걸지 않고 이미지 안에서 부분 부분 링크를 만들 필요하 있을 경우 사용함.
링크 영역 설정
<map> : <img> 태그의 usermap 속성에 값으로 들어갈 name 속성을 지정
<area> : <img> 태그에서 image map 태그 안에서 링크 영역을 지정하는 태그
영역설정방법
1. default : 기본 설정으로 이미지 전체에 링크를 삽입
2. rect : 사각형으로 영역의 좌측 상단 좌표와 우측 하단 좌표를 이용하여 영역 설정
3. circle : 원형으로 원의 중심 좌표로부터 넓이를 지정하여 영역 설정
4. poly : 선들을 이어 다각형 영역 설정
참고) 검색사이트에서 "image mapper" 키워드로 검색하면 이미지 맵핑 프로그램을 찾을 수 있음.
예)
<html>
<head>
<title>img 태그 사용 예</title>
</head>
<body>
<img src="../imgs/spaghetti.jpg" usemap="#spaghetti" border="0">
<map name="spaghetti">
<area shape="circle" coords="210,139,120" href="http://ko.wikipedia.org/wiki/스파게티" title="스파게티">
</map>
</body>
</html>
[출처] <LINK>, <img>, <map>, <area> 태그|작성자 해리
'Study > Html|JavaScript' 카테고리의 다른 글
| [new Date()] 하루전 일자 구하기 (0) | 2015.03.01 |
|---|---|
| [HTML5] context.arc() (0) | 2014.10.28 |
| [JAVASCRIPT] eval() 사용법 (0) | 2014.10.15 |
| [JavaScript] 부모창에 창 띄우기 (0) | 2014.08.05 |
| [JavaScript] cs에서 javascript alert 사용하기 (0) | 2014.03.28 |