-
HTML5 학습하기 ‘HTML5 시맨틱 태그 1 - 이미지’IT/HTML 2020. 4. 27. 07:49
HTML5 학습하기 ‘HTML5 시맨틱 태그 1 - 이미지’
1. HTML5 시맨틱 태그 - 이미지
1) 웹 문서와 이미지
① 이미지는 몇 가지 정해진 파일 형식만 사용할 수 있다.
② 다른 형식의 이미지 파일을 사용하려면 사용 가능한 이미지 파일로 변환이 필요하다.
③ 웹 페이지에서 사용할 수 있는 몇 가지의 파일 형식만 사용 가능하다
(1) GIF
GIF : Graphic Interchange Form의 약어이다. JPG나 PNG 형식에 비해 파일 크기가 작지만 표시할 수 있는 색상 수가 최대 256가지이며, 웹 페이지에서 아이콘이나 불릿 등 작은 이미지에 주로 사용한다. 그리고 투명한 배경이나 움직이는 이미지를 만들 수 있다.
(2) JPG/JPEG
JPEG : Joint Photographic Experts Group의 약어이다. 사진을 웹 페이지에 넣기 위해 개발된 형식이며, GIF에 비해 다양한 색상과 명함 표현이 가능하다. 디지털 카메라의 저장 파일은 대부분 JPG형식이다.
(3) PNG
PNG : Portable Network Graphics의 약어이다. 최근에 많이 사용되는 이미지 파일이다.
2) <img> 태그와 그에 따른 속성
(1) <img> 태그
<img> 태그는 웹 문서에 이미지를 삽입할 때 사용되는 태그이다. : <img src = “경로” [속성=“속성 값”]>
① 이미지를 웹 문서에 넣으려면 src 속성에 정확한 파일 경로를 지정해야 한다.
② 이미지 파일의 경로는 웹 문서 파일의 위치를 기준으로 정해진다.
③ <img>태그는 인라인 태그로 이미지 바로 옆에 다른 요소가 나란히 배치된다.
④ 이미지 삽입한 후 CSS 를 이용하거나 HTML5의 Canvas API를 이용해 이미지를 꾸밀수 있다.
(2) src 속성
src 속성은 이미지와 파일 경로를 지정하는 속성이다.
① src 속성은 이미지 파일이 있는 경로를 표시하기 위해 반드시 사용해야 한다.
② 그 외의 속성은 필요에 따라 생략 가능하다.
- 이미지가 웹 문서의 같은 폴더에 있을 때 : <img src = “test2.png”>
- 이미지가 웹 문서의 하위 폴더에 있을 때 : <img src = “images/test2.png”>
(3) Width, height 속성
Width, height 속성은 이미지의 크기를 조정하는 속성이다.
① 이미지 파일을 브라우저 창에 원하는 크기로 조정하여 넣을 때 사용한다.
② width, height 속성을 사용하지 않으면 원본 이미지 크기 출력한다.
(4) alt 속성
alt 속성은 대체 텍스트를 추가해 주는 속성이다.
① 그림을 내려 받지 않고 문자열만 보여주기 위해 사용한다.
② 음성 합성 기술을 이용한 스크린리더(또는Text-to-speech) 소프트웨어에서 사용한다.
(5) title 속성
title 속성은 마우스 오버 시 설명 상자를 표시해주는 속성이다.
① 요소에 숨겨진 뜻을 설명하는 글을 첨부하는 곳에 사용한다.
3) 이미지에 캡션을 붙이기 위한 태그
(1) <figure> 태그
<figure> 태그는 캡션 대상을 지정할 때 사용하는 태그이다.
예 : <figure> 캡션을 붙일 요소 삽입 </figure>
① 이미지, 다이어그램, 비디오, 텍스트 단락과 같은 멀티미디어 요소를 묶는다.
② 태그 안에<img>, <code>처럼 다른 태그 사용 가능하다.
(2) <figcaption> 태그
<figcaption> 태그는 캡션 설명을 붙일 때 사용하는 태그이다.
예 : <figcaption> 내용 삽입 </figcaption >
① 반드시 <figure> 태그 다음에 사용해야 한다.
② <figcaption>없이 <figure>태그를 사용하는 것은 미디어가 있다는 것을 브라우저에게 알려주기 위함이다.
(3) 이미지 삽입과 이미지 캡션달기 실습 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header> <h1> 캡션 삽입예제 </h1> </header>
<article>
<section>
<figure>
<img src="images/test1.png" width="200" height="100">
<img src="images/test2.png" width="200" height="100">
<figcaption>
이미지 2개를 묶어 하나의 캡션으로 표시하였다.
</figcaption>
</figure>
<figure>
<img src="images/test3.jpg" width="300" height="150">
<figcaption>
이미지 하나에 캡션 1개를 표시
</figcaption>
</figure>
</section>
</article>
</body>
</html>
'IT > HTML' 카테고리의 다른 글
HTML5 학습하기 ‘HTML5 시맨틱 태그 3 - 오디오’ (0) 2020.04.29 HTML5 학습하기 ‘HTML5 시맨틱 태그 2 - 비디오’ (0) 2020.04.28 HTML5 학습하기 ‘HTML5 기본 구조 및 문법의 기초’ (0) 2020.04.25 HTML5 학습하기 ‘HTML5 이란?’ (0) 2020.04.24 HTML5 학습하기 ‘HTML과 XHTML에 대하여’ (0) 2020.04.23