오디오 & 비디오 재생하기 1 1. 태그 - 오디오 파일 삽입하기 HTML5에서 배경 음악이나 효과음 등 오디오를 삽입할 때는 태그를 사용합니다. 일반적으로 대부분의 브라우저에서 가능하면 mp3 파일을 삽입하며 ogg(또는 oga)파일은 함께 지정하지 않는 경우가 많습니다. 기본형 : 태그에서 사용되는 속성 오디오를 배경 음악으로 사용할 경우 플레이어를 화면에 표시하지 않고 재생 버튼을 누르지 않아도 재생되도록 자동 재생(autoplay)해야 합니다. 그리고 오디오가 끝나더라도 사용자가 웹 화면에서 빠져 나갈 때까지는 계속 반복 재생(loop)해야 합니다. 속 성 설 명 autoplay 오디오를 자동 재생합니다. controls 웹 화면에 컨트롤 막대를 표시합니다. 컨트롤 막대에는 재생/멈춤, 진행 바,..
HTML5와 멀티미디어 2 멀티미디어의 웹 표준화 HTML5는 PC뿐만 아니라 웹 브라우저가 설치된 모든 기기에 적용되는 웹 표준이므로 플러그인 프로그램 없이 웹 브라우저 자체에서 멀티미디어를 재생할 수 있습니다. 다만 아직까지 웹 브라우저마다 재생할 수 있는 멀티미디어 파일 종류가 다르기 때문에 어떤 파일 형식이 표준이 될 것인지가 개발자와 사용자들 사이에서 논의되는 중입니다. 1. 브라우저별 비디오/오디오 파일 지원여부 괄호 안의 내용은 해당 미디어 파일을 지원하는 버전입니다. 브라우저 비디오 오디오 mp4 webm ogv mp3 ogg 인터넷 익스플로러 O (9+) X X O (+9) X 크롬 O (all) O (25+) O (all) O (all) O (all) 파이어폭스 O (35+) O (28..
HTML5와 멀티미디어 1 HTML5 덕분에 웹은 더 풍성해졌습니다. 텍스트와 이미지뿐만 아니라 오디오와 비디오도 넣을 수 있게 되었기 때문입니다. 개인 홈페이지에 배경 음악을 넣거나 자신이 촬영한 비디오 영상을 올려 공유할 수도 있습니다. 뿐만 아니라 비디오에 자막을 넣는 것도 HTML5로 가능합니다. 웹과 멀티미디어 멀티미디어는 HTML5 웹 표준이 정해지면서 가장 많이 변화된 부분입니다. HTML4 까지는 웹 브라우저와 멀티미디어가 따로 존재했지만 HTML5에서는 웹 브라우저 안에서 멀티미디어를 직접 재생할 수 있기 때문입니다. 1. 플러그인 프로그램 오디오나 비디오 같은 멀티미디어를 직접 재생할 수 없던 과거의 웹 브라우저에서는 플러그인(plug-in) 프로그램을 사용했습니다. 보통 인터넷에서 음..
시맨틱 태그의 브라우저 호환과 사용 방법 시맨틱 태그를 이용하면 웹 표준에 맞는 문서를 편리하게 만들 수 있지만 모든 웹 브라우저에서 시맨틱 태그를 사용할 수 있는 건 아닙니다. IE8 이하에서 시맨틱 태그를 사용하려면? 브라우저별 시맨틱 태그 지원 여부를 확인하면 인터넷 익스플로러(IE) 8.0 이하 버전은 지원되지 않음을 알 수 있습니다. 2016년 1월 이후 마이크로소프트에서 IE11을 제외한 다른 인터넷 익스플로러에 대한 지원을 중단했기 때문입니다. 하지만 아직 국내에는 IE8 사용자가 꽤 많기 때문에 IE8이하 버전에서 시맨틱 태그 사용법에 대한 방안이 필요합니다. 1. CSS에서 블록 레벨로 정의하기 첫 번째 방법은 CSS에서 블록 레벨로 정의하는 방법입니다. 브라우저는 자신이 인식하지 못하는..
HTML5와 시맨틱 태그 2 1. 태그 - 외부 문서 삽입하기 웹 문서 안에 다른 웹 문서를 가져와 표시하는 것을 인라인 프레임(inline frame)이라고 하고 인라인 프레임을 삽입하는 태그가 태그입니다. 기본형 : 태그에서 사용할 수 있는 주요 속성 속 성 설 명 width 인라인 프레임의 너비입니다. 픽셀이나 백분율 값으로 표시합니다. height 인라인 프레임의 높이입니다. 픽셀이나 백분율 값으로 표시합니다. name 인라인 프레임의 이름입니다. src 프레임에 표시할 문서의 주소를 지정합니다. seamless 프레임의 테두리를 없애 마치 본문의 일부처럼 보이도록 만들며 속성 값 없이 seamless라고 쓰면 됩니다. 2. 태그 - 사이트 제작자 정보, 연락처 정보 나타내기 태그는 주로 태그 안..
HTML5와 시맨틱 태그 1 1. 시맨택 태그의 등장 배경 HTML4에서는 HTML 태그가 문서 내용들을 화면에 보여주는 역할만 했기 때문에 화면을 구성하는 역할은 대부분 태그가 맡았고 수많은 태그들은 다시 id 속성으로 구분했습니다. 이때 태그의 이름은 디자이너나 개발자 개인의 생각에 따라 지정되었는데 이런 방법은 제작자 자신이 나중에 보더라도 이해하기 어려웠을 뿐만 아니라 담당자가 바뀌면 문서구조를 이해하는 데 많은 시간이 걸리곤 했습니다. 또한 시각장애인용 화면 낭독기나 검색 엔진에서 웹소소를 읽을 때도 어느 부분이 메뉴이고 본문인지 구별할 수 없었습니다. 그리고 실제로 웹 사이트를 만들 때는 소스가 수천 줄이 넘기 때문에 일일이 살펴보면서 헤더, 메뉴, 사이드바 등을 찾는 것이 쉽지 않습니다. 헤..
폼 관련 태그들 - 여러 데이터 나열해 보여 주기 , , 태그 - 드롭다운 목록 만들기 사용자가 내용을 입력하는 것이 아니라 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용합니다. 드롭다운 목록이란 클릭했을 때 옵션들이 요소 아래쪽으로 펼쳐지기 때문에 붙여진 이름입니다. 공간을 최소한으로 사용하면서 여러 옵션을 표시하려면 드롭다운 목록이 가장 적당합니다. 드롭다운 목록은 태그로 목록의 시작과 끝을 표시하고 그 안에 태그를 사용해 원하는 항목들을 추가합니다. 태그에는 value 속성을 이용해 서버로 넘겨주기 위한 값을 지정합니다. 기본형 : 내용1 내용2 내용3 학과 수학교육과 역사교육과 국어교육과 체육교육과 교육학과 컴퓨터교육과 학과 수학교육과 역사교육과 국어교육과 체육교육과 교육학과 컴..
폼 관련 태그들 - 태그의 다양한 속성 1. autofocus 속성 - 입력 커서 표시하기 autofocus 속성을 사용하면 페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서를 표시할 수 있습니다. 웹 문서를 켜면 바로 원하는 요소에 입력할 수 있도록 마우스 커서가 표시됩니다. 이름 비밀번호 이름 비밀번호 2. placeholder 속성 - 힌트 표시하기 placeholder 속성을 사용하면 사용자가 텍스트를 입력할 때 도움이 되도록 입력란에는 적당한 힌트 내용을 표시하고 있다가 그 필드를 클릭하면 내용이 사라지도록 만들 수 있습니다. 이 속성을 사용하면 텍스트 필드 앞에 제목을 사용하지 않고도 사용자에게 해당 필드에 어떤 내용을 입력해야 할지 알려 줄 수 있어 편리합니다. 전화번호 전화..