[HTML5] 이미지
[HTML5] 이미지
이미지 태그는 img를 사용하고 src 속성에 표시할 이미지 소스를 명시합니다.
<img src="일출.jpg"/>
이미지는 모니터를 볼 수 없는 환경에서 스크린 리더와 같은 보조 기술에서 이미지 내용을 파악할 수 있게 하여야 합니다.
이를 위해 alt 속성을 제공하고 있으며 이를 대체 텍스트라 부릅니다.
<img src="일출.jpg" alt="하롱베이 일출"/>
이미지에 캡션을 붙일 때는 figure 태그와 figcaption 태그를 사용합니다.
figure 태그에 이미지 태그를 여러 개 넣을 수 있습니다.
그리고 figcaption 태그를 이용하여 설명을 표시합니다.
<figure>
<img src="일출.jpg" alt="하롱베이 일출" width="400" height="300" />
<figcaption>하롱베이의 일출은 나도 모르게 명상에 잠기게 하네요.</figcaption>
</figure>
다음은 이미지 태그를 사용한 예제입니다.
<!DOCTYPE html />
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>언제나 휴일 - 이미지</title>
<style>
header
{
height:40px;
background-color:White;
color:Green;
text-align:center;
font-size:xx-large;
font-weight:bold;
}
footer
{
margin:10px;
clear:both;
text-align:center;
}
section article
{
width:500px;
margin:5px;
border:1px dotted #999;
}
</style>
</head>
<body>
<header>
<p>HTML 이미지</p>
</header>
<section>
<article id="sea">
<figure>
<img src="일출.jpg" alt="하롱베이 일출" width="400" height="300" />
<figcaption>하롱베이의 일출은 나도 모르게 명상에 잠기게 하네요.</figcaption>
</figure>
</article>
<article id="cave">
<figure>
<img src="동굴1.jpg" alt="띠엔꿍 동굴1" width="200" height="150" />
<img src="동굴2.jpg" alt="띠엔꿍 동굴2" width="200" height="150" />
<figcaption>하롱베이 바다 한 가운데 띠엔꿍 동굴은 사람의 발길이 없던 경이로운 곳이죠.</figcaption>
</figure>
</article>
</section>
<footer>
<p>Copyright 2015 언제나 휴일 ehclub.co.kr</p>
</footer>
</body>
</html>
