Study Record

폼 요소에 액세스하기자바스크립트에서 폼(form)은 사용자의 입력을 받는 대표적인 수단이다. 이러한 폼에서 값을 취득하고 설정하는 방법을 알아본다.   입력 상자/선택 상자의 값 취득하기입력 상자/선택 상자의 값을 취득하는 방법은 value 프로퍼티에 액세스하기만 하면 된다. 설정하는 것도 value 프로퍼티의 값을 변경하면 된다.document.addEventListener('DOMContentLoaded', function() { document.getElementById('btn').addEventListener('click', function() { var name = document.getElementById('name'); // 입력 상자 값 취득하기 ..

속성값 컨트롤하기스크립트로 페이지를 조작하는 방법이다.   요소 노드 속 같은 이름의 프로퍼티로 액세스 가능대부분의 요소 노드에 액세스했다면 속성값에 액세스하는 것은 간단하다. 대부분의 속성은 요소 노드 속의 동일한 이름의 프로퍼티로 액세스가 가능하기 때문이다. var naver = document.getElementsByClassName('naver');// 속성값 취득console.log(naver[0].href);// 속성값 변경naver[0].href = "http://www.google.com"; 하지만 그렇지 않은 경우도 있다. CSS 클래스를 나타내는 속성명은 'class' 이지만 DOM 프로퍼티는 'className'이다.var naver = document.getElementsByClas..

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