img

<img> 태그는 HTML 문서에 이미지를 삽입하는 태그입니다.

기본형

<img src="images.jpg" alt="No image" width="540" height="360">

주요 속성은 다음과 같습니다.

• 
  src : 이미지의 경로(URI)
  


• 
  alt : 이미지를 설명해주는 대체 텍스트
  


• 
  width : 이미지의 가로 크기
  


• 
  height : 이미지의 세로 크기
  

src - 이미지 파일 경로

이미지를 HTML 문서에 넣으려면 src 속성에 정확한 파일 경로를 지정해야합니다.
경로가 정확하지 않다면 웹 문서에서 이미지가 표시되지 않습니다.

웹 상의 링크를 복사해 이미지 경로 지정하기

인터넷에 올라와 있는 이미지 링크를 복사해 이미지 경로를 지정해 보겠습니다.
크롬 브라우저에서는 웹 페이지에 넣고 싶은 이미지를 마우스 오른쪽 버튼으로
클릭하고 [ 이미지 주소 복사 ] 를 선택하면 이미지 경로를 알 수 있습니다. 이렇게
복사한 이미지 파일의 경로를 src 속성 값으로 지정할 수 있습니다.

<img src="https://www.blogger.com/img/logo_blogger_40px.png">

alt - 이미지를 설명해주는 대체 텍스트

alt 속성은 이미지를 설명하는 대체 텍스트를 삽입할 때 사용합니다. 대체 텍스트란
무엇이고 언제 사용할까요?


웹 페이지에 삽입한 이미지는 시각적인 요소이기 때문에 시각 장애인들은 그 내용을
알 수 없습니다. 웹 문서를 읽어주는 화면 낭독기도 문서 상의 텍스트만 읽어주기
때문에 이미지를 만나면 그대로 건너 뜁니다. 하지만
<img> 태그의 alt 속성을 작성하면 이미지에 대한 설명을 넣을
수 있고 시각 장애인에게 읽어 줄 수 있습니다.

<img src="home.jpg" alt="홈으로 가기">

하지만 특별한 의미 없이 화면을 꾸미기 위해 사용한 이미지에는 alt 속성에 대체
텍스트를 넣지 않아도 됩니다.

<img src="app.gif" alt="">

width, height - 이미지 크기 조정

이미지 파일을 웹 페이지에 추가 할 때 브라우저 창에 원하는 크기로 조정해 넣고
싶다면 width 속성과 height 속성을 사용하면 됩니다. width 속성과 height 속성을
사용하지 않으면 원본 그대로 표시됩니다.

이미지 파일의 용량은 그대로 두면서 웹 사이트의 디자인에 따라 이미지를 작게
또는 크게 표시해야 할 경우 이 속성을 사용하면 유용합니다.

다만, 작은 이미지를 크게 표시할 경우 화질이 나빠질 수 있습니다.

예제

예제 1

• width, height 속성을 정하지 않으면, 이미지 원본 크기 그대로 나옵니다.


• 만약 지정한 경로에 이미지가 없다면, alt 속성에 있는 값이 출력됩니다.

<img src="//bit.ly/2GrygUe" alt="My Image">
<img src="//bit.ly/2GrygUe_" alt="My Image">

<img src="//bit.ly/2GrygUe" alt="My Image">
<img src="//bit.ly/2GrygUe" alt="My Image" width="100">
<img src="//bit.ly/2GrygUe" alt="My Image" height="150">
<img src="//bit.ly/2GrygUe" alt="My Image" width="100" height="200">