<img> 이미지 태그

<aside> 💡 <img src=“경로” alt=“설명 문구” wigth=“넓이” height=“길이” >

</aside>

• src → 삽입할 이미지 경로를 지정하는 속성
• alt → 이미지 설명해주는 텍스트 속성, 대체 텍스트
• width, height → 이미지의 크기를 설정하는 속성

< 고정 크기 단위 >

• 화면 사이즈가 줄어도 크기가 변하지 않는다.
  • 픽셀 단위로 나타냄.

<img src="sample/image/flower1.PNG" witdh="200px" height="150px">
<img src="sample/image/flower2.PNG" witdh="200px" height="150px">

< 가변 크기 단위 >

• 화면 사이즈 혹은 기준이 브라우저 화면 사이즈에 따라 변경된다.
  • 화면 전체 기준의 퍼센트 단위로 나타낸다.

<img src="sample/image/flower1.PNG" witdh="15%" height="150px">
<img src="sample/image/flower2.PNG" witdh="15%" height="150px">

< 이미지 구역을 2개로 나누어 각각 링크 설정 >

<img src="sample/image/river1.PNG" usemap="#map1" width="600px" height="500px">
    <map name="map1">
        <area shape="rect" coords="0, 0, 300, 500" href="<http://www.naver.com>" target="_blank">      
        <area shape="rect" coords="300, 0, 600, 500" href="<http://www.google.com>" alt="_self">
    </map>

• **1. 가로 600px, 세로 500px 크기의 이미지 설정

2. 처음(0, 0) 부터 끝(300, 500)까지 사각형 모양의 부분을 클릭하면 네이버 이동
3. 처음(300, 0) 부터 끝(600, 500)까지 사각형 모양의 부분을 클릭하면 구글 이동**

[ 미디어 태그 ]

<audio></audio>