116 lines
5.1 KiB
Markdown
116 lines
5.1 KiB
Markdown
# 미디어
|
|
|
|
## img
|
|
웹 페이지에 이미지를 삽입하는 가장 기본적인 태그입니다.
|
|
|
|
```html
|
|
<img src="image.jpg" alt="이미지 설명">
|
|
```
|
|
* src: 이미지 파일의 경로를 지정합니다.
|
|
* alt: 이미지가 로드되지 않거나 시각 장애인을 위해 대체 텍스트를 제공합니다.
|
|
|
|
## video
|
|
HTML5부터 지원되는 태그로, 웹 페이지에 동영상을 삽입할 수 있습니다.
|
|
```html
|
|
<video controls>
|
|
<source src="movie.mp4" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
```
|
|
* controls: 사용자가 동영상을 재생, 일시 정지, 볼륨 조절 등을 할 수 있는 컨트롤을 표시합니다.
|
|
* source: 동영상 파일의 경로와 형식을 지정합니다.
|
|
* autoplay: 페이지 로드 시 자동으로 재생합니다.
|
|
* muted: 음소거 상태로 재생합니다.
|
|
* loop: 동영상이 끝나면 반복 재생합니다.
|
|
* poster: 동영상이 로딩되기 전에 표시되는 이미지입니다.
|
|
|
|
## audio
|
|
HTML5부터 지원되는 태그로, 웹 페이지에 오디오 파일을 삽입할 수 있습니다.
|
|
```html
|
|
<audio controls>
|
|
<source src="music.mp3" type="audio/mpeg">
|
|
Your browser does not support the audio element.
|
|
</audio>
|
|
```
|
|
* controls: 사용자가 오디오를 재생, 일시 정지, 볼륨 조절 등을 할 수 있는 컨트롤을 표시합니다.
|
|
* source: 오디오 파일의 경로와 형식을 지정합니다.
|
|
* autoplay: 페이지 로드 시 자동으로 재생합니다.
|
|
* loop: 오디오가 끝나면 반복 재생합니다.
|
|
* preload: 브라우저가 미리 오디오 파일을 불러올지 여부를 지정합니다.
|
|
|
|
## canvas
|
|
자바스크립트를 사용하여 동적으로 그래픽을 그릴 수 있는 캔버스를 생성하는 태그입니다. 자바스크립트 API를 통해 다양한 그래픽 효과를 구현할 수 있습니다.
|
|
게임, 데이터 시각화 등에 활용됩니다.
|
|
```html
|
|
<canvas id="myCanvas" width="200" height="100"></canvas>
|
|
```
|
|
|
|
## svg
|
|
확장 가능한 벡터 그래픽을 표현하는 언어로, HTML 문서에 직접 벡터 그래픽을 삽입할 수 있습니다.
|
|
```html
|
|
<svg width="200" height="100">
|
|
<circle cx="50" cy="50" r="40" fill="red" />
|
|
</svg>
|
|
```
|
|
|
|
## picture
|
|
다양한 화면 크기와 해상도에 맞는 이미지를 제공하기 위한 태그입니다. `<source>` 태그를 사용하여 여러 이미지를 정의하고, 미디어 쿼리를 통해 적절한 이미지를 선택합니다.
|
|
반응형 웹 디자인에 유용합니다.
|
|
```html
|
|
<picture>
|
|
<source media="(min-width: 768px)" srcset="large.jpg">
|
|
<source media="(min-width: 480px)" srcset="medium.jpg">
|
|
<img src="small.jpg" alt="이미지">
|
|
</picture>
|
|
```
|
|
|
|
## figure, figcaption
|
|
이미지, 차트, 그래프 등의 콘텐츠와 캡션을 함께 묶어서 표현할 때 사용합니다.
|
|
```html
|
|
<figure>
|
|
<img src="image.jpg" alt="설명">
|
|
<figcaption>설명 텍스트</figcaption>
|
|
</figure>
|
|
```
|
|
|
|
## map, area
|
|
이미지의 특정 영역을 클릭했을 때 다른 페이지로 이동하거나 특정 기능을 실행하도록 설정할 수 있습니다.
|
|
```html
|
|
<img src="map.jpg" usemap="#mymap">
|
|
<map name="mymap">
|
|
<area shape="rect" coords="0,0,80,80" href="link1.html" alt="Area 1">
|
|
</map>
|
|
```
|
|
* usemap: 이미지 맵의 이름을 지정합니다.
|
|
* area: 이미지 맵의 각 영역을 정의합니다.
|
|
* shape: 영역의 모양을 지정합니다. (rect: 사각형, circle: 원, poly: 다각형 등)
|
|
* coords: 영역의 좌표를 지정합니다.
|
|
|
|
## iframe
|
|
Inline Frame의 약자로, HTML 문서 내에 또 다른 HTML 문서를 삽입하여 표시할 수 있도록 하는 태그입니다. 마치 웹 페이지 안에 작은 창을 띄워 다른 웹 페이지를 보여주는 것과 같습니다.
|
|
* 다른 웹 페이지 삽입: 다른 웹사이트의 콘텐츠를 자신의 웹 페이지에 삽입하여 보여줄 수 있습니다. (예: 유튜브 동영상, 구글 지도 등)
|
|
* 독립적인 콘텐츠 표시: 메인 페이지와 별도로 독립적인 콘텐츠를 표시할 수 있습니다.
|
|
* 광고 노출: 광고 배너를 삽입하여 수익을 창출할 수 있습니다.
|
|
|
|
```html
|
|
<iframe src="https://www.example.com"></iframe>
|
|
```
|
|
* src: 삽입할 문서의 URL을 지정합니다.
|
|
* width: iframe의 너비를 지정합니다.
|
|
* height: iframe의 높이를 지정합니다.
|
|
* frameborder: iframe 테두리의 유무를 지정합니다.
|
|
* scrolling: iframe 내부의 콘텐츠 스크롤 여부를 지정합니다.
|
|
* name: iframe에 이름을 부여하여 자바스크립트에서 제어할 수 있도록 합니다.
|
|
|
|
|
|
## embed, object
|
|
주로 플러그인이나 액티브X 컨트롤을 삽입하는 데 사용되었습니다. 브라우저 호환성 문제가 많고, 보안 문제의 위험이 있어 최근에는 잘 사용되지 않습니다.
|
|
* embed : 외부 콘텐츠를 웹 페이지에 포함시키는 데 사용되는 일반적인 태그입니다.
|
|
* object : 다양한 형식의 데이터를 표현하는 데 사용되는 태그입니다. 이미지, 플러그인, 미디어 등을 포함할 수 있습니다.
|
|
```html
|
|
<embed src="https://www.example.com/myplugin.swf" width="300" height="200">
|
|
```
|
|
```html
|
|
<object data="image.svg" type="image/svg+xml"></object>
|
|
```
|