복습2(img 태그)

<img>태그.

이미지.

 

<img> 콘텐츠가 없는 태그.

하지만 태그만으로는 이미지 표시할 수 없음.

속성 사용

src 속성

<img src="파일경로\파일명.확장자">

파일 경로의 경우 html문서와 같은 폴더에 있다면 이미지명만 사용해도 됨.

다른 폴더라면 폴더주소를 넣어줘야함.

ex)a 폴더안에 html문서와 이미지 x 가 같이 있는 경우

<img src ="./x.jpg">

./ -> 현재 폴더

../ -> 상위 폴더

../../-> 상위폴더의 상위폴더. 계속 추가 가능

ex)a 폴더안에 b폴더 안에 이미지 x 가 있는 경우

<img src ="b/x.jpg">

=>내 컴퓨터안에 있기 때문에 '내부리소스 이미지 방법' 이라고 함.(맞는지..? 아마 맞을듯?)

주소를 제대로 안쓰면 엑박/깨진 아이콘

alt ->추가 설명을 위한 속성

ex) <img src ="./a.jpg" alt ="이미지 설명">

 

=> img 태그를 쓸 때는 반드시 src 와 alt를 사용해야함.

 

width -> 가로 길이 속성. px 단위로 입력해야함

height -> 높이 길이 속성. px 단위

ex)

width = "100"  (자동으로 픽셀단위로 설정됨) 높이도 자동으로 비율에 맞춰 조정됨.

height = "100" (자동으로 픽셀단위 설정) 가로가 비율에 맞춰 조정

 

동시에 사용시 둘 다 입력값에 맞춰짐.

-> 이미지의 원래 비율이 손상될 수 있다는 점을 유의.

 

ex)

width = "50%"

=> 원래 이미지의 50%의 크기로 표시.

 

외부 리소스 이미지 방법

<img src="외부이미지 링크">

구글에 가서 구글 로고를 우클릭하면 '이미지 새탭으로 열기' 가능.

이미지가 저장되어 있는 서버의 링크 주소가 나옴.

해당 주소를 입력하면 외부이미지링크 삽입 완료

 

ex)

<img src ="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

 

앞서 공부하였던 a 태그로 img태그를 감싸면 이미지를 클릭했을 때 a태그의 주소로 이동할 수 있다.

ex)<a href = " https://www.google.com" target ="_blank">  => 이러면 새탭.

<img src = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

</a>