웹프로그래밍 HTML/태그와 멀티미디어 10

<video> 태그

▣ 태그 사용· 비디오 파일을 웹 문서에 삽입할 때 사용·  태그로 여러 가지의 비디오 파일을 동시에 제공 ▣ 태그 속성· src : 재생할 비디오 파일이 저장된 경로 표시· controls : 재생 제어기 표시· width, height : 비디오의 가로/세로 크기 설정· loop : 반복 재생· autoplay : 웹 문서가 열림과 동시에 자동 재생· muted : 음소거 상태로 시작· preload : 비디오 파일을 사용 여부와 상관없이 미리 다운로드함·  poster : 비디오 파일이 재생되기 전이나 다운로드 되지 않고 있는 경우 표시 될 이미지의  URL을 표시 비디오 자동 재생 비디오 수동 재생 비디오 다중 재생-비디오 파일이 현재 폴더에 있는 경우 ..

<audio> 태그

▣  태그· 웹 페이지에 오디오 파일을 삽입하는 태그     태그 속성· src : 재생할 오디오 파일이 저장된 경로 표시· loop : 반복 재생· muted : 음소거 상태로 시작 · controls : 재생 제어기 표시· autoplay : 웹 문서가 열림과 동시에 자동으로 재생· preload : 오디오 파일 사용 여부와 상관없이 미리 다운로드함 ▣ 태그· 여러 형식의 오디오 파일을 동시에 제공할 때 사용· 재생에 적합한 파일이 없다면 마지막 문장 출력 오디오 자동 재생 오디오 수동 재생 오디오 다중 재생 오디오 파일을 재생할 수 없습니다.

<img>태그

▣ 태그· 웹 문서에 이미지  삽입 시 사용   ▣ 태그 속성 · src : 이미지 파일이 저장도니 경로 지정 ·alt : 이미지를 웹 브라우저에서 표시하지 못했을 경우 표시되는 대체 텍스트 지정 · width/height :  이미지의 가로, 세로 길이를 픽셀 단위로 지정(% 단위를 사용하면 웹 브라우저의 크기에 따라 이미지 크기가 조절되도록 지정할 수 있음) · style : 이미지의 스타일(크기, 위치 등)을 픽셀 단위로 지정 · border : 이미지 경계선의 두께를 픽셀 단위로 지정   ♧ 이미지 삽입하기 이미지 기본 표현 이미지에 설명 추가 & 오른쪽 정렬 이미지의 크기를 픽셀 단위로 조정 이미지의 크기를 % 단위로 조정 ♧ 이미지에 링크 걸기 이미지를 클릭..

<table> 태그

▣ 태그·  태그 : 행 생성, 태그 : 열 생성· 태그 : 표의 머리를 정의, 셀 제목 글자를 강조하는 역할 이름 점수 별 90 초롱 90 별초롱언니 100 ▣ 표 제목 삽입  · 태그 사용 ▣ 셀 병합  · rowspan : 셀을 세로로 병합, 속성값으로 병합하고 싶은 행의 수만큼 지정 · colspan : 셀을 가로로 병합, 속성값으로 병합하고 싶은 열의 수만큼 지정 ♧ 셀 병합하기1 ..

목록 태그의 종류

▣ 무순서 목록· 순서가 없는 목록· 태그 사용, 각 항목은   태그로 입력· 목록의 각 항목 앞에는 불릿( bullet)이 붙음 ▣ 순서 목록· 순서가 있는 목록· 태그 사용, 각 항목은 태그로 입력· 목록의 각 항목에는 기본값으로  type="1"이 적용 ▣ 정의형 목록· 각 항목을 정의하기 위한 목록· 태그 사용· 정의한 각 항목은 태그를, 각 항목에 대한 설명은 태그를 사용  무순서 목록 Coffee Tea Black tea Green tea Milk 순서 목록 ..

<a>태그

▣ 태그 · 다른 사이트 혹은 같은 문서 내 다른 위치로 이동할 때 사용 · href 속성값에 URL을 입력해 원하는 곳으로 이동      표기 유형표기 예절대경로 URL 표기href="http://www.w3.org/index.html"상대경로 URL 표기href="hello.html"태그에 기본 URL지정페이지 내 요소 위치 표기href="#top"프로토콜 URL 표기https://, ftp://, mailto:, file: 등스크립트 표기href="javascript:alert('Hello');" ▣ 웹 사이트 간 이동· hrdf 속성 : 연결하고자 하는 웹 사이트의 URL 지정· target 속성 : 링크를 클릭했을 때 웹 사이트가 열릴 곳 지정 속성값설명_blank새로운 웹 브라우저 창에 연다..

텍스트 관련 태그

▣ 텍스트 관련 태그태그설명볼드체로 표시강조하여 표시이탤릭체로 표시작게 표시중요한 내용을 표시아래첨자로 표시윗첨자로 표시아래 밑줄을 표시가운데를 선으로 표시 하이라이트(Highlight)표시 컴퓨터 코드 표시 컴퓨터 프로그램 샘플 출력 표시 키보드 입력 표시 변수 표시  &lt; 텍스트 관련 태그 &gt; 텍스트 볼드 처리 텍스트 중요 표시 텍스트를 이탤릭체로 텍스트 강조 표시 텍스트 밑줄 처리 텍스트 가운데 선 처리 텍스트아래첨자텍스트윗첨자 텍스트에 하이라이트 표시

HTML5 문서에서 특수문자 처리 방법

▣ 특수문자 / 키보드 입력값에 매칭되는 특수이름과 아스키코드 값특수문자 / 키보드특수이름아스키코드&lt;&#60;>&gt;&#62;&&amp;&#38;©&copy;&#169;®&reg;&#174;#&num;&#35;스페이스바(spacebar)&nbsp;&#160; &lt; HTML 특수문자 &gt; &num; 풀스택 개발자를 위한 웹 프로그래밍 &num; HTML5 &#38; CSS3 &#38; JavaScript &#38; JQuery &nbsp;&nbsp; &copy; 한빛아카데미 &nbsp;&nbsp; &nbsp;&nbsp; &reg; 2017