안뇽하세요 코딩초밥입니당 ㅇㅅㅇ
html에 오디오랑 비디오가 안나오면 섭섭하겠죠?
오디오 비디오 및 코드쓸때 아무 구분없이 쭈룰루루루루루룱 쓰면 나중에 내가 쓰고도 힘들어지겠죠?
그러다가 나도힘들게알아보는 코드를 인수인계한다면 받는분은 눈물이 쭈루룰루룩일겁니다.
그래서 코드를 구분할수있는 div와 span을 알려드리도록하겠습니다 😘
※오디오 활용
오디오를 넣어서 사이트가 켜지면 바로 음악이 나오게 할수있습니다.
<audio src="oldpop.mp3" autoplay controls>
audio : 오디오삽입태그
src="oldpop.mp3" : 오디오 소스 파일 경로(url)
autoplay : 자동재생
controls : 화면 제어기 보일것
속성 종류
※오디오 파일의 종류.
·MP3 – 'MPEG-1 Audio Layer-3'의 약자로 MPEG기술의 음성 압축 기술
·Wav - 윈도우에서 사용되는 표준 사운드 포맷
·Ogg - 특허권을 반대하고 보다 좋은 음질을 위하여 오픈소스로 개발되었음.
https://www.online-convert.com/
-오디오 를 다른 형식으로 convert할수있는 무료사이트입니다.
▶간단예제
▶간단예제
<!DOCTYPE html>
<html>
<body>
<audio controls autoplay > * source로 파일을 두가지를 나누는이유는 어느곳에서는 되고 어느곳에서는 안되는것을 막기위해 다 만들어 놓습니다.
<source src="old_pop.ogg" type="audio/ogg">
<source src="old_pop.mp3" type="audio/mp3">
Your browser does not support the audio element.
*이 노래가 안나온다면 이글자가 나옵니다.
</audio>
</body>
</html>※비디오 활용
비디오를 넣는 코드입니다. 사이즈를 조절하여서 적절하게 비디오를 넣어보겠습니다.
<video src="movie.mp4" autoplay controls>
오디오하고 비슷합니다.
video : 비디오삽입태그
src="movie.mp4" : 비디오 소스 파일 경로(url)
autoplay : 자동재생
controls : 화면 제어기 보일것
※오디오 파일의 종류.
·mp4
·ogg
·webM
▶예제
<!DOCTYPE html>
<html>
<body>
<video width="640" height="480" controls> *사이즈를 제어하고
어디서는켜지고저기서는안켜지고를 대비한 두가지소스를 준비합니다
<source src="trailer.mp4" type='video/mp4'>
<source src="trailer.ogv" type='video/ogg'>
<p>Your user agent does not support HTML5.</p>*안보여졌을때
</video>
</body>
</html>
※DIV 의 활용
<div>는 divide의 약자로서 페이지를 논리적인 세션을 분리하는데
태그 윤곽을 만드는것입니다. 안드로이드에 적응이 되신분들은 하나의 Activity라고 생각을하시면 됩니다. Id를 부여하여서 구분지은후 사용하기도합니다.
예제를 보기전 Span도 알아놓으면 좋습니다.
Span은 div의 작은버전이라고 생각하시면됩니다
div는 한 단락을 윤곽을 만든다면 span은 한단어 같은 한부분을 단락지은후 디자인을 넣을수도있습니다.
▶예제
<!DOCTYPE html>
<html>
<body>
<div style="border: 3px solid red;">
<h2>코딩초밥</h2>
<p>
코딩초밥은 아프리카에살며, 태권도는 3단이며 구구단은 6단이고
가위바위보 7연승의 경력을 가지고있습니다
<span style="color: red;">코딩초밥</span>은
항상 배가고픕니다. 그러나 살을빼고싶기도합니다. 근데 배고픔이 그 마음 도 먹습니다.
</p>
</div>
</body>
</html>
결과값
'이과 > HTML,CSS,JS' 카테고리의 다른 글
| HTML_버튼,콤보박스,fieldset (1) | 2021.05.08 |
|---|---|
| CSS_속성,폰트,텍스트 (1) | 2021.05.07 |
| 반응형 웹디자인. (5) | 2021.05.03 |
| CSS의혁명,FLEX (0) | 2021.05.02 |
| HTML_줄바꾸기,헤딩,수평선,리스트 (0) | 2021.05.01 |
댓글