동영상 강좌보기
이미지는 웹페이지의 디자인 및 효능에 지대한 영향을 줍니다.
<img src="365ok.jpg" alt="웹학교">
HTML 이미지 구문
HTML에서 이미지는 <img>태그로 정의됩니다.
<img>태그는 비어 있으며 속성만 포함하고 종료태그(닫는태그)도 없습니다.
src속성은 이미지의 URL(웹주소)을 지정합니다.
<img src="url">
alt속성
어떤 이유로든 사용자가 이미지를 볼 수 없는 경우(연결 속도가 느리거나 src속성의 오류 또는 사용자가 화면판독기를 사용하는 경우) alt속성은 이미지의 대체 텍스트를 제공합니다.
<img src="flower.jpg" alt="꽃이미지">
** alt속성은 필수입니다. alt속성을 추가하지 않으면 웹페이지가 올바르게 검증되지 않습니다.
이미지 크기 - width 와 height
style속성을 사용하여 이미지의 너비와 높이를 지정할 수 있습니다.
<img src="flower.jpg" alt="꽃그림" style="width:500px;height:600px;">
또는 width 와 height속성을 사용할 수 있습니다.
<img src="flower.jpg" alt="꽃그림" width="500" height="600">
width 및 height속성은 항상 이미지의 폭과 높이를 픽셀단위로 정의합니다.
** 항상 이미지의 너비와 높이를 지정하십시오. 너비와 높이를 지정하지 않으면 이미지가 로드되는 동안 웹페이지가 깜박일 수 있습니다.
width와 height 또는 style?
width, height 및 style속성은 html5에서 모두 유효합니다.
그러나 style속성을 사용하는 것이 좋습니다. 스타일요소로 이미 이미지 크기가 설정되어 있으면 요소에 width와 height를 지정해도 반영되지 않습니다.
아래 코드를 작성하고 브라우저로 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="flower.gif" alt="꽃사진" style="width:128px;height:128px;">
<img src="flower.gif" alt="꽃사진" width="128" height="128">
</body>
</html>
다른 폴더의 이미지
경로를 지정하지 않으면 브라우저는 웹페이지와 동일한 폴더에서 이미지를 찾으려고 합니다.
일반적으로 이미지는 하위 폴더에 저장합니다. 그런 다음 src속성에서 폴더이름을 포함시킵니다.
<img src="/images/flower.gif" alt="꽃사진" style="width:128px;height:128px;">
다른 서버의 이미지
일부 웹사이트는 이미지를 별도의 이미지 서버(예:이미지호스팅)에 저장합니다.
사실, 세계의 모든 웹 주소에서 이미지에 엑세스할 수 있습니다.
<img src="https://365ok.co.kr/img/logo.png" alt="웹학교">
애니메이션 이미지
HTML은 애니메이션 gif를 허용합니다.
<img src="anim.gif" alt="움직이는 이미지" style="width:48px;height:48px;">
이미지를 링크로 사용
이미지를 링크로 사용하려면 <a>태그 안에 <img>태그를 사용합니다.
<a href="link.html">
<img src="link.gif" alt="링크이미지" style="width:42px;height:42px;border:0;">
</a>
이미지 플로팅(float)
CSS float속성을 사용하여 이미지가 텍스트의 오른쪽 또는 왼쪽으로 떠 있께 할 수 있습니다.(정렬)
<p><img src="flower.gif" alt="꽃이미지" style="float:right;width:42px;height:42px;">
이미지가 텍스트 오른쪽에 위치(정렬)합니다.</p>
<p><img src="flower.gif" alt="꽃이미지" style="float:left;width:42px;height:42px;">
이미지가 텍스트 왼쪽에 위치(정렬)합니다.</p>
이미지 지도(image map)
<map>태그를 사용하여 이미지 맵을 정의하십시오. 이미지 맵은 클릭가능한 영역이 있는 이미지입니다.
<img src="map.jpg" alt="지도이미지" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="html" href="html.html">
<area shape="rect" coords="290,172,333,250" alt="css" href="css.html">
<area shape="circle" coords="337,300,44" alt="javascript" href="javascript.html">
</map>
<map>태그의 name속성은 <img>의 usemap속성과 연관되어 있으며 이미지와 맵사이의 관계를 만듭니다.
<map>태그는 이미지맵에서 클릭가능한 영역을 정의하는 여러 <area>태그를 포함합니다.
배경 이미지
HTML요소에 배경이미지를 추가하려면 CSS속성을 사용하면 됩니다. background-image
<body style="background-image:url('flower.jpg')">
<h2>배경이미지</h2>
</body>
문단에 배경이미지를 추가하려면 <p>요소에 background-image속성을 지정합니다.
<body>
<p style="background-image:url('flower.jpg')">
...
</p>
</body>
<picture>요소
HTML5는 이미지 리소스를 지정할 때 유연성을 더하기 위해 <picture>요소를 도입했습니다.
<picture>요소는 서로 다른 이미지 소스를 참조하는 여러 <source>요소를 포함합니다. 이렇게 하면 브라우저가 현재보기 및 각종 장치에 맞게 이미지를 선택할 수 있습니다.
각 <source>요소에는 미디어에 가장 적합한 이미지를 설명하는 속성이 있습니다.
브라우저는 속성 값이 일치하는 첫번째 <source>요소를 사용하고 다음 <source>요소는 무시합니다.
아래 코드는 브라우저 창(뷰포트)이 650픽섹이상인 경우 하나의 그림을 표시하고 그렇지 않은 경우 465픽셀보다 큰 이미지를 표시합니다.
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
** 항상 <img>요소를 <picture>요소의 마지막 자식 요소로 지정하십시오. <img>요소는 브라우저가 <picture>요소를 지원하지 않거나 <source>태그가 일치하지 않는 경우 사용됩니다.
HTML 스크린 리더
화면판독기(스크린리더)는 HTML코드를 읽고 텍스트를 변환하며 사용자가 내용을 "들을" 수 있는 소프트웨어 프로그램입니다. 스크린리더는 시각 장애인 또는 학습 장애인에게 유용합니다.