김방울

웹 문서에 있는 요소는 단순히 태그만 있는 것이 아니라, 태그 속성과 내용을 함께 사용합니다. 그래서 이나 태그를 추가하고 싶다면 단순히 이나 태그에 해당하는 요소 노드뿐만 아니라 태그 안에 있는 텍스트 내용과 속성도 노드로 추가해야 합니다. 예를 들어, 주문이 완료되었습니다. 라는 소스를 DOM 트리에 추가하려면 p 요소 노드와 "accent" 속성 값을 넣을 class 속성 노드, '주문이 완료되었습니다. 라는 텍스트를 넣을 텍스트 노드가 필요합니다. 그리고 이렇게 만든 노드를 부모 노드에 연결해서 웹 문서에 추가합니다. 새로운 노드를 만들거나 부모 노드에 연결할 때는 다음 함수를 사용합니다. createElement() : 새 요소 노드를 만듭니다. createTextNode(): 텍스트 내용이 있..

DOM의 정의 Document Object Model 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법. DOM 트리는 웹 문서 요소를 다음과 같이 표현합니다. 웹 문서의 태그는 요소(Element) 노드로 표현합니다. 태그가 품고 있는 텍스트는 해당 요소 노드(태그)의 자식 노드인 텍스트(Text) 노드(#text:)로 표현합니다. 태그의 속성은 모두 해당 요소 노드(태그)의 자식 노드인 속성(Attribute) 노드로 표현합니다. 주석은 주석(Comment) 노드로 표현합니다. DOM 트리가 만들어지는 것을 실시간으로 확인할 수 있는 사이트 https://software.hixie.ch/utilities/js/live-dom-viewer/ DOM 요소..

리터럴 객체로 배열을 만드는 법 var numbers = ["one", "two", "three", "four"] Array 객체로 배열 만들기 var myArray = new Array(); // Array 객체의 인스턴스를 만듭니다. var numbers = new Array("one","two","three","four") .length 속성은 Array 객체의 속성! concat() 함수 기존의 배열에 또 다른 배열이나 값을 합쳐서 새로운 배열을 만드는 함수. 예를 들어 다음과 같은 nums 배열과 chars 배열이 있을 때 다음과 같이 concat() 함수를 사용해 두 개의 배열을 연결해서 새로운 배열을 만들 수 있다. concat() 함수를 사용할 때 nums 배열과 chars 배열 순서를 바..

현재 날짜 정보를 가지는 date 객체 만들기 간단히 new 예약어 다음 Date 객체를 사용하면 됩니다. 이렇게 만든 인스턴스에는 현재 날짜와 시간이 담깁니다. var now = new Date(); 특정 날짜나 시간 정보를 가지는 Date 객체 만들기 특정 날짜를 저장한 Date 객체를 만들고 싶다면 Date 다음의 괄호 안에 날짜 정보를 입력합니다. 예를 들어 '2018년 2월 25일' 날짜 정보를 객체에 저장한 후 프로그램에 사용하고 싶다면 new Date("2018-02-25"); 다음과 같이 입력합니다. 이렇게 만든 객체에는 지정한 날짜의 오전 9시 정보가 담깁니다. 연도의 월까지만 지정했다면, 해당 월의 1일, 오전 9시로 설정됩니다. 시간 정보까지 함께 지정하려면 날짜 다음에 대문자 T를 ..

이벤트(Event) 란 웹 브라우저나 사용자가 행하는 어떤 동작을 말합니다. 웹 문서에서 키보드의 키를 누르는 것, 브라우저가 웹 페이지를 로드하는 것이 이에 속합니다. 마우스 이벤트 속성 설명 click 사용자가 HTML 요소를 마우스로 눌렀을 때 이벤트가 발생합니다. dbclick 사용자가 HTML 요소를 마우스로 두 번 눌렀을 때 이벤트가 발생합니다. mousedown 사용자가 요소 위에서 마우스 버튼을 누르는 동안 이벤트가 발생합니다. mousemove 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생합니다. mouseover 마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생합니다. mouseout 마우스 포인터가 요소를 벗어날 때 이벤트가 발생합니다. mouseup 사용자가 누르고..

자바스크립트의 자료형은 기본형과 복합형으로 나뉩니다. 기본형은 값을 하나만 가지고 있으나 복합형은 여러 값을 한꺼번에 담고 있습니다. 자료형 설명 기본형 number(숫자) 따옴표 없이 표기한 숫자를 나타냅니다. string(문자열) 작은따옴표(')나 큰따옴표(")로 묶어 나타냅니다. boolean(논리형) 참(true)과 거짓(false)이란 두 가지 값만 가지고 있는 유형입니다. undefined 자료형을 지정하지 않았을 때의 유형. 변수를 선언하고 값을 정의하지 않았을 때 null 값이 유효하지 않을 때의 유형 복합형 array(배열) 하나의 변수에 여러 값을 저장하는 유형 object(객체) 함수와 속성이 함께 표함된 유형 자료형을 확인하는 방법 - typeof 연산자 value 변수에 10을 저..

HTML 슬라이드 1 슬라이드 2 슬라이드 3 슬라이드 4 슬라이더를 만들고, 커스텀페이지에 썸네일로 사용할 이미지 주소를 슬라이드의 data 속성에 적는다. JS $('.slider-1').slick({ // 슬라이드 될 태그의 선택자 넣기 slide: 'li', dots : true, infinite : false, autoplay: false, pauseOnHover : false, arrows: false, fade: true, draggable: false, customPaging: function (slider, i) { var thumb = $(slider.$slides[i]).data('thumb'); return ''; } }); HTML에 적은 data 속성을 .data() 함수로 불러..

# 기존에 a2 데이터베이스가 존재 한다면 삭제 DROP DATABASE IF EXISTS a2; # 데이터베이스 조회 SHOW DATABASES; # 새 데이터베이스(`a2`) 생성 CREATE DATABASE a2; # 새 데이터베이스(`a2`) 선택 USE a2; # article 테이블 생성(id, regDate, title, body) CREATE TABLE article( id INT(10), regDate DATETIME, title CHAR(200), `body` TEXT ); # article 테이블 조회(*) SELECT * FROM article; # article 테이블에 data insert (regDate = NOW(), title = '제목', body = '내용') INSER..