Study Record

CSS 애니메이션변형(transform) 이란 특정 요소의 크기나 형태 등 스타일이 바뀌는 것을 말한다. 2차원 변형은 수평이나 수직으로 웹 요소가 변형되는 것으로 크기나 각도만 지정하면 된다. 2차원 좌표를 사용한다. 3차원 변형은 x축과 y축에 원근감을 추가한다. z축은 앞뒤로 이동하고 보는 사람쪽으로 다가올수록 값이 더 커진다.   translate 함수지정한 방향으로 이동할 거리를 지정하면 해당 요소를 이동시킨다.transform:translate(tx, ty) : x축 방향으로 tx만큼, y축 방향으로 ty만큼 이동한다. transform:translate3d(tx, ty, tz) : x축 방향으로 tx만큼, y 축 방향으로 ty만큼, z축 방향으로 tz만큼 이동transform:translat..

CSS3 선택자   연결 선택자선택자와 선택자를 연결해 적용 대상을 한정하는 선택자이다. ① 하위 선택자상위 요소인 section 요소 안에 있는 모든 p 요소의 글자 색을 파란색으로 바꾼다는 의미가 된다.section p {color: blue;}  ② 자식 선택자자식 요소에 스타일을 적용하는 선택자이다. 두 요소 사이에 '>'를 표시해 부모 요소와 자식 요소를 구분한다. #container > p { color: blue; } 자식 선태자와 하위 선택자의 다른 점을 보기 위한 예시이다.  제목 색상은 파란색 내용은 기본 색상 끝 내용 색상 자식 선택자의 경우) container 의 하위 요소인 p 요소에만 스타일이 적용된다.#container > p { color..

멀티미디어HTML4 까지는 웹 브라우저에서 멀티미디어를 직접 재생할 수 없기 때문에 플러그인 프로그램을 연결해서 사용했다. HTML5 웹 표준 이후 웹 브라우저에서 직접 멀티미디어를 재생했다. 일부 사이트에서는 아직도 플래시 플레이어를 사용하는 곳도 있다.   HTML5와 비디오 코덱 비디오 코덱은 비디오 인코딩과 디코딩을 수행하였다. 인코딩이란 원본 비디오를 컴퓨터에서 사용할 수 있는 비디오 파일로 변환하는 것을 말하며 디코딩은 컴퓨터 비디오 파일에 있는 비디오 정보를 가져와 플레이어에 보여주는 과정을 뜻한다. 대부분의 브라우저에서 H.264 코덱을 지원하므로 mp4 파일을 기본적으로 사용한다. 무료이면서 최신 코덱인 v9 코덱을 이용한 webm 파일도 함께 사용한다.  비디오 코덱 종류  ① H.26..

클래스 정의하기 - class 명령ES2015 에서는 객체지향 구문이 크게 달라졌다. class 명령이 도입되었다. class 명령으로 정의된 클래스는 내부적으로는 함수이다. 자바스크립트에서 말하는 클래스가 도입된 것이 아닌 알기 쉽게 표현하기 위해서 class 명령만 도입되었다는 것에 가깝다. class 명령은 프로토타입 기반의 객체지향 구문을 간결하게 만드는 간편 표기법이라고도 할 수 있다. 메소드도 직접적으로 정의하는 표현법이 생겼다. class 블록 구문 하에서 메소드를 '이름(args, ...) {}' 구문으로 정의하는 것이 가능하다.class Member { // 생성자 constructor(name, age) { this.name = name; this.a..

ES2015 이전의 객체지향자바스크립트는 인스턴스화 및 인스턴스라는 개념이 존재하나 이른바 클래스가 없고, 프로토타입이 존재했다. 프로토타입이란 어떤 객체의 원본이 되는 객체로 자바스크립트에서는 이것을 이용하여 새로운 객체를 생성한다. 따라서 JavaScript 의 객체지향은 프로토타입 베이스의 객체지향이라고 불린다.  가장 간단한 클래스 정의하기자바스크립트의 세계에서는 엄미한 의미의 클래스가 존재하지 않기 때문에 함수(Function 객체)에 클래스의 역할을 부여한다. 간단한 클래스의 정의는 다음과 같다. 일반 함수와 구분하기 위해 첫글자를 대문자로 기술하는 것이 일반적이다.var Member = function() {}; new 연산자로 인스턴스화가 가능하다.var Member = function()..

변수의 처리 순서 - 스코프 체인자바스크립에서 스크립트 실행 시 내부적으로 글로벌 객체를 생성한다. 글로벌 객체는 글로벌 변수나 글로벌 함수를 관리하기 위한 편의적인 객체로 글로벌 변수나 글로벌 함수는 글로벌 객체의 프로퍼나 메소드이다. 로켈 변수도 Activation 객체(통칭 Call 객체)의 프로퍼티이다. Call 객체는 함수 호출이 있을 때마다 내부적으로 자동 생성되는 객체이다. 변수를 처리하는 과정에 관여하는 것이 스코프 체인이다. 스코프 체인이란 글로벌 객체, Call 객체를 생성 순서대로 연결하 리스트를 말한다. var y = 'GLoBal';function outfunc() { var y = "LINNER"; function innerFunc() { var z = "..

ES2015 인수 표기법   인수의 디폴트 값인수의 디폴트값을 선언하려면, '가인수 = 디폴트값'의 형식으로 가인수를 선언할 수 있다. function plusF(a = 3, b = 8) { console.log(a+b);}plusF(); // 11 + 디폴트값 사용시 주의사항이 있다. ① null 값이 인수로 넘어왔을 때 디폴트값으로 대체되지 않는다. null 이 그대로 사용된다.function plusF(a = 3, b = 8) { console.log(a+b);}plusF(null, null); // 0 ② undefined(미정의) 값은 디폴트 값으로 대체된다.function plusF(a = 3, b = 8) { console.log(a+b);}plusF(2, ..

함수란?함수란 주어진 입력에 근거하여 어떤 처리를 실시한 뒤 결과를 돌려주는 구조를 함수라고 한다. 애플리케이션 개발자가 스스로 함수를 정의하는 사용자 정의 함수를 정의하는 방법에는 크게 4가지가 있다.    function 명령으로 정의하기 function 함수명(인수, ...) { ... 함수 안에서 실행되는 임의의 처리... return 반환값;} 인수는 함수의 동작을 결정하기 위한 파라미터다. 이 파라미터는 호출원으로부터 지정된 값을 받아들이기 위한 변수를 콤마 단락으로 지정한다. 인수를 받기 위한 변수를 가인수라고 하며 함수 내부에서만 참조 가능하다. 인수와 구별하는 의미로 호출 측의 인수를 실인수라고 부른다. 반환값은 없으면 생략해도 무방하다. return 명령어까지도 생략해도 된다..