본문 바로가기
IT/HTML CSS

HTML 19단계 - 배경음악

by Rui 2020. 12. 14.
반응형

안녕하세요

HTML 19단계 배경음악 시간이 돌아왔습니다.

저번 시간에는 폼(Form) 6탄을 알아봤는데요 혹시나 잊지는 않으셨겠죠?~

오늘도 화이팅하며, 부담없이 봐주시면 감사하겠습니다.

자 그럼 HTML 19단계 배경음악을 시작해볼께요~

 

▣ 배경음악

 

홈페이지를 만들때 분위기 있게 또는 럭셔리하게 만들기위해 배경 음악을 사용하는 경우가 많이 있습니다.

그러나 방문자가 배경음악을 원치 않을경우도 종종 있으므로 배경음악을 사용할때는 여러 부분을 고려해 봐야 됩니다.

 

1. 반듯이 필요한 부분에만 배경음악이나 배경음을 넣습니다.

 

2. 배경음악을 사용자가 직접 제어 할 수 있도록 제어권을 주어야 합니다. 배경음악을 원치 않는 사용자들이 쉽게 소리를 줄이거나 높일 수 있어야 합니다.

 

3. 용량이 큰 배경음악은 페이지 로딩을 방해하는 요소로 작용할 수도 있어서 페이지의 전체적인 용량을 고려해 배경음악을 선택해야합니다.

 

자 그럼 배경음악에 대해서 상세히 살펴보겠습니다.

1. bgsound

 

bgsound element는 인터넷 익스플로러에서만 작동합니다.

그리고 화면에 아무런 내용이 출력되지 않음로 사용자가 배경음악을 제어하기가 힘듭니다.

 

자 그럼 간단한 예문 소스를 살펴보겠습니다.

<bgcound src="배경음악파일.wma" loop="0">

 

loop 속성은 배경음악의 반복 횟수를 지정합니다. 

-1이나 INFINITE 값으로 지정하면 계속적으로 반복재생됩니다.

 

2. embed

 

embed는 bgsound 보다 더 많은 웹브라우저에서 사용됩니다.

embed는 익스플로러뿐만 아니라 다른 여러가지의 웹브라우저에서도 작동 합니다. 그리고 웹브라우저창에 미디어 플레이어가 표시되기에 embed element에서 여러가지 속성을 사용해 사용자가 배경음악을 제어할 수 있도록 도와줍니다.

 

자 그럼 먼저 embed의 간단한 예문 소스를 살펴보겠습니다.

<embed src="배경음악.wma">

 

위의 예문 소스처럼 배경음악이 재생되고 미디어 플레리어가 표시되는것을 보실 수 있습니다.

 

다음은 속성을 살펴보겠습니다.

 

1. autostart는 페이지 로딩시 배경음악이 자동 재생되거나 사용자가 직접 재생하게 할수 있게 합니다. 

true의 경우 페이지 로딩시 자동재생되게 해줍니다.

false의 경우 플레이 버튼을 눌러야만 배경음악이 재생됩니다.

 

2. hidden는 페이지에서 미디어 플레이어가 화면에 표시 되는지 여부를 지정합니다.

true의 경우 페이지 화면에 표시되게 됩니다.

false의 경우 페이지 화면에 표시되지 않습니다.

 

3. loop는 페이지에서 배경음악의 반복여부를 지정합니다.

true의 경우 배경음악이 반복적으로 재생됩니다. 

false의 경우 배경음악이 반복적으로 재생되지 않습니다.

 

4. width, height 를 통해 미디어 플레이어의 크기를 지정할수 있습니다. 배경음악 파일인 경우에는 상관없지만 동영상 파일의 경우 파일을 재생할때 이 값을 적절하게 조절하여 크기를 지정해 주면 좋습니다.

 

5. showcontrols="value" 미디어 플레이어, value 값은 0, 1로 지정합니다.

 

6. volume = "수치값" 미디어 플레어이에서 배경음악의 음악소리의 크기를 임의로 설정하는 속성입니다.

 

7. hspace="value" vspace="value" 미디어 플레이어의 수직, 수평 여백값을 지정하는 속성입니다.

 

8. mute=1 배경음악을 음소거 할때 사용됩니다.

 

 

어떠신가요? 이해가 잘 되시나요?

항상 드리는 말씀이지만 반복해서 연습하셔야 된다는건 필수인거 아시죠?ㅎ

다음시간에는 CSS에 대해서 포스팅 해볼껀데요. 많은 응원과 기대해주세요. 감사합니다.

 

반응형

'IT > HTML CSS' 카테고리의 다른 글

CSS 2단계 - CSS 문법  (668) 2020.12.15
CSS 1단계 - CSS란 무엇인가?  (533) 2020.12.14
HTML 18단계 - 폼(Form) 6탄  (565) 2020.12.13
HTML 17단계 - 폼(Form) 5탄  (670) 2020.12.13
HTML 16단계 - 폼(Form) 4탄  (525) 2020.12.12


이 포스팅은 쿠팡 파트너스 활동의 일환으로 이에 따른 일정액을 수수료를 제공받을 수도 있습니다



댓글