HTML 이미지(Image)

이미지는 웹 페이지의 디자인과 모양을 개선할 수 있다.

<!DOCTYPE html>
<html>
<body>

<h2>HTML 이미지</h2>
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">

</body>
</html>

HTML 이미지 문법

HTML <img> 태그는 웹 페이지에 이미지를 포함하는 데 사용된다.
이미지는 기술적으로 웹 페이지에 삽입되지 않으며, 이미지는 웹 페이지에 연결된다. <img> 태그는 참조된 이미지에 대한 고정 공간을 만든다.
<img> 태그가 비어 있고 속성만 포함되어 있으며 닫는 태그가 없다.

<img> 태그에는 두 가지 필수 특성이 있다:

src - 이미지의 경로를 지정한다
alt - 이미지의 대체 텍스트를 지정한다.

img 문법

src 속성

필수 src 특성은 이미지의 경로(URL)를 지정한다.

참고: 웹 페이지가 로드될 때 웹 서버에서 이미지를 가져와 페이지에 삽입하는 것은 브라우저이다. 따라서 이미지가 실제로 웹 페이지와 관련하여 동일한 위치에 유지되는지 확인하시오. 그렇지 않으면 방문자는 링크 아이콘이 끊어진다. 브라우저가 이미지를 찾을 수 없는 경우 끊어진 링크 아이콘과 Alt 텍스트가 표시된다.

<!DOCTYPE html>
<html>
<body>

<h2>대체 텍스트</h2>

<p>alt 속성은 이미지 내용을 반영해야 하므로 이미지를 볼 수 없는 사용자는 이미지에 포함된 내용을 이해할 수 있습니다:</p>

<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

</body>
</html>

alt 속성

연결 속도가 느리거나 src 특성의 오류 또는 사용자가 화면 판독기를 사용하는 경우 어떤 이유로 이미지를 볼 수 없는 경우 필수 alt 특성은 이미지에 대한 대체 텍스트를 제공한다.

alt 속성의 값은 이미지를 설명해야 한다:

브라우저가 이미지를 찾을 수 없는 경우 alt 속성의 값을 표시한다:

<!DOCTYPE html>
<html>
<body>

<p>브라우저가 이미지를 찾을 수 없는 경우 대체 텍스트를 표시합니다:</p>

<img src="wrongname.gif" alt="Flowers in Chania">

</body>
</html>

이미지 크기 - 너비와 높이(width와 height 속성)

스타일 속성을 사용하여 이미지의 너비와 높이를 지정할 수 있다.

<!DOCTYPE html>
<html>
<body>

<h2>이미지 크기</h2>

<p>여기서 스타일 속성을 사용하여 이미지의 너비와 높이를 지정합니다:</p>

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

</body>
</html>

또는 너비 및 높이 속성을 사용할 수 있다:

<!DOCTYPE html>
<html>
<body>

<h2>이미지 크기</h2>

<p>여기서 너비 및 높이 속성을 사용하여 이미지의 너비 및 높이를 지정합니다:</p>

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

</body>
</html>

너비 및 높이 속성은 항상 이미지의 너비 및 높이(픽셀)를 정의한다.
참고: 항상 이미지의 너비와 높이를 지정한다. 너비와 높이를 지정하지 않으면 이미지를 로드하는 동안 웹 페이지가 깜박일 수 있다.

이미지 너비와 높이 혹은 스타일?

너비, 높이 및 스타일 특성은 모두 HTML에서 유효하다.

그러나 스타일 특성을 사용하는 것이 좋다. 스타일 시트가 이미지 크기를 변경하지 못하도록 방지한다:

<!DOCTYPE html>
<html>
<head>
<style>
/* This style sets the width of all images to 100%: */
img {
width: 100%;
}
</style>
</head>
<body>

<h2>이미지 너비/높이 속성 혹은 스타일?</h2>

<p>첫 번째 이미지는 너비 속성(128픽셀로 설정)을 사용하지만 머리 부분의 스타일이 이 속성을 재정의하고 너비를 100%로 설정합니다.</p>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<p>두 번째 이미지는 스타일 속성을 사용하여 너비를 128픽셀로 설정합니다. 헤드 섹션의 스타일에 의해 재정의되지 않습니다:</p>

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

</body>
</html>

다른 폴더에 있는 이미지

하위 폴더에 이미지가 있는 경우 src 속성에 폴더 이름을 포함해야 한다:

<!DOCTYPE html>
<html>
<body>

<h2>다른 폴더에 있는 이미지</h2>
<p>하위 폴더에 이미지를 저장하는 것이 일반적입니다. 그런 다음 src 특성에 폴더 이름을 포함해야 합니다:</p>

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

