HTML5 멀티미디어태그

공간분할태그

웹 페이지의 공간을 분할하는 태그

공간을 분할하여 CSS을 통해 원하는 레이아웃을 구성

22017-03-24

태그이름 설명

div 블록형식으로공간분할

span 인라인형식으로공간분할

블록 인라인

div span

h1 a

p input

목록태그 글자형식태그

테이블태그

입력양식태그

예제 1. 공간분할태그

32017-03-24

예제 1. 공간분할태그

42017-03-24

시맨틱태그

시맨틱 웹 페이지를 구성하는 태그

컴퓨터 프로그램이 코드를 읽고 의미를 인식할 수 있는 지능형 웹

52017-03-24

태그이름 설명

header 헤더

nav 네비게이션

main 메인

aside 사이드에위치하는공간

section 여러중심내용을감싸는공간

article 글자가많이들어가는부분

footer 푸터

예제 2. 시맨틱태그

62017-03-24

예제 2. 시맨틱태그

72017-03-24

오디오태그

플러그인이 없어도 웹 브라우저에서 음악을 재생

82017-03-24

속성이름 설명

src 음악파일경로를지정

preload 음악을재생하기전데이터를모두불러올지결정

autoplay 음악의자동재생여부지정

loop 음악의반복여부지정

controls 음악재생도구출력여부지정

예제 3. 오디오태그

92017-03-24

비디오태그

플러그인이 없어도 웹 브라우저에서 비디오를 재생

102017-03-24

속성이름 설명

src 비디오파일경로지정

poster 비디오준비중일때표시할이미지의파일경로지정

preload 비디오를재생하기 전에데이터를 모두불러올지 여부지정

autoplay 비디오의자동재생여부지정

loop 비디오의반복재생여부지정

controls 비디오의재생도구의출력여부지정

width 비디오의너비지정

height 비디오의높이지정

예제 4. 비디오태그

112017-03-24

웹브라우저별멀티미디어지원

웹 브라우저 마다 지원하는 멀티 미디어 형식이 다름

웹 브라우저의 제약이 없도록 source 태그 사용, 플러그인(vedio.js 등)을 사용

122017-03-24

Explorer Chrome Firefox Safari Opera

MP3 O O O O X

OGG X O O O O

WAV X O O X O

MP4 O O O O X

WebM X O O X O

OGV X O O X O

입력양식태그

사용자에게 정보를 입력 받아 서버에게 전송하는 태그

POST, GET 방식으로 데이터를 전송

132017-03-24

POST

GET

Cient Server

전송방식 설명

GET 주소에데이터를직접입력해전달

POST BODY에데이터를입력해전달

입력양식태그

142017-03-24

태그 속성 설명

form 입력양식의시작과끝

input text 글자입력양식

button 버튼

checkbox 체크박스

file 파일입력양식

hidden 내용표시안함

image 이미지형태

password 비밀번호양식

radio 라디오버튼

reset 초기화버튼

submit 제출버튼

태그 속성 설명

textarea cols 여러행의글자입력양식

rows cols는너비, rows는높이지정

select 선택양식생성

optgroup 옵션그룹화

option 옵션생성

fieldset 입력양식의그룹지정

legend 입력양식그룹의이름지정

예제 5. 입력양식태그

152017-03-24

예제 5. 입력양식태그

162017-03-24

Trouble Shooting(한글설정)

https://github.com/chikatoike/IMESupport 에서 IMESupport 다운로드 후 압출 해제

Sublime Text3 Menu bar Preferences Browse Packages 클릭

Packages 경로에 IMESupport 붙여넣기

Sublime Text3 Menu bar Preferences Settings 클릭

오른쪽 설정 추가

172017-03-24

감사합니다