프로젝트4 - div 섹션 구역 분리 와 CSS 스타일 적용하기

이미지
웹 브라우저에 표시되는 글자와 이미지 들에 디자인 적인 효과( 배경색, 글자색, 크기 조절...) 및 브라우저 내에서의 배치등을 조절하기 위해서는 구역을 나누면 편리해진다. 바로 구역(섹션) 을 나누어 주는 역할을 하는 태그가 div 이다. <div>태그는 브라우저에서 보여지는 시각적 기능은 없다. 단지, 구역을 나누는 역할을 한다.  코드를 만들어 본다. <!DOCTYPE html> <html> <head>   <title>div</title> </head> <body>   <div>     <p>Ice cream is a frozen dessert typically made from milk or cream that has been flavoured with a sweetener,        either sugar or an alternative, and a spice,        such as cocoa or vanilla, or with fruit, such as strawberries or peaches.</p>   </div>   <div>     <p> Food colouring is sometimes added in addition to stabilizers.        mixture is cooled below the freezing point of water and stirred to incorporate air spaces and prevent detectable ice crystals from forming.        It can also be made by whisking a flavoured cream base and liquid nitrogen together.        The result is a smooth, semi-solid foam that is solid at v

audio 태그 사용법 과 예제

audio 태그 역시 웹 페이지에서 많이 사용되는 태그 중 하나이다.
사운드를 재생해주는 태그 이다.
태그 사용법은 이와 같다.


src : 사운드 파일의 위치를 적는다.

이렇게만 하고 실행을 하면, 웹 페이지에는 아무런 화면 도 사운드도 재생되지 않는다.
필수 속성을 하나 더 줘야 한다.
바로, controls 이다. 

controls : 사운드 컨트롤 바를 나타낸다.

웹 페이지 에서 결과를 확인 하면 컨트롤 재생바 가 나오고 재생 버튼을 클릭 시
사운드가 재생된다.


audio 태그에서 주의할 점은 바로 사운드 포맷의 지원 유무 이다.
브라우저 별로 어떤 파일을 지원하는 지 외울 필요는 없다.
인터넷으로 검색하여, 브라우저 별 지원 파일을 확인 만 하면 된다.


Mp3, WAV, OGG 3개의 파일이 사용된다.
다른 파일들도 브라우저에 따라 실행은 되나, 호환성을 생각하여 위 3개의 파일 포맷을 사용하는 것이 가장 좋다.
감사합니다.

댓글

이 블로그의 인기 게시물

구글 블로그 이미지 복사 붙여넣기 가능한가요?

HTML 페이지 기본 구성.(HTML Page Structure)

구글 블로그 대표이미지 설정하기