배열 함수 기존 자바스크립트로 Query String을 문자를 기준으로 분리하여 객체에 담아 변환하는 사용 예제 : function func(a) { var queryString = a.substr(1); var divide = a.split('&'); var result = {}; for(var i = 0; i < divide.length; i++) { var part = divide[i].split('='); var key = part[0]; var val = part[1]; result[key] = val; } return result; }​ 결과 : └ 이 때, 3002, 25, 1997을 문자열로 분리한다. 3002, 25, 1997을 문자열이 아닌 숫자로 변환하기 function func(a)..

객체 확장 표현식 기존 자바스크립트의 객체 확장 표현식 : 기존 자바스크립트에서 객체와 객체의 값을 선언하기 위해 키 이름과 값을 각각 할당했음 var a = 1; var b = 2; var obj = { x: x, y: y }; // ⓐ var key = 'key'; var combine = {}; combine['one' + key] = 'val'; // ⓑ var obj2 = { // ⓒ x: x, A : function() { console.log('A'); }, B : function() { return 0; } };​ ┌ ⓐ : 키 이름과 키 값이 동일함 ├ ⓑ : 연산 결과로 키값을 대입할 때는 키값을 지정할 코드를 추가로 작성해야 함 └ ⓒ : 객체에 함수를 추가할 때는 변수에 함수를 할당..

클래스기존 자바스크립트 문법은 클래스 표현식이 없어서 prototype으로 클래스를 표현하였음ES6는 클래스를 정의하여 사용할 수 있음 기존 자바스크립트의 클래스 :함수를 생성자 형태로 선언한 다음 상속이 필요한 변수나 함수를 prototype 객체에 할당하는 방법을 사용했음prototype 객체는 new 연산자로 생성되는 객체 안에서 this 연산자의 함수 및 변수 선언 위치를 참조할 수 있는 요소임예시 1 :function Shape (x, y) { this.name = 'Shape'; this.move(x, y);}// static 함수를 선언Shape.create = function(x, y) { return new Shape(x, y); };// 인스턴스 함수를 선언Shape. pro..

템플릿 문자열 JavaScript의 문자열 : var string1 ='안녕하세요' var string2 ='환영합니다' var welcome = string1 + ' ' + string2; // ⓐ var product = { name: '책', price: '5000원' }; var message = '제품' + product.name + '의 가격은' + product.price + '입니다'; // ⓑ var multiLine = '문자열1\n문자열2'; // ⓒ var value1 = 1; var value2 = 2; var boolValue = false; var operator1 = '곱셈값은 ' + (value1 * value2) + '입니다.'; // ⓓ var operator2 = '불..

배치 방법 결정하는 속성 display 속성 display 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용 가능 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수 있음 자주 사용하는 display 속성값 block : 인라인 레벨 요소를 블록 레벨 요소로 만듦 inline : 블록 레벨 요소를 인라인 레벨 요소로 만듦 inline-block : 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있음 none : 해당 요소를 화면에 표시하지 않음 -(예시) : 예시 1 예시 2 예시 3 예시 4 -(결과) : 왼쪽이나 오른쪽으로 배치하는 속성 float 속성 태그는 블록 레벨 요소..

요소 주변의 여백을 설정하는 속성 margin 속성 요소와 요소 사이의 간격을 조절 할 수 있음 4개 방향에 똑같이 지정할 수 있고, margin 다음에 하이픈(-)을 넣고 위치를 나타내는 예약어를 사용해서 특정 방향에만 지정할 수도 있음 기본형 : margin: | | auto margin 속성값 : 너비값이나 높이값을 px이나 em 같은 단위와 함께 수치로 지정함 : 박스 모델을 포함한 부모 요소를 기준으로 너비값이나 높이값을 퍼센트(%)로 지정함 auto : display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정함 마진 속성을 사용하여 웹 문서를 가운데 정렬하기 margin 속성을 사용하여 웹 문서의 내용을 화면 중앙에 배치하려면 배치할 요소의 너비값이 정해져 있어야 함 margin-l..