HTML Images

• HTML Images

HTML <img> 태그는 웹 페이지에 이미지를 끼어 넣기 위해 사용합니다.

이미지는 기술적으로 웹 페이지에 삽입되지 않고, 웹 페이지에 링크됩니다.
<img> 태그는 참조할 이미지를 붙잡고 있는 공간을 만듭니다.

<img>태그는 비어있고, 속성만을 포함하며, 종료 태그(closing tag)가 없습니다.

<img>태그에는 2개의 필수 속성이 있습니다.

• src - 이미지에 대한 경로(path)를 지정합니다.
• alt - 이미지를 대체하는 텍스트를 지정합니다.

Syntax(씬텍스, 문법)

<img src="url" alt="alternate text">

필수인 src 속성은 이미지에 대한 경로(URL)를 지정합니다.

Note:
웹 페이지가 로딩되는 순간 웹 서버에서 이미지를 가져와서 웹 페이지에 삽입하는 것은 바로 브라우저입니다.
그러므로, 이미지가 실제로 해당 웹 페이지와 관계있는 동일한 곳에 있어야 합니다,
그렇지 않으면, 방문자에게 깨진 링크 아이콘이 표시됩니다.
브라우저가 이미지를 찾을 수 없는 경우, 깨진 링크 아이콘과 alt 텍스트가 표시됩니다.

어떤 이유로 사용자가 이미지를 볼 수 없을 경우, 필수인 alt 속성은 이미지에 대한 대체 텍스트를 제공합니다.
(연결이 느리거나, src 속성에 기인한 오류 또는 사용자가 스크린 리더기를 사용할 경우)
alt 속성을 사용하지 않을 경우, 깨진 링크 표시와 텍스트 둘 다 표시되지 않습니다.

If a browser cannot find the image, it will display the alternate text:

Tip:
스크린 리더기 (screen reader)는 HTML 코드를 읽고 사용자가 콘텐츠를 들을 수 있게 하는 소프트웨어 프로그램입니다.
스크린 리더기는 시각 장애가 있거나 학습장애를 가진 이들에게 유용합니다.

이미지의 너비(width)와 높이(height)를 지정하기 위해 style 속성을 사용할 수 있습니다.

<img src = "img_girl.jpg" alt="Girl in a jacket" style="width:500px; height:600px;">

대안으로, width 속성과 height 속성을 사용할 수 있습니다.

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

width와 height 속성은 항상 이미지의 너비와 높이를 픽셀 단위로 정의합니다.

Note:
이미지의 너비와 높이를 항상 지정하세요. 만약 너비와 높이가 지정되지 않는 경우,
해당 웹 페이지는 이미지가 로딩될 때 깜작일 수 있습니다.

width, height, 그리고 style 속성은 HTML에서 항상 유효합니다.

하지만 style 속성 사용을 권장합니다. 스타일 속성은 스타일 시트가 이미지의 크기를 변경하는 것을 방지합니다.

Width/Height Attribute or Style?

The first image uses the width attribute (set to 128 pixels), but the style in the head section overrides it, and sets the width to 100%;

The second image uses the style attribute to set the width to 128 pixels, this will not be overridden by the style in the head section:

이미지가 하위 폴더에 있는 경우, src속성에 폴더 명을 포함시켜야 합니다.

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px; height:128px;">

일부 웹 사이트는 다른 서버의 이미지를 가리킵니다.

다른 서버의 이미지를 가리키려면, src 속성에 절대 경로(an absolute (full) URL)를 지정해야 합니다.

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

Note on external images
외부 이미지는 저작권이 있을 수 있습니다. 사용 허가를 받지 못하면 저작권법을 위배될 수 있습니다.
또한 갑자기 제거 또는 변경될 수 있기 때문에 외부 이미지를 제어할 수 없습니다.

HTML은 애니메이션 GIF를 허용합니다.

<img src="programming.gif" alt="Computer Man" style="width:48px; height:48px;">

이미지를 링크로 사용하기 위해, <img>태그를 <a> 태그 내부에 넣습니다.

Image as a Link

The image is a link. You can click on it.

CSS float 속성을 사용하여 이미지가 텍스트의 오른쪽이나 왼쪽으로 떠있게 합니다.

Floating Images

Float the image to the right

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.

Float the image to the left

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.

모든 브라우저(크롬, 엣지, 파이어폭스, 사파리, 오페라)에서 지원되는 가장 공통적인 이미지 파일 형식은 하기와 같습니다.

• 이미지를 정의하기 위해 HTML <img>요소를 사용합니다.
• 이미지의 URL을 정의하기 위해 HTML src속성을 사용합니다.
• 이미지가 표시될 수 없는 경우, 이미지를 대체하는 텍스트를 정의하기 위해 HTML alt속성을 사용합니다.
• 이미지의 크기를 정의하기 위해 HTML width와 height속성 또는 CSS width와 height속성을 사용합니다.
• 이미지가 텍스트의 오른쪽이나 왼쪽으로 떠있도록 CSS float 속성을 사용합니다.
  

Note: 큰 이미지를 로딩하는 것은 시간이 걸리고, 웹 페이지를 느리게 할 수 있으니, 이미지를 신중히 사용하세요.