0813 HTML, CSS, JavaScript

** Front End

==>웹브라우저와 웹서버는 html 밖에 못 주고 받는다.

그래서 html에 디자인을 추가하는 css와

동적인 기능을 추가하는 java script 를 더한 것이다.

이것을 더 편리하게 만들어 주는 라이브러리가 있는데 jQuery, angular, react, vue, bootstap 등이 있다.

+ pc에서 awt, swing, fx

+ phone에서 iOS, Android

---

**Back End

==> Tomcat(web application server)을 깐 이유는 우리가 자바를 배웠는데 그 코드를 html 코드로 바꿔주기 때문이다.

+python, asp.net, node.js, php, ruby

---

** Vendor Prefix

==> css3에서 표준으로 채택은 했지만 브라우저 별로 다르게 적용되는 속성들이 있는데

이 때 이러한 속성들은 브라우저 회사의 접두어를 붙여서 사용해야 합니다. 이러한 것을 Vendor Prefix 라고 합니다.

Safari, Chrome : webkit

Internet explorer : ms

Firefox : moz

Opera : o

---

** transform

==> 원본을 기본 값들을 변경하지 않고 출력을 할 때 3*3 행렬 과의 연산을 해서 출력하는 것

==> translate(이동), scale(크기), rotate(회전)이 있습니다.

==> origin은 이동이나 크기 및 회전을 적용할 기준점입니다.

==> 대부분의 GUI 프로그램에서는 왼쪽 상단을 기준으로 하고 그래픽 카드를 직접 제어하는 ==> OpenGL 에서는 정중앙을 기준으로 합니다.

1. 적용방법

1) 접두어-transform:함수명(매개변수)

2) 회전:rotate(각도deg)

3) 이동:translate(x,y), translatex(x), translatey(y)

4) 크기변화:scale(가로,세로), scalex(가로크기), scaley(세로크기)

5) 비틀기:skew(x축값, y축값), skewX(x축값), skewY(y축값)

6) 기준점:transform-origin

---

** Transition Animation

1. 애니메이션 설정

1) webkit-transition-property; : 적용되는 속성으로 all을 지정하면 모두

2) webkit-transition-duration; : 적용시간

3) webkit-transition-timing-function; : 인터폴레이션 효과

ease: 기본형

linear: 선형, 처음부터 끝까지 같은 속도로 움직임

ease-in: 시작은 천천이 점점 빨라짐

ease-out: 점점 느려짐

ease-in-out: 시작과 끝의 속도가 느림

4) webkit-transition-timing-delay; : 지연 시간

5) webkit-transition: 속성 시간 인터폴레이션 지연시간; 을 순서대로 설정해도 가능

6) 사용할 수 있는 속성

top, left, bottom, right : 위치속성

width, height : 크기속성

margin, padding : 박스속성(여백)

border-width, border-radius, border-color : 테두리속성

color, background-color : 색상속성

opacity

transtorm

---

** Keyframe Animation

1. 애니메이션 만들기

1) @-webkit-keyframes 애니메이션이름

{

from{시작값}

to{종료값}

}

==> from과 to 대신에 백분률을 이용해서 설정도 가능

2) 애니메이션 적용

-webkit-animation-name : 애니메이션이름

-webkit-animation-timing-function : 인터폴레이션 효과

-webkit-animation-iteration-count : 반복횟수(infinite이면 무한대)

-webkit-animation-duration: 시간

-webkit-animation-play-state: 애니메이션 상태

-webkit-animation-direction: 애니메이션 반복 형태(alternate, normal)

---

** transform(3차원 변환)

1. Transform-style

1) flat : 자손의 3차원 속성을 무시

2) preserve-3d : 자손의 3차원 속성을 유지

2. blackface-visibility

1) visible : 뒷면을 출력

2) hidden : 뒷면을 보이지 않게

3. perspective : 원래 있던 위치에서 사용자가 있는 방향이나 반대방향으로 잡아당기거나 밀어내어 원근감을 갖도록 하는데 크롬에서만 적용됨.

---

** Cross Browsing

==> 모든 브라우저에서 동일한 컨텐츠를 사용할 수 있도록 해주어야 한다. 라는 것.

==> jQuery가 이 목적에서 출발한 자바스크립트 라이브러리 입니다.

** 반응형 웹 디자인

==> 브라우저의 크기에 상관없이 동일한 컨텐츠를 사용할 수 있도록 해주어야 한다. 라는 것.

==> 이 목적에서 나온 자바 스크립트 라이브러리가 bootstrap 이라는 라이브러리 입니다.

==> CSS 와 media Query를 이용해서 작업합니다.

** N-Screen

==> 하나의 컨텐츠를 여러 디바이스에 사용하는 것.

==> 반응형 웹 디자인은 웹이라는 한정된 부분이 있지만 N-Screen은 디바이스이기 때문에 좀 더 큰 개념이다.

---

**JavaScript

==> html 문서에 동적인 기능을 부여하기 위한 언어

