DOM(Document Object Model) : 문서 객체 모델 문서(HTML, XML 등)에 작성해 놓은 요소, 태그들에 접근하는 방법 제공 DOM 역할 새로운 HTML의 요소나 속성 추가 존재하는 HTML 요소나 속성 제거 HTML 문서의 모든 HTML 요소, 속성, css 스타일 변경 HTML 문서에 새로운 HTML 이벤트 추가 HTML 문서에 모든 HTML 이벤트에 반응 Document : 웹 페이지에 존재하는 HTML요소에 접근하여 행동하고자 할 때 사용하는 객체 [ Document 속성 ] document.documentElement document.head document.title document.body document.URL document.domain [ Document 요소 선택..

Javascript 자료형 기본 자료형 vs 객체 자료형 기본 자료형: 다른 변수에 값을 할당하거나 함수 인자를 넘길 때 값을 복사해 전달 = 값을 가지고 있는 변수 객체 자료형: 값을 복사해 전달하는 것이 아닌 메모리 주소를 복사(같은 객체를 참조) = 주소를 가지고 있는 변수(객체의 주소를 저장) Object(객체/참조) 자료형 : Object 클래스 뿐 아니라 배열과 함수, 클래스 등 모두 Object에 포함 [ 객체 ] : 참조할 수 있는 메모리 상의 값 ex) ▼▼▼ 객체: 고양이 그 자체 속성: 이름-나비, 나이-1살 메소드: mew()-울다, eat()-먹는다 var cat = { name: "나비", age: 1, mew: function() { return "야옹"; } }; # 리턴값 ..

Javascript 조건문 : 특정 조건 만족시 실행하는 명령의 집합(조건이 참일 때 실행됨). if, switch 1) if문 javascript if문 if (조건1) { // 조건1이 참이라면 실행 } ----- if (조건1) { // 조건1이 참이라면 실행 } else if (조건2) { //조건1이 참이 아니고 조건2가 참이라면 실행 } else { //조건1과 조건2가 모두 참이 아닐 때 실행 } if문 조건 작성 방법 2) switch문 Javascript 반복문 : 똑같은 명령을 일정 횟수만큼 반복해 수행하도록 하는 실행문 for(for~in), while(do~while) 중첩 가능함 1) for문 * Javascript for문 for (초기문;조건문;증감문(추가동작부분)) { //명..

Javascript : 웹페이지에서 복잡한 기능을 구현(동적구현)할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어, // javascript 작성법 # 태그나 태그 안에 모두 사용: 중요도에 따라서 head 혹은 body태그에 적절히 사용 Javascript 출력하기 1) .console.log() : 함수 안에 적은 내용을 브라우저의 개발자 도구 → 콘솔에서 확인 가능 2) .alert() : 브라우저가 열렸을 때, 그 내용을 알림창에 보여줌(창을 띄우는 함수) Javascript 변수 1) 선언: 변수이름 지정 let 변수이름; var 변수이름; 2) 할당: 변수이름과 값 지정 const 변수이름 = 값; let 변수이름 = 값; var 변수이름 =값; 재선언 재할당 var 가능 가능 let 불..

display 속성 inline: 인라인이 아닌 요소에 인라인 속성 부여 inline속성: 본인 크기만큼만 공간 차지 block: 블록이 아닌 요소에 블록 속성 부여 block속성: 크기 부여 가능 inline-block: 인라인 속성이지만 블록 속성처럼 크기 부여 가능 none: 화면에서 요소를 사라지게 함(크기도 차지하지 않음) flex: 자식에게 크기를 부여할 수 있는 인라인 속성 # 쉽게 레이아웃 구조를 잡을 수 있음 # flex container(부모요소) 속성 justify-content: 가로 정렬 space-between: 자식 요소들에게 동일한 크기를 부여하며 자식 요소 배열 space-around: 양 끝에 여백을 주면서 자식 요소 배열 align-items: 세로 정렬 부모요소의 세로..

transform 속성 skew(deg): 기울기 rotate(deg): 회전(시계 방향) rotate x축 회전: x축이 회전 rotate y축 회전: y축이 회전 rotate 회전: 평면 회전 scale: 확대 translate(px): 이동(위에서 아래로) translate z축 이동: 뒤로 이동(요소가 작아지는 것처럼 보임) # tramsform 속성은 inline요소에 적용되지 않음. inline요소에 transform속성을 적요하고 싶다면 inline-block(display속성)요소로 변경하고 사용해야 함. transform-origin 속성 : transform 속성과 함께 사용되는 속성, 회전 중심(원점·기준점)을 지정 # 속성 값은 백분율(%)과 키워드 중 하나로 지정할 수 있음 백분율..