**HTML5
=> semantic(의미전달)의 강화와 플러그인 없이 애플리케이션을 사용하기 위해 등장한 HTML4의 다음버전
1. Semantic Tag
=> 전에는 div와 span을 이용해서 영역을 만들고, 영역의 의미전달을 위해서 class나 id속성에 이름을 부여
- HTML5에서는 의미별로 다른 태그를 선택하는 것을 권장
1) section : 하나의 독립적인 영역
2) header : 제목
3) footer : 바닥글
4) article : section내에서 독립적인 요소
5) nav : 메뉴
6) aside : article과 별 상관없는 광고나 내용
7) hgroup : header내에서 제목을 그룹화 하고자 할 때 사용
8) figure
=> 이미지나 그래프 예제코드, 비디오 처럼 독립적으로도 콘텐츠를 이룰수 있는 요소들을 만들 때 사용
=> 제목을 만들 경우 figure 안에 figcaption이나 legend, dd태그를 이용해서 작성
9) 텍스트 관련 요소
- mark : 노란색 음영이 추가되어 텍스트를 강조하는 역할
- strong : 중요한 텍스트에 사용
- em : 기울임
- b : 굵게
10) ruby - 프로그래밍 언어이름이기도 함(일본에서 만든 언어, ruby on rails라는 프레임워크를 사용, 웹사이트 구현)
=> 글자위에 글자를 출력
=> 한자 위에 독음을 입력하는 용도로 많이 사용
=> 사용 : <ruby>글자<rt>위에 보여질 글자</rt>.....</ruby>
2. 멀티미디어 태그
=. video, audio, source태그가 추가
=> video와 audio는 자바스크립트 객체로도 추가 : 자바 스크립트로 제어가 가능
1) video 태그의 기본 사용
=> <video src="비디오파일 URL" width="너비", "height="높이" controls="controls">
비디오 태그가 지원되지 않을 경우 보여질 문자열</video>
2) 재생이 안되는 문제
=> 브라우저마다 지원하는 코덱이 달라서 비디오 파일의 종류에 따라 재생이 안될 수 있음
=> video 태그 안에 <source src="비디오파일의 URL"/>를 여러개 설정
- 브라우저가 재생 할 수 있는 비디오를 재생하고 나머지는 재생하지 않음
=> 하나의 비디오 파일을 여러 포맷으로 변환한 후 사용
- 웹에서 비디오 파일을 사용할 경우 IE, 모바일 사파리, 모바일크롬에서 재생이 되는 지 확인 해볼것
3) property(속성) : 객체의 특성을 저장하기 위한 것
- src : 재생할 파일의 url - String
- autoplay : 자동재생여부 - boolean
- loop : 반복 재생 여부 - boolean
- currentSrc : 실제 읽어서 재생중인 파일의 url - String
- currentTime : 현재 재생위치를 초단위로 반환 - Number(실수)
- startTime : 재생 시작시간을 초단위로 반환 - Number(실수)
- duration : 전체 재생시간 - Number(실수)
- paused : 일시정지 여부 - boolean
- ended : 종료 여부 - boolean
- muted: 음소거 여부 - Boolean
- playbackRate: 재생 속도 - Number(실수)
- buffered: 버퍼에 저장된 크기 - Number(실수)
- volume : 볼륨(0.0 ~ 1.0)
- preload: 다운로드 방식을 설정 - none, metadata, auto
- error: 에러에 대한 정보를 저장
4) 메소드 : 객체가 수행할 수 있는 작업
- load() : 동영상 다시 읽어오기
- play() : 동영상 재생
- pause() : 동영상 일시정지
5) 이벤트 : 객체에게 발생하는 사건
- play
- playing
- timeupdate
- waiting
- ended
- pause
- emptied : 로딩과 함께 발생
- loadstart : 로드 시작
- canplay : 재생가능
- load : 다운로드 완료
- error : 에러 발생
6) HTML5에서 video 태그가 추가 되어 멀티미디어 재생기를 직접 작성하는 것이 가능
=> 예전 : asp.net(C#) - silverlight, java - flex등을 이용하여 멀티미디어 재생기 구현(RIA- Rich Internet Application)
=> flash도 video태그의 추가로 점점 사용빈도가 낮아지고 있음
7) 버튼을 누르면 재생중이면 중지, 중지중이면 재생하도록 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>멀티미디어</title>
</head>
<body>
<video src="resources/Painting.mp4" width="320" height="320"
controls="controls">
<!-- IPhone3G.mov를 재생가능하면 재생 그렇지 않으면 밑의 데이터 잭ㅈ -->
<source src="resource/IPhone3G.mov" />
<source src="resource/IPhone3G.org" />
</video>
<!-- 버튼 제작 2가지 방법
<button>재생1</button> -->
<input id="btn" type="button" value="재생2" />
<video src="resources/IPhone3G.mov" id="video" width="320" height="320">
<!-- IPhone3G.mov를 재생가능하면 재생 그렇지 않으면 밑의 데이터 잭ㅈ -->
<source src="resource/IPhone3G.mov" />
<source src="resource/IPhone3G.org" />
</video>
</body>
<script>
//버튼과 비디오 찾아오기
var btn = document.getElementById("btn");
var video = document.getElementById("video");
//btn의 클릭이벤트 처리
btn.addEventListener("click", function() {
//재생중인지 확인
if (!video.paused && !video.ended) {
//비디오 재생 중지하고 버튼 텍스트 변경
video.pause();
btn.value = "재생"
} else {
video.play();
btn.value = "중지";
}
});
</script>
</html>8) audio
=> video 태그와 동일한 방법으로 사용
=> 예전에는 배경음악을 bgsound를 이용하여 설정했는데 지금은 audio 태그를 이용
9) 자원 사용
=> 이미지를 여러개 application에서 사용시 되도록 해상도를 동일하게 설정
=> 사운드는 포맷과 샘플링비율을 동일하게 설정
=> 비디오는 포맷을 동일하게 설정
=> 사운드, 비디오는 버퍼를 이용하여 출력하는데 포맷별로 버퍼를 별도로 만듬
3. canvas
=> 그래픽을 자유롭게 출력할 수 있는 API
=> 현재는 3D까지 구현 가능
=> 웹에서 3D구현은 WebGL
1) 사용방법
=> body 태그에는 canvas의 너비와 높이만 설정해서 생성
=> 그림을 그리는 것은 자바스크립트를 이용해서 작업
2) DeviceContext - context
=> GUI 프로그래밍에서 그래픽을 구현하기 위한 정보를 저장하고 있는 객체
- 선 색상, 배경색, 글자색등을 저장하고 있는 객체
- 그림을 직접 그리고자 하는 경우에는 context를 이용하여 작업
- 안드로이드에서도 Context는 화면에 그려지는 객체
3) 그리는 순서
=> body 태그에 canvas 태그를 이용해서 출력 영역을 설정
=> script에서 canvas를 찾아 옴
=> canvas에 그림을 그릴 context를 생성 : 캔버스객체.getContext('2D');
=> context를 이용해서 그림을 출력
=> save()를 이용해서 현재 context를 저장
4) 사각형 그리기
- strokeRect(x좌표, y좌표, 너비, 높이) : 내부가 채워지지 않은 사각형 그리기
- fillRect(x좌표, y좌표, 너비, 높이) : 내부가 채워진 사각형 그리기
- clearRect(x좌표, y좌표, 너비, 높이) : 사각형 만큼 지우기
5) 색상 적용
=> strokeStyle이나 fillStyle 속성에 색상 적용 가능
=> css, 그라데이션, 패턴설정이 가능
=> css를 이용
- '색상명', '#RGB', rgb(r,g,b)값 등으로 가능
=> 투명도는 globalAlpha 속성으로 설정 가능 : 0.0 ~ 1.0 사이 가능
6) 그라데이션 생성
=> createLineGradient(시작x좌표, 시작 y좌표, 종료 x좌표, 종료 y좌표)를 이용해서 사각 그라데이션 생성
=> createRadialGradient(시작x좌표, 시작 y좌표, 종료 x좌표, 종료 y좌표)를 이용해서 원형 그라데이션 생성
=> 2개의 함수 중 영역을 생성하고 addColorStop(위치, 색상)으로 색상을 설정
- 위치 : 0.0 ~ 1.0 사이
7) 패스 - 원하는 모양을 만드는 것
=> BeginPath()로 하고 마지막 지점을 이어주거나 closePaht()를 호출하여 마지막 지점까지를 폐쇄
=> 원하는 모양을 그릴 때는 stroke()나 fill()을 이용하고 클리핑 영역을 만들기 위해서는 clip()을 호출
- 클리핑 영역은 이 영역에만 그래픽을 출력하는 것
=> 현재 위치에서 선을 그리는 메소드 : lineTo(x좌표, y좌표)
=> 현재 위치를 옮기는 메소드 : moveTo(x좌표, y좌표)
=> 사각형을 만드는 메소드 : rect(x좌표, y좌표, 너비, 높이)
=> 베이지어 곡선을 만드는 메소드
- quadraticCurveTo(cpx, cpy, x, y) : 현재 위치에서 x, y까지 선을 그리고 cpx, cpy에서 제어
- bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y)
=> 현재 위치에서 x, y까지 선을 그리고 cp1x, cp1y에서 변곡하고, cp2x, cp2y에서 한번 더 변곡
=> 호를 그리는 메소드
- arc(x, y, 반지름, 시작 각도, 종료 각도, 시계뱡향인지 반시계방향인지)
8) 선의 모양
=> lineWidth : 두께
=> lineCap : 선의 끝점 설정(butt, round, square)
=> lineJoin : 교차점(bevel, round, miter)
=> miterLimit : 끝점의 길이
9) 그림자 설정
=> shadowColor
=> shadowOffsetX
=> shadowOffsetY
=> shadowBlur
10) 텍스트 그리기
=> 문자열 그리기
- fillText(문자열, x, y, 가로 폭너비)
- strokeText(문자열, x, y, 가로 폭 너비)
=> font 속성으로 글자 모양을 설정
=> 글자에 그림자 가능
11) transform
=> 이동이나 회전 및 확대/축소와 비틀기
=> tranlate(x, y)
=> rotate(각도) : 각도가 라디언 각도
- Math.PI를 대입하면 180도
=> scale(가로 배율, 세로 배율)
=> transform(scale-x, skey-x, skew-y, scale-y, translate-x, translate-y)
12) 겹치는 부분 처리
=> globalCompositeOperation에 값을 설정하면 됨
13) 이미지 출력
=> 이미지 객체 생성 : new Image()
=> 이미지 파일 설정 : 이미지 객체.src = '이미지 파일 경로'
=> 이미지 출력 함수
- context객체.drawImage(이미지 객체, x좌표, y좌표) : 원본 크기 그대로 출력
- context객체.drawImage(이미지 객체, x좌표, y좌표, 너비, 높이) : 원본을 확대, 축소하여 출력
- context객체.drawImage(이미지 객체, 자르는 x좌표, 자르는 y좌표, 자르는 너비, 자르는 높이, 출력할 X좌표,
출력할 Y좌표, 출력할 너비, 출력할 높이) : 필요한 부분을 잘라서 확대 or 축소하여 출력
=> 이미지나 파일을 읽어오는 동작은 비동기적으로 동작(순서대로 동작하지 않음)
- src를 지정시 파일에서 읽어오는 동작을 스레드처럼 비동기처리 하고, 다 읽으면 load 이벤트 발생
- 출력을 할 때는 load이벤트 발생 이후에 해야 함
- 출력은 load 이벤트 핸들러에서 진행
=> Image Sprite : 하나의 이미지를 분할하여 사용하는 기술
- 유사한 용도로 사용되는 이미지들을 별도의 파일로 만들면 파일 입출력을 자주 하게 되어 입출력 효율이 저하
- 하나의 이미지 파일에 여러개의 이미지를 저장하고 한번만 불러와서 필요한 부분을 잘라서 사용하는 것
=> 코드를 에러없이 작성헀는데 동작하지 않는 경우의 확인
- 코드 호출 순서가 틀렸는지 확인
- 중간에 있는 코드가 비동기적으로 수행되지는 않는지 확인
=> 자바스크립트에서 타이머를 만드는 방법
- var 변수명 = setInterval(function(){ 코드 }, 반복시간);
- 타이머 중지 : clearInterval(변수명);
14) 이미지 클리핑
=> 이미지를 원하는 부분만 잘라서 출력 가능
15) 특정 픽셀의 데이터 가져오기
=> context객체.getImageData(시작 x좌표, 시작 y좌표, 너비, 높이)를 호출하며 byte배열이 리턴됨
=> 4개가 묶여서 하나의 픽셀의 값을 구성 - red, green, blue, alpha 값
=> 그래픽 프로그램의 스포이드에서 사용
4. SVG(Scable Vector Image)
=> XML을 이용해서 벡터 그래픽을 구현하기 위한 웹 표준 기술
=> HTML5 이전부터 존재 - 일러스트레이터로 생성이 가능
=> 자체적으로 애니메이션 제작이 가능하고 품질이 좋은 그래픽 생성이 가능(그래프, 고해상도 UI제작에 적합)
=> 용량이 커서 Game같은 애플리케이션을 구현하는데는 부적합
=> d3jx(자바스크립트 기반의 시각화 라이브러리)의 기반 기술이 SVG
=> 웹 게임을 제작할 때는 canvas를 사용하는 것이 효율적
5. form
=> 데이터를 묶어서 서버에게 전송하기 위한 요소
=> 데이터는 사용자가 입력 할 수도 있고, 존재하는 데이터 일 수도 있음
=> 사용자가 입력하는 요소는 input, select, textarea
=> HTML5에서는 input요소가 많이 추가되고(모바일을 위한 컨텐츠), 유효성검사를 위한 속성들이 많이 추가됨
1) 기본적으로 제공되는 input 요소
- text : 한줄 입력
- password : echo char 로 보여지는 한줄 입력
- radio : 여러개 중에서 하나만 선택(필수)
- checkbox : 여러개 중에서 여러개 선택(선택 - 옵션)
- file : 파일을 선택해서 업로드
- button : 버튼
- submit : 폼의 내용을 서버로 전송하기 위한 버튼
- reset : 폼의 내용을 삭제하기 위한 버튼
- hidden : 사용자의 입력을 받지 않고, 데이터를 전송하기 위한 요소
2) select
=> 여러개의 목록중에서 0개 이상을 선택하기 위한 요소
=> 목록의 개수가 많아서 radio나 checkbox를 사용하기 곤란한 경우 - 모바일에서 많이 사용
3) textarea
=> 여러줄 입력받기 위한 요소
4) 추가된 input type
=> search, tel, url, email, number
- 모바일에서 사용하기 위해 등장한 type, 모바일에서는 보여지는 키보드가 다름
- email이나 url은 유효성 검사도 해줌
- range : 범위 입력을 위한 type, 오른쪽에 화살표나 위 아래 단추가 보임
- color : 색상 선택
- date, month, week, time, datetime-local : 날짜(지원안되는 브라우저가 있음)
5) 진행상황 표시를 위한 요소 : progress, meter
6) 브라우저별로 제대로 출력이 안되는 요소의 출력
=> jquery와 같은 자바스크립트 라이브러리를 이용하여 출력
7) file의 변경내용
=> multiple 속성을 multiple로 설정하면 여러개의 파일을 선택 가능
=> accept 속성을 이용해서 파일의 종류를 제한할수 있음
- ".확장자, .확장자..."로 설정할 수 있고 이미지 파일의 경우는 "image/*"로 설정이 가능
=> 선택한 파일의 목록은 files프로퍼티에 배열로 전달
8) placeholder
=> 입력상자에 기본 텍스트를 설정하는 데 사용
=> 사용자의 입력이 시작되면 내용은 사라짐
9) autofocus
=> 폼이 화면에 보여질 때 첫번째 포커스를 받을 항목에 사용
10) 유효성 검사를 위한 속성
=> required : 필수 입력
=> pattern : 정규식을 설정하면 정규식에 맞는지 검사해줌
- 최신버전의 chrom에서는 동작하지 않음
=> maxlength : 최대 길이를 설정
=> min, max ; 숫자 데이터의 최소, 최대
=> 이런 속성들을 설정하면 속성에 맞지 않는 경우 form의 데이터를 서버로 전송하지 않음
11) 클라이언트에서의 유효성 검사
=> 클라이언트에서 할수 있는 모든 유효성은 전부 검사해서 통과하지 못하는 경우 서버에 전송하지 않는 것이 좋음
=> 사용자의 직접 입력은 피하는 것이 좋음
tip!
1. Buffering을 하는 이유 : 버퍼링 X시 애플리케이션이 운영체제의 native method의 호출횟수가 많아져 시스템 효율성이 저하되므로 한꺼번에 운영체제에게 요청하는 것을 Buffering이라고 함
'수업 정리' 카테고리의 다른 글
| 46일차 수업 정리(Ajax, WebPush) (0) | 2020.06.12 |
|---|---|
| 45일차 수업정리(HTML5 - 2 -) (0) | 2020.06.10 |
| 43일차 수업정리(이벤트 처리, 예외처리, ajax) (0) | 2020.06.08 |
| 42일차 수업 정리(BOM, DOM, Event (0) | 2020.06.05 |
| 41일차 수업정리(js - 반복문, 제어문, 함수, 내장객체) (0) | 2020.06.04 |