HTML_이미지개념

<img>

: 이미지 불러오는 태그이다

: 종료태그가 존재하지않는다.

: 인라인요소이다.

src 속성

: 불러올 이미지 파일의 경로를 설정한다.

<img src="sample/sample/image/river1.PNG">

 alt 속성

: 사진의 경로가 잘못 되었거나 이미지를 제대로 표현할 수 없는 경우 대체 텍스트의 용도로 사용한다.

: 화면 낭독기의 경우 사진은 읽을 수 없기 때문에 대체되는 텍스트로 읽는다.

 

<img src="s/sample/image/river1.PNG" alt="강 사진">

src 속성에 설정한 파일 경로의 이미지가 뜨지 않으면 alt 속성에 있는 "강 사진" 텍스트로 대체된다.

 

width와 height 사용

고정 크기 단위 : 화면 사이즈가 바뀌어도 크기 불변(px)

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

가변 크기 단위 : 화면 사이즈/기준 사이즈에 따라 크기 변경(%)

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

 

<iframe></iframe>

: 웹페이지에 다른 웹페이지를 삽입하기.

: 연결을 막아놓은 페이지는 가져올 수 없다.

<iframe width="854px" height="480px" src="https://www.naver.com"></iframe>

사이즈를 정해주고 src=""에 가져올 페이지주소를 넣는다.

 

이미지 구역을 나눠 각각 링크 설정하기

<map></map>

: 이미지를 클릭할 수 있게 설정할 수 있다.

: 이미지 맵을 만드는 태그이다

 

usemap=""

: 하나의 이미지의 구역을 나눠 각각 링크 설정할 수 있다.

: usemap="#맵이름"

 

# = id

 

target=""

: 새로운 탭으로 열기

 

<area shape="rect" coords="0, 0, 300, 500" href="https://www.naver.com" target="_self">

사각형으로 (위치)0,0에서부터 가로 300 세로 500 사이즈를 네이버로 넘어가게 하겠다.

target : "_self" 같은 탭에서 이동(기본적으로 사용) 

<area shape="rect" coords="300, 0, 600, 500" href="https://www.google.com" target="_blank">

사각형으로 (위치)300,0에서부터 가로 300 세로 500 사이즈를 구글로 넘어가게 하겠다.

target : "_blank" 새로운 창을 만들어 준다.