16. HTML 이미지(Images)

① HTML에서는 <img> 태그를 이용하여 웹페이지에 이미지를 끼워 넣기위해 사용할 수 있다.

  ㉠ <img>태그는 종료태그가 없는 빈 태그이다.

  ㉡ <img>태그는 src와 alt라는 속성을 사용한다.

    ⓐ src 속성은 이미지의 경로를 나타낸다.

    ⓑ alt 속성은 이미지를 대신할 대체 텍스트를 나타낸다.

 

 

② src 속성은 이미지의 상대 경로 또는 절대 경로를 요구한다.

  ㉠ 이미지가 하위 폴더 혹은 상위 폴더에 있는 경우 상대 경로를 이용하면 편리하다.

  ㉡ 이미지가 다른 서버나 웹사이트에 있는 경우 절대 경로를 이용하면 편리하다.

③ alt 속성은 웹페이지 사용자가 어떤 이유로(느린 인터넷, 이미지 경로 오류 등) 이미지를 로딩할 수 없으면, alt 속성에 기술된 대체 텍스트가 표시된다.

④ width와 height 속성을 이용해 이미지의 너비와 높이를 지정할 수 있다.

  ㉠ width와 height를 사용한다.

 

 

  ㉡ style 속성을 이용해 width와 height를 사용할 수 있다.

    ⓐ 위의 방법과 마찬가지로 HTML 표준에 해당하지만, CSS를 이용한 내부 스타일 시트나 외부 스타일 시트와 상관없이 이미지의 원래 크기를 유지하려면 style 속성을 사용하는 편이 좋다.

 

 

⑤ 이미지로 링크텍스트를 대체할 수 있다.

  ㉠ <a> 태그의 내용으로 <img> 태그를 사용하면 된다.

 

 

⑥ float 속성을 이용해 이미지를 배치할 수 있다.

  ㉠ 좌측 정렬을 할 경우 이미지가 차지하고 있는 넓이를 제외하고 작성이 가능하다.

 

테

스

트

테

스

트

 

㉡ 우측 정렬을 할 경우 이미지가 차지하고 있는 넓이를 제외하고 작성이 가능하다.