</body>
</html>

다른서버/웹사이트에 있는 이미지

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

다른 서버의 이미지를 가리키려면 src 특성에 절대(전체) URL을 지정해야 한다:

<!DOCTYPE html>
<html>
<body>

<h2>다른서버에 있는 이미지</h2>

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" style="width:104px;height:142px;">

</body>
</html>

외부 이미지에 대한 참고 사항: 외부 이미지의 저작권이 있을 수 있다. 사용 허가를 받지 않을 경우 저작권법을 위반할 수 있다. 또한 외부 이미지는 갑자기 제거되거나 변경될 수 있으므로 제어할 수 없다.

애니메이션 이미지(Animated Image)

HTML은 애니메이션 GIF를 허용한다:

<!DOCTYPE html>
<html>
<body>

<h2>애니메이션 이미지</h2>

<p>HTML은 움직이는 이미지들을 사용할 수 있다:</p>

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

</body>
</html>

링크 이미지(Image as a Link)

이미지를 링크로 사용하려면 <img> 태그를 <a> 태그 안에 넣는다:

<!DOCTYPE html>
<html>
<body>

<h2>링크 이미지</h2>

<p>이미지가 링크이다. 클릭하면 이동할 수 있다.</p>

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

</body>
</html>

Floating Image

CSS float 속성을 사용하여 이미지를 텍스트의 오른쪽이나 왼쪽으로 이동한다:

<!DOCTYPE html>
<html>
<body>

<h2>Floating Images</h2>
<p><strong>이미지를 오른쪽으로 이동:</strong></p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
부동 이미지가 있는 단락입니다. 부동 이미지가 있는 단락입니다. 부동 이미지가 있는 단락.
</p>

<p><strong>이미지를 왼쪽으로 이동:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
부동 이미지가 있는 단락입니다. 부동 이미지가 있는 단락입니다. 부동 이미지가 있는 단락.
</p>

</body>
</html>

공통 이미지 형식(Common Image Format)

다음은 모든 브라우저(Chrome, Edge, Firefox, Safari, Opera)에서 지원되는 가장 일반적인 이미지 파일 유형이다:

약어	파일 형식	파일 확장자
APNG	Animated Portable Network Graphics	.apng
GIF	Graphics Interchange Format	.gif
ICO	Microsoft Icon	.ico, .cur
JPEG	Joint Photographic Expert Group Image	.jpg, .jpeg, .jiff, pjpeg, pjp
PNG	Portable Network Graphics	.png
SVG	Scalable Vector Graphics	.svg

마무리

이번 장에서는 HTML에서 많이 사용하는 HTML문서에서 이미지를 어떻게 다루는지 아래와 같이 살펴보았다.

HTML <img> 요소를 사용하여 이미지를 정의합니다
HTML src 특성을 사용하여 이미지의 URL을 정의합니다
HTML alt 속성을 사용하여 이미지를 표시할 수 없는 경우 이미지에 대한 대체 텍스트 정의
HTML 너비 및 높이 속성 또는 CSS 너비 및 높이 속성을 사용하여 이미지 크기 정의
CSS float 속성을 사용하여 이미지를 왼쪽 또는 오른쪽으로 이동합니다

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지 (새창열림)

'HTML > HTML 기본문법' 카테고리의 다른 글

HTML 배경이미지(Background Images) (0)	2023.05.01
HTML 이미지 맵(Image Maps) (0)	2023.04.30
HTML 링크-북마크 생성 (0)	2023.04.28
HTML 링크-다른색상 (0)	2023.04.27
HTML 링크(Links-Hyperlinks) (0)	2023.04.26

enjoyCoding

HTML 이미지(Image)

HTML 이미지 문법

src 속성

alt 속성

이미지 크기 - 너비와 높이(width와 height 속성)

이미지 너비와 높이 혹은 스타일?

다른 폴더에 있는 이미지

다른서버/웹사이트에 있는 이미지

애니메이션 이미지(Animated Image)

링크 이미지(Image as a Link)

Floating Image

공통 이미지 형식(Common Image Format)

마무리

'HTML > HTML 기본문법' 카테고리의 다른 글

댓글

티스토리툴바

HTML 이미지(Image)

HTML 이미지 문법

src 속성

alt 속성

이미지 크기 - 너비와 높이(width와 height 속성)

이미지 너비와 높이 혹은 스타일?

다른 폴더에 있는 이미지

다른서버/웹사이트에 있는 이미지

애니메이션 이미지(Animated Image)

링크 이미지(Image as a Link)

Floating Image

공통 이미지 형식(Common Image Format)

마무리

'HTML > HTML 기본문법' 카테고리의 다른 글

관련글

댓글

티스토리툴바