이번 예제는 오디오Audio(오디오),video(비디오), iframe, div,span의 간단한 예제를 해보자.
<최종 화면>
이제 파일을 만들어서 연습해보자.
Day2 폴더를 만들고 거기에 01_ex.html 파일을 만들었다.
임의로 mp3 파일을 같은 위치에 넣었다. Day02 폴더 안에
기존에 있던 old_pop.mp3를 ogg 파일로 변환시키겠다.
https://www.online-convert.com/
Online converter - convert video, images, audio and documents for free
Convert files like images, video, documents, audio and more to other formats with this free and fast online converter.
www.online-convert.com
변환한 파일을 같은 경로에 넣었다.
하나의 audio에 source를 여러개 사용하는 이유는
만약에 브라우저가 지원하는 형식이 아닐시 다른 형식으로 동작하게 하려는 것이다.
이제 같은 경로에 동영상 파일을 넣어서 표시해보겠다.
동영상이 재생되기 전에 멈춰있는 상태에서 보여질 화면을 미리 정할 수 있다.
카푸치노 이미지로 해보겠다.
다른 경로의 문서도 보여줄 수 있다. 예제에서는 Web폴더 안에 Day01,Day02가 있다.
Day02에서 Day01/02_text.html을 가져와 보여주겠다.
웹서버의 문서도 보여줄 수 있다.
링크를 통해 원할때 보여줄 수 도 있다.
이제 div를 알아보자. 가장 많이 사용하는 요소이다.
div와 거의 비슷한 span을 비교해서 알아보자.
div 사용 예 ) 웹 사이트를 만들경우 메뉴와 광고가 있는 헤더 , 내용이 담긴 content, 마지막 회사 연락처 및 위치가 표시되는 footer로 미리 구분하여 작업을 할때, 아래와 같이 영역을 미리 구분하여 시작한다.
<복붙용 코드>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>04Ex</title>
</head>
<body>
<audio src="./old_pop.mp3" autoplay controls></audio>
<!-- 크롬 브라우저는 2018냔 04월부터 autiplay를 지원하지 않음 -->
<!-- 브라우저에 따른 음원의 유형에 대응하기 위해 <source>요소 사용 -->
<audio autoplay controls>
<source src="./old_pop.mp3" type="audio/mp3">
</audio>
<video controls>
</video>
<!-- poster, width, ehight속성 적용 -->
<source src="./trailer.mp4" type="video/mp4">
</video>
<hr>
<hr>
<!-- iframe : inline frame - 다른 문서 가져와 보여주기 -->
<!-- 다른 웹서버의 사이트 문서도 표시 가능 -->
<!-- 링크<a>요소에 의해 열리는 target으로 iframe 지정이 가능함 -->
<hr>
<iframe src="" name="aaa"></iframe>
<hr>
<hr>
<!-- div 요소 : divide 논리적 영역 구분 [block 요소]-->
<div style="background-color: burlywood; border: 2px solid red; padding-left: 10px;">
<h2>Title</h2>
<p>This is message</p>
</div>
<!-- div요소의 [block요소] 특징 알아보기!-->
<p>
안녕하세요. 나는 <div style="color: royalblue;">홍길동</div> 입니다.
</p>
<!-- span요소 : div요소와 같은 역할이지만 [inline요소] 특성을 가짐 -->
<p>
안녕하세요. 나는 <span style="color: royalblue;">홍길동</span> 입니다.
</p>
<!-- div의 영역 레이아웃 구조 연습 -->
<!-- <div>의 영역 구분은 나중에 웹페이지의 헤더영역, 본문영역, 푸터영역을 구분하는데 주요한 역할을 함 -->
<div id="header" style="background-color: slateblue; height: 20px;"></div>
<div id="content" style="background-color:teal; height: 40px;"></div>
<div id="footer" style="background-color:tomato; height: 20px;"></div>
</body>
</html>
|
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML' 카테고리의 다른 글
| HTML (기초) 웹페이지 구성 및 GET,POST 로 데이터 보내기 / 파일 업로드 (0) | 2019.12.04 |
|---|---|
| HTML (기초) input으로 여러가지 버튼 및 영역 만들기 (radio, lable, checkbox, button 등등) (0) | 2019.12.04 |
| HTML (기초) 테이블 만들기 (0) | 2019.12.03 |
| HTML (기초) 리스트, 링크, 이미지 (0) | 2019.12.03 |
| HTML (기초) 기본 구성 연습 2 (요소 다루기 ) (0) | 2019.12.03 |
댓글