HTML 기본요소 (5) 이미지
Image
이미지(image)란 2차원 평면 위에 그려진 시각적 요소를 의미한다. 웹 페이지에는 이러한 이미지가 매우 중요한 요소 중 하나이다.
웹 페이지에서 사용 가능한 이미지의 종류는 다음과 같다.
- JPEG Images
- GIF Images
- PNG Images
HTML에 이미지를 추가할 때는 <img>태그를 사용한다.
<img>태그는 종료 태그가 없는 빈 태그(empty tag)이며, 다음과 같은 문법으로 사용된다.
<img src="이미지주소" alt="대체문자열"/>
이미지의 삽입
| <html> <head> <title>이미지</title> </head> <h1></h1> <body> <img src="yul.png" alt="yulvely logo"/> </body> </html> |
이미지 크기 (width, height)
HTML에서는 style 속성을 사용하여 이미지의 크기를 설정할 수 있다.
또한, width 속성과 height 속성을 이용하면, 이미지의 너비와 높이를 각각 픽셀(pixel) 단위로 설정할 수도 있다.
위의 두 가지 방법 모두 HTML5 표준에는 적합한 방법이지만, 나중에 배우게 될 CSS를 이용한 내부 스타일 시트나 외부 스타일 시트와 상관없이 이미지의 원래 크기를 유지하려면 style 속성을 사용하는 것이 좋다.
| <html> <head> <title>이미지크기</title> </head> <h1></h1> <body> <img src="yul.png" alt="yulvely logo"style="width:256px;height:256px;"> </body> </html> |
이미지 alt 속성
alt는 이미지를 표시 할 수없는 경우 이미지에 대한 대체 텍스트를 표시한다.
| <html> <head> <title>이미지</title> </head> <h1></h1> <body> <img src="noimage.png" alt="이미지가 없습니다."> </body> </html> |
이미지 테두리(border)
border 속성을 사용하여 이미지의 테두리 사용 여부와 굵기를 설정할 수 있다.
| <html> <head> <title>이미지테두리</title> </head> <h1></h1> <body> <img src="yul.png" alt="이미지 테두리" style="border: 3px solid black"> </body> </html> |
이미지에 링크(link) 설정
이미지에 <a>태그를 이용하여 링크를 설정할 수 있다.
| <html> <head> <title>이미지 링크설정</title> </head> <h1></h1> <body> <a href="http://analytics-yulvely.tistory.com/entry/HTML-기본요소-5-이미지" target="_blank"> <img src="yul.png" alt="flag"> </a> </body> </html> |
이미지 맵 만들기
HTML에서는 <map>태그를 이용하여 이미지 맵(image map)을 제작할 수 있다.
이미지 맵(image map)이란 이미지의 일부를 클릭할 수 있도록 만들어서 버튼처럼 사용하는 기능을 의미한다.
<map> 태그의 usemap 속성을 <map>태그의 name 속성과 연결하면 이미지와 맵사이의 관계가 설정된다.
<map> 태그는 하나 이상의 <area> 태그를 가지며, 이 <area>태그가 바로 버튼과 같은 역할을 한다.
| <html> <head> <title>이미지 맵 만들기</title> </head> <h1></h1> <body> <img src="yul.png" usemap="#image-map"> <map name="image-map"> <area target="_blank" alt="notebook" href="/yul.png" coords="29,81,114,80,111,131,31,134" shape="poly"> <area target="_blank" alt="left eye" href="/yul.png" coords="44,62,53,59,61,64,53,67" shape="poly"> <area target="_blank" alt="right eye" href="/yul.png" coords="79,66,89,58,98,63,89,67" shape="poly"> </map> </body> </html> |
좌표값을 알려주는 사이트
Free Online Image Map Generator
Easy free online html image map generator. Select an image, click to create your areas and generate html your output!
www.image-map.net
PC에 있는 이미지를 가져올 것 인지, 웹사이트에서 이미지를 가져올건지에 따라 버튼을 눌러줍니다.
shape선택해주시고, 해당 링크, 타이틀, target값을 설정해줍니다.
모든 맵 작업이 끝나면 하단에 있는 'Show Me The Code!'버튼을 눌러줍니다.
그럼 팝업창이 뜨며, 바로 사용할 수 있는 html코드가 나옵니다
1. 이미지의 usemap="이름"과 map name="이름"을 통일하게 지정해줍니다.
2. shape="속성값"은 영역의 모양을 의미합니다.
- react : 직사각형
- circle : 원형 모양
- poly : 형 영역
- default : 전체 영역
3. coords="정의"는 영역의 좌표를 의미합니다.
4. 링크가 없을땐 nohref 로 정의해줍니다.
img 태그
- usemap : 이 이미지에서 map을 사용할 것임을, 브라우저에게 알려준다. 사용할 map의 이름을 넣어준다.
map 태그
- name : map 태그에게 붙여줄 이름.
- id : name 속성에서 정한 것과 동일한 이름을 넣는다.
area 태그
- shape : map의 모양. 링크를 걸어줄 영역의 모양. 기본값인 default는, 이미지의 전체 영역. default, rect, circle, poly 중에서 하나를 선택하여 사용한다.
- coords : map의 좌표. 다각형(poly)일 경우, 최소 3개의 좌표가 필요하다.
- alt : “스크린 리더” 사용자처럼 이미지를 볼 수 없는 경우, 또는 이미지를 불러올 수 없는 브라우저를 위한 설정. 이미지를 대신할 문구를 넣어준다.
- title : 말풍선. 해당 영역으로 마우스를 가져갔을 때 나타나는 문구.
- href : 클릭시 이동할 URL.