[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>
'언어 자료구조 알고리즘 > HTML5' 카테고리의 다른 글
| [HTML5] 6. 안전한 구조를 위해 br 태그에 종료를 표시하자. (0) | 2016.05.05 |
|---|---|
| [HTML5] 5. 소스 코드를 본문에 포함할 때는 pre 태그를 사용! (0) | 2016.05.05 |
| [HTML5] 4. 주석으로 가독성을 높이자. (0) | 2016.05.05 |
| [HTML5] 3. 글자가 이상하게 보일 때 깨지지 않게 meta태그에 인코딩 설정 (0) | 2016.05.04 |
| [HTML5] 2. 간단해진 HTML 문서 형식 선언 <!DOCTYPE html> (0) | 2016.05.04 |
| [HTML5] 1. 첫 번째 만드는 HTML 문서, "Hello, HTML" (0) | 2016.05.04 |
| [HTML5] 테이블 (0) | 2016.04.09 |
| [HTML5] 목록 태그 <ul>, <ol>, <dl> (0) | 2016.04.09 |
| [HTML5] P 태그와 PRE 태그 (0) | 2016.04.09 |
| [HTML5] 시맨틱 태그와 CSS (0) | 2016.04.09 |