7. Embedded Content Elements
내장형 컨테츠 요소(Embedded Content Element)란 HTML 문서에 다른 자원(resource)들을 집어넣는데 사용되는 요소나 문서에 추가될 다른 요소로부터의 내용을 추가하는데 사용되는 요소를 말하는 것입니다. 다시 말해서 이미지, 소리, 영화 같은 HTML 문서 밖의 자원들을 HTML 문서에 집어넣거나 이와 연관된 작업을 하는데 사용되는 요소들을 W3C에서는 내장형 내용 요소 그룹으로 구분하고 있습니다. 현재(2012년 1월 13일 기준)으로 다음과 같은 내장형 내용 요소들이 정의되어 있습니다.
|
요소 |
기능 |
|
img |
이미지를 나타내는 사용 |
|
map |
이미지맵을 정의할 때 사용 |
|
area |
하나의 이미지-맵 안에 클릭 가능한 하나의 영역을 정의하는데 사용 |
|
object |
HTML 문서에 음악, 동영상, 다른 웹페이지 같은 객체(object)를 추가할 때 사용 |
|
param |
HTML 문서에 추가된 객체(object)에 파라미터를 전달하는데 사용 |
|
video |
HTML 문서에 동영상을 명시하는데 사용 |
|
audio |
HTML 문서에 소리를 명시하는데 사용 |
|
source |
audio, video 같은 미디어 요소에 사용하는 요소로 브라우저가 지원하는 avi, ogg, flv 등과 같은 파일 유형이나 코덱 지원 여부에 따라 브라우저에 맞는 audio, video 파일이 선택되도록 할 때 사용 |
|
track |
audio, video 요소 같은 미디어 요소의 자식 요소로 사용되어 자막(subtitle)이나 캡션 등을 설정하는데 사용 |
|
canvas |
직선, 도형을 그리거나 게임 등과 그래픽과 관련된 작업을 수행하는데 사용되는 요소로 Javascript와 함께 사용 |
|
embed |
내장형 컨텐츠를 정의할 때 사용 |
|
iframe |
인라인(inline) 프레임(frame)을 정의할 때 사용 |
|
math |
W3C에서 권고한 수학적인 공식을 웹문서에 나타내는데 사용되는 마크업 언어인 MathML을 사용할 수 있도록 하는데 사용 |
|
svg |
HTML5에서 canvas를 이용한 그래픽 기능이 등장하기 이전에 이미 W3C 권장사항으로 2차원 그래픽 작업에 사용되던 요소 |
7.1 img 요소(Element)
img 요소는 HTML 문서에 이미지를 삽입할 때 사용하는 요소로 일반적인 속성 외에 다음과 같은 다양한 속성들을 사용할 수 있습니다.
|
속성 |
기능 |
|
alt |
이미지에 대한 텍스트를 나타냄. 브라우저에서 이미지를 표시하지 못할 때 대체할 텍스트로 사용할 수 있음 |
|
src |
삽입할 이미지의 위치를 URL 형태로 설정 |
|
ismap |
서버단의 이미지맵으로 하나의 이미지를 명시 |
|
usemap |
클라이언트단의 이미지맵으로 하나의 이미지를 명시 |
|
width |
이미지에 대한 너비(가로) 크기를 pixel이나 %로 설정 |
|
height |
이미지에 대한 높이(세로) 크기를 pixel이나 %로 설정 |
기본적인 사용
형식은 다음과 같습니다.
<img src=”URL” [alt=”텍스트” width=”픽셀
또는 %”
height=”픽셀 또는 %” ismap=”ismap이름” usemap=”#usemap이름”] />
간단하게 예제를
하나 해볼까요? 예제에서 사용할 이미지는 flower2.jpg 파일이며
메모장을 열어서 HTML5 문서의 기본적인 코드를 작성하고
<body>…</body> 블록을 다음과 같이 작성합니다.
<body>
<img src="flower2.jpg"
alt="꽃밭"/><br/>
<img src="flower3.jpg"
alt="꽃밭"/><br/>
</body>
HTML5의 기본적인 태그와 함께 body 태그 영역을 위와 같이 작성한 후 “imgEx.html”로 저장합니다. IE9로 열어봅니다.
img 요소의 src 속성에 의해 HTML 문서에 나타낼 이미지를 위치를 설정하고 alt 속성을 이용하여
브라우저에서 이미지를 표시하지 못할 때 “꽃밭”을 나타내도록 설정한 결과 첫 번째 img 요소에는 정확하게 이미지가 존재하므로 해당 이미지를 나타내주지만 두 번째 img 요소는 “flower3.jpg” 이미지가 없으므로 alt 속성에 설정된 “꽃밭”을
나타내게 됩니다.
이제 width, height 속성을 이용하여 “flower2.jpg”
이미지를 웹 페이지에 원래의 크기로 아니면 pixel이나
% 단위로 그 크기를 확대 혹은 축소하여 나타낼 수 있으므로 </body> 태그
위에 다음과 같이 코드를 추가합니다.
<img src="flower2.jpg"
alt="꽃밭" width="100"
height="100"/><br/>
<img src="flower2.jpg"
alt="꽃밭" width="50%"
height="50%"/><br/>
</body>
저장한 후 IE9로 열어보면 다음과 같이 원래 “flower2.jpg” 이미지보다 작게 혹은 크게 만들 수 있습니다. 여기서 width, height의 %로 나타내는 것은 브라우저의 창(window)의 전체 크기의 % 형태이므로 현재 브라우저 창이 전체(최대) 창(window) 형태로 “imgEx.html”을 열었다면 아래 그림보다 더 클 수 있습니다. 반대로 현재 브라우저 창이 아주 작은 상태 창(window)인 상태에서 열었다면 아래 그림보다 더 작게 나타날 수 있습니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 7.3 object, param 요소(Element) (3) | 2013.07.31 |
|---|---|
| 7.2 map, area 요소(Element) (3) | 2013.07.31 |
| 6.2 del 요소(Element) (0) | 2013.07.31 |
| 6. Edit Elements (0) | 2013.07.31 |
| 5.15 span, br, wbr 요소(Element) (0) | 2013.07.31 |