==> 지금은 이 목적 이외에 응용프로그램을 만드는데도 사용을 하는데 순수 자바스크립트로는 안되고 자바스크립트로 작성한 내용을 번역해서 일반 프로그래밍 언어의 내용을 호출하는 라이브러리와 함께 사용해야 합니다.

==>react native 라이브러리를 이용해서 하이브리드 앱을 만들거나 phonegap 라이브러리를 이용해서 하이브리드 앱을 만들기도 하고 web os가 장착된 스마트 TV 등의 애플리케이션을 만들기도 하는데 이러한 web os 방식의 운영체제로는 tizen도 있습니다.

1. 사용방법

1)다른 파일에 만들고 호출해서 사용

<script src=“스크립트 파일의 경로”></script>

2)html 문서 내에서 사용

<script>

스크립트 내용

</script>

3)태그 내에 사용

<태그 이벤트=“스크립트 내용”></태그>

2. 내용출력

1) 대화상자로 출력

alert(출력내용)

2) body 태그 안에 출력 - 태그가 적용됩니다.

document.write(출력 내용)

document.writeln(출력 내용)

3) 디버그 창에 출력

console.log(출력 내용)

3. 작성 시 주의 사항

==> ;은 생략해도 되는데 한 줄에 2개의 명령문이 있을 때는 구분하기 위해서 ;을 사용해야 합니다.

4. 데이터-상수와 변수

1) literal : 프로그래밍 언어가 제공하는 데이터로 의미를 변경할 수 없는 데이터

정수 리터럴 : 17

실수 리터럴 : 10.4

bool 리터럴 : true, false

문자 리터럴 : ‘문자 또는 문자의 집합’, “문자 또는 문자의 집합”

참조 리터럴 : null

2) constant : 개발자가 만든 값을 변경할 수 없는 데이터 (자바의 final 같은 것)

3) variable : 개발자가 데이터를 저장하기 위한 용도로 만든 이름

4) 자바스크림트에서 변수 만들기

var 변수명 = 값

var 변수명

변수명 = 값

==> 주의 할 점은 자바스크립트에서는 값을 대입하기 전까지는 변수가 만들어진것이 아니어서 선언만 하면 undefined가 됩니다.

==> 자바 스크립트는 동적 바인딩을 하는 언어라서 변수를 선언할 때 자료형을 기재하지 않고 변수에 값이 대입될 때 자료형이 결정됩니다.

==> 데이터의 자료형은 typeof를 이용해서 확인이 가능합니다.

5. 배열(Array)

==> 동일한 자료형의 데이터 모임

==> 비교 가능한 데이터를 묶어 주어야 합니다.

==> 자바스크립트에서는 배열이 배열과 list의 역할을 같이 합니다.

1) 생성

var 배열명 = [데이터 나열]

var 배열명 = new Array(초기개수)

2) 배열의 모든 요소 출력

==> toString 이나 valueOf 라는 메소드 호출

==> join(구분문자열)을 호출해서 각 요소마다 구분 문자열을 추가해서 하나의 문자열로 리턴받아 출력

==> toString은 직접 호출하지 않고 배열의 이름만 출력하는 메소드에 대입해도 호출됩니다.

6. 연산자(operator)

==> 계산을 도와주는 기호나 명령어

1) 증감 연산자

++, --

==> 정수 변수에만 사용 가능한 연산자로 변수의 값을 1증감하는 연산자입니다.

==> 변수의 앞에 사용되면 변수의 값을 먼저 증감하고 명령에 이용하고 뒤에 사용되면 명령에 사용하고 변수의 값을 증감합니다.

2) 산술 연산자

%, *, /, +, -

3) 대입-할당 연산자 : 가장 마지막에 수행됩니다.

=, +=, -=, *=, /=, %=

a=10 : a라는 변수에 10을 할당합니다.

a += 10 : a = a+10

4) 조건 연산자

(조건)?참일때 내용 : 거짓일때 내용

==> 자바스크립트에서는 숫자의 경우 0이 아니면 true로 간주하고 참조형의 경우 null이 아니면 true로 간주합니다.

5) 논리 연산자 : 연산의 결과가 true 나 false로 나오는 연산자

>, >=, <, <=, ==, !=

!(not), &&(논리 and), ||(논리 or)

don’t care : && 연산자는 둘 다 true 인 경우에만 true가 리턴됩니다.

                   || 연산자는 둘 다 false 인 경우에만 false가 리턴됩니다.

                   && 연산자의 경우에는 앞의 조건이 false 이면 뒤의 내용을 조사하지 않습니다.

                   || 연산자의 경우는 앞의 조건이 true 이면 뒤의 내용을 조사하지 않습니다.

<script> var i=0 var result = 10>5 && i++ > 0 //true라서 뒤를 간다. 하지만 후에 ++이 되는 거라서 false alert(result) alert(i) i=0 var result = 10<5 && i++ > 0 //앞이 false라서 뒤에까지 안 감. 따라서 i는 0이다. alert(result) alert(i) //&&는 앞쪽이 false일 확률이 높은 것이 와야 많이 걸러져서 유리하다. //||는 앞쪽이 true일 확률이 높은 것이 와야 많이 걸러져서 유리하다. </script>