반응형
오늘은 a 태그와 이미지 태그에 대해서 알아보겠습니다. 요즘 쇼핑몰, 뉴스 등 이미지를 사용하지 않는 곳이 없습니다. 하지만 이미지를 사용하실 때는 주의할 점이 있습니다. 바로 "저작권"입니다. 개인적으로 이용하는 것이 아닌 상업적으로 이용하려는 이미지는 항상 저작권을 주의해야합니다. 이미지뿐만 아니라 글꼴, 동영상 등 모든 것들에는 저작권이 있습니다. 항상 주의하시고 사용하시길 바랍니다.
1. 이미지 태그 <img>
| 이미지 태그 속성 | 의미 |
| src | 이미지 경로 |
| width | 이미지 너비 |
| height | 이미지 높이 |
| title | 이미지 풍선 도움말 |
| border | 이미지 테두리 두께 |
| alt | 이미지가 로딩이 되지 않았을 때 보여주는 텍스트 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>이미지에 대해서 ..</title> </head> <body> <h1>이미지태그를 사용하는 방법</h1> <img src="pic_trulli.jpg" alt="움막집이미지" title="움막집" width="300" height="230"> </body> </html>
절대 경로와 상대 경로
이미지 태그에 src 속성에는 이미지 경로를 적는 방법에는 두 가지가 있습니다. 절대 경로와 상대 경로입니다.
- 절대 경로: C:\경로\파일명과 같이 C:부터 시작하는 경로를 말한다.
- 상대 경로: 현재 기준에서 이미지 파일까지의 경로를 말한다.
2. 이미지 태그와 함께 사용하는 링크 태그 <a> 와 <map> 태그
<!doctype html> <html> <head> <meta charset="utf-8"> <title>이미지에 대해서 ..</title> </head> <body> <h1>이미지태그를 사용하는 방법</h1> <img src="pic_trulli.jpg" alt="움막집이미지" title="움막집" width="300" height="230" usemap="#Map"> <map name="Map"> <area shape="rect" coords="8,9,110,192" href="http://www.daum.net" target="_blank" alt="다음으로 갑니다."> <area shape="circle" coords="178,63,49" href="http://www.google.com" target="_blank" alt="구글로 갑니다."> <area shape="poly" coords="238,23,289,23,288,178,201,177,227,101" href="http://www.nate.com" target="_blank" alt="네이트로 갑니다."> </map> <!--</a>--> </body> </html>주로 쇼핑몰 같은 곳에서 이용하는 태그로 <img> 태그 내부에 usemap 속성을 작성하고, <map> 태그를 작성하면 됩니다. 주의할 점은 usemap에 작성한 이름과 map name에 작성한 이름이 동일해야합니다.
| map 태그 속성 | 의미 |
| shape | 형태 |
| coords | 좌표 |
| href | 이동할 링크 |
shape 속성에는 circle(원), rect(사각형), poly(다각형)으로 총 3가지의 형태를 제공합니다. 형태에 따라서 coords 속성인 좌표값을 다르게 설정할 수 있습니다.
| 형태 | 좌표 |
| circle (원) | 원중심 x, y, 반지름 |
| rect (사각형) | x1, y1, x2, y2 |
| poly (다각형) | x1, y1, x2, y2, ··· x1, y1(닫히는 점) |
첫 번째 기둥은 다음 사이트, 두 번째 기둥은 구글 사이트, 세 번째 기둥은 네이트 사이트로 이동하도록 설정하였습니다.
반응형
'웹 디자인 > HTML · CSS' 카테고리의 다른 글
| [HTML/CSS] <video> 태그로 간단한 동영상 설정하기(iframe 태그) (1) | 2021.12.18 |
|---|---|
| [HTML/CSS] table 태그로 표 만들기 (tr, th, td 태그) (0) | 2021.12.17 |
| [HTML/CSS] 기본적인 글꼴 태그 알아보기 (0) | 2021.12.08 |
| [HTML/CSS] 필수 태그와 주석 처리 알아보기 (html, head, body 등) (0) | 2021.12.07 |
| [HTML/CSS] 블록과 인라인 요소 태그 종류와 특징 (0) | 2021.12.04 |