본문 바로가기

수업 정리

44일차 수업정리(HTML5)

**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이라고 함