Study Record

DOM외부 서비스에서 어떤 입력을 받아 이를 처리한 결과를 페이지에 반영시킨다는 흐름이 자바스크립트의 흐름이다. 결과를 페이지에 반영시킨다는 것은 HTML을 JavaScript에서 편집한다는 뜻이다. DOM 은 마크업 언어로 작성된 문서에 액세스하기 위한 표준적인 구조로 JavaScript에 한정하지 않고 현재 주로 사용되는 언어의 대부분에서 지원하고 있다. DOM 은 문서를 문서 트리로서 취급한다. DOM 이라는 이름처럼 문서에 포함되는 요소나 속성, 텍스트를 각각 객체로 보기 때문에 객체의 집합(계층 관계)이 문서라고 생각한다. 문서를 구성하는 요소나 속성, 텍스트 등의 객체를 노드라고 부른다. 종류에 따라 요소 노드, 속성 노드, 텍스트 노드 등으로 부른다. DOM 은 노드를 추출, 추가, 치환, ..

반응형 웹 디자인웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법이다. 다양한 화면 크기의 모바일 기기들의 웹 사이트를 표시하면 화면 디스플레이 값이 다양해지고 있는 때에 화면 크기에 반응해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것이 바로 반응형 웹 디자인이다. 단, 반응형 웹 기술이 최신 웹 표준인 CSS3의 일부 최신 모던 웹 브라우저에서만 지원된다.   뷰포트(viewPort)뷰포트란 실제 내용이 표시되는 영역을 뜻한다. PC 화면과 모바일 화면의 픽셀 표시 방법이 다르기 때문에 모바일 화면에서 의도한대로 표시되지 않는다. 뷰포트를 지정하면 기기 화면에 맞춰 확대/축소해서 내용을 표시한다.   뷰포트 지정하기  태그 안에서 태그를 이용해 뷰포트를 ..

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 = "..