HTML CSS 자바스크립트 무작정 따라하기

Presentation on theme: "HTML CSS 자바스크립트 무작정 따라하기"— Presentation transcript:

1 HTML CSS 자바스크립트 무작정 따라하기

2 Chapter 07. 이미지와 멀티미디어 파일

3 HTML CSS 자바스크립트 무작정 따라하기
학습목표 <img> 태그를 이용해 이미지를 삽입하고 각 속성을 적절하게 사용할 수 있다. 멀티미디어를 삽입하는 <embed> 태그와 <object> 태그의 차이를 알 수 있다. <embed> 태그의 속성이나 <object> 태그의 다양한 패러미터를 조절하여 원하는 모습의 동영상을 삽입할 수 있다. UCC 사이트에서 원하는 동영상을 퍼올 수 있다. HTML CSS 자바스크립트 무작정 따라하기

4 HTML CSS 자바스크립트 무작정 따라하기
웹 문서와 이미지 웹 문서에서 주로 사용하는 이미지 파일 형식 파일 형식 설명 GIF (Graphic Interchange Form) JPG나 PNG에 비해 파일 크기가 작고 표시할 수 있는 색상 수가 최대 256가지 뿐. GIF는 투명 이미지나 움직이는 GIF(animated GIF) 같은 다양한 효과를 만들 수 있다. 웹 페이지의 아이콘이나 불릿 등 작은 그림을 표현할 때 주로 사용. JPG/JPEG (Joint Photographic Experts Group) 섬세한 색상과 명암의 변화를 표현하기에 적당 디지털 카메라로 사진을 찍었을 때 메모리에 저장되는 형식도 대부분 JPG PNG (Portable Network Graphics) 파일 크기가 커지지 않으면서 원본 색상을 그대로 유지할 수 있음 투명 효과도 만들 수 있기 때문에 최근에 가장 많이 사용되는 이미지 파일 형식 (IE6에서는 지원하지 않음) HTML CSS 자바스크립트 무작정 따라하기

5 HTML CSS 자바스크립트 무작정 따라하기
이미지 삽입 - <img> 1) 이미지 삽입하기 기본형식 <img src="이미지 파일의 경로" alt="대체 텍스트" width="이미지 너비" height="이미지 높이"> src : 이미지 파일의 위치 지정(필수 속성) alt : 이미지를 화면에 표시할 수 없을 경우에 대신할 텍스트 2) 이미지와 툴팁 alt (대체 텍스트) : 대체 텍스트는 화면에 이미지가 표시될 경우 화면에 표시되지 않음. (단 익스플로러의 경우 지켜지지 않음) title (툴팁) : title 속성의 내용은 이미지를 부연설명하는 것이므로 이미지 위로 마우스 포인터를 가져갔을 때 작은 설명창에 표시됨. HTML CSS 자바스크립트 무작정 따라하기

6 HTML CSS 자바스크립트 무작정 따라하기
멀티미디어 파일 삽입 - <embed>/ <object> <embed> 태그 특별히 플레이어를 제어하지 않아도 될 경우에는 <embed> 태그가 간편 기본형식 <embed src="멀티미디어 파일 경로" 속성="속성값"> <embed> 태그에서 사용할 수 있는 속성과 속성값들 속성 설명 사용할 수 있는 값 src 삽입할 파일 파일 경로 autostart 자동 재생 true (자동재생), false(재생 단추를 눌러야 재생) width/height 플레이어의 너비와 높이 픽셀값 loop 반복 재생 횟수 true(무한 반복), false(한번 반복), 2 이상의 숫자(반복 횟수) hidden 플레이어 감춤 true(플레이어 표시 안함), false(플레이어 표시) showcontrols 컨트롤 막대 표시 true(컨트롤 막대 표시), false(컨트롤 막대 표시 안함) enablecontextmenu 오른쪽 마우스 클릭 메뉴 true(메뉴 표시), false(메뉴 표시 안함) HTML CSS 자바스크립트 무작정 따라하기

7 HTML CSS 자바스크립트 무작정 따라하기
멀티미디어 파일 삽입 - <embed>/ <object> <object> 태그 음악 파일 뿐만 아니라 동영상이나 자바 애플릿 등 다양한 멀티미디어 개체를 삽입할 때 사용하는 태그 클래스 아이디(classid) : 삽입하는 개체에 따른 플레이어 지정하는 속성 object 태그는 익스플로러용 태그이미르ㅗ 다른 플레이어를 고려해서 <embed> 태그까지 함께 써주어야 한다. 기본형식 <object classid="클래스 아이디" width="플레이어 너비" height="플레이어 높이“> <param name="패러미터 이름" value="패러미터 값“> ...... <embed .. > … </embed> </object> HTML CSS 자바스크립트 무작정 따라하기

8 HTML CSS 자바스크립트 무작정 따라하기
<object> 태그의 주요 패러미터 속성 설명 Filename 재생할 파일의 경로 EnableTracker 트래커(슬라이드 바) 사용 여부 AutoSize 플레이어 크기 고정 여부 EnableContextMenu 바로 가기 메뉴 사용 여부 AutoStart 자동 재생 여부 ShowStatusBar 상태표시줄 사용 여부 AutoRewind 재생 끝난 후 자동 되감기 여부 ShowControls 컨트롤 막대 사용 여부 ClickToPlay 재생 버튼 클릭해서 재생 여부 ShowAudioControls 볼륨 조절기 표시 여부 Enabled 기능버튼 사용 여부 ShowCaptioning 캡션 창 표시 여부 ShowTracker 트래커 보여줄지 여부 Mute 묵음 사용 여부 ShowDisplay 저작권 정보 표시 여부 HTML CSS 자바스크립트 무작정 따라하기