[JavaScript] DOM 노드 읽기, 탐색, 추가, 삭제

1. DOM 노드 - DOM : Document Object Model - 웹 문서의 모든 요소를 자바스크립트를 이용해 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법 - 웹 문서의 모든 요소들을 객체로 만들고 이를 트리 구조로 구성한 모델 - 브라우저의 문서에 객체(태그)를 의미 2. DOM 노드 읽기 - 노드 읽기 : 문서에 DOM 노드(객체)를 가져와 자바스크립트에서 읽거나 사용 getElementById() 요소에 지정된 id를 통해 객체를 가져옴 getElementsByTagName() 요소에 태그명을 통해 객체를 배열로 가져옴 getElementByName() 요소에 이름을 통해 객체를 배열로 가져옴 getElementByClassName() 요소에 지정된 클래스명을 통해 객체 배열을 ..

[CSS] CSS 애니메이션

1. CSS 애니메이션 - 웹 페이지를 보다 시각적으로 역동적이게 움직이게 하기 위한 스타일 기능 - 이 속성은 블록 요소(Block Element)를 기본으로 하여, 일반적으로 div 블록을 사용 * 애니메이션의 대표적인 속성 transform 트랜스폼은 요소 이동, 크기 변경, 위치, 색상 등 속성 변경 수행 transition 트랜지션은 시간 경과에 따라 하나의 속성 상태가 다른 속성 상태로 변형 transform과 transition이 짝이고, @keyframe와 animation이 짝이다 @keyframe 키프레임 애니메이션을 만들 수 있도록 해주는 블록 키워드 animation 키프레임 애니메이션 실행을 위해 CSS에 설정해주는 속성 2. transform / transition transfo..

[CSS] CSS 위치 지정 및 화면 중앙 배치

1. 가로 가운데 정렬 방법 margin 이용 가로 가운데 정렬 방법 margin-left: auto; margin-right: auto; margin: 0 auto; margin: 0 auto 0 auto; text-align 이용 가로 가운데 정렬 방법 - 부모에 스타일 적용해야 함 text-align: center; // left, right 단, 자식 박스는 반드시 display: inline-block; or inline; 여야 한다. position/transform 이용 가로 가운데 정렬 방법(박스 높이를 모를 경우) - 부모에 스타일 적용해야 함 position: relative; left: 50%; transform: translateX(-50%); display flex 가로 가운데 정..

[CSS] CSS float, clear 속성

1. float 속성 - float 사전적 의미는 뜨다, 띄우다, 뜨는 물건, 부유물 이라는 의미이다. - 태그에 플로팅 속성을 준다면, 다른 태그에 영향 없이 왼쪽 또는 오른쪽으로 정렬하여 띄운다는 기본속성을 가짐 - 단, 위 또는 아래에 태그가 있거나 부모 태그가 있다면 예상치 못한 상황이 발생할 수 있는 것에 주목 left 요소를 왼쪽으로 정렬 right 요소를 오른쪽으로 정렬 2. clear 속성 - float 속성을 적용하면 그 이후에 오는 다른 요소들까지 똑같은 속성이 전달되어 둘러싼 형태가 되거나 부유된 영역 아래(under)로 들어가게 된다. - 이러한 문제를 해결하기 위해 그 전의 상태로 돌릴 경우 사용한다. both 오른쪽/왼쪽 취소(가장 많이 사용) left 왼쪽 취소 right 오른..

[CSS] CSS 배경 이미지(background-image)

https://tadaktadak-it.tistory.com/69?category=1024176 [CSS] background(배경) 1. 배경색(background-color) - HTML 요소의 배경색을 설정 color : white(색깔명) = #ffffff(16진수) = rgb(255,255,255)(RGB코드) background-color: 색깔명 혹은 RGB코드; 2. 배경 이미지(background-image) -.. tadaktadak-it.tistory.com 1. 배경이미지 스타일(background-image) - 웹 화면 또는 박스 모델 등의 배경으로 이미지를 삽입할 때 사용 * 배경 이미지 관련 속성 background-image 이미지를 삽입할 경우 사용 background-s..

[JavaScript] 문서 객체 모델(DOM)

1. 문서 객체 모델(DOM) - DOM : Document Object Model - 웹 문서의 모든 요소를 자바스크립트를 이용해 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법 - 웹 문서의 모든 요소들을 객체로 만들고 이를 트리 구조로 구성한 모델 - DOM 트리 구조 : 웹 문서의 요소를 부모와 자식 요소로 구성된 트리 구조 2. 여러 DOM 노드 문서 노드(Document Node) - 트리의 최상위 존재하며, 하위 자식 노드에 접근하기 위해선 반드시 Document Node를 통해야만 한다. - DOM 트리에 접근하기 위한 시작점 요소 노드(Element Node) - 웹 문서의 태그 Element Node로 표현 - 모든 Element Node는 Attribute/Text Node를 ..

[JavaScript] JavaScript Array 객체

1. Array 객체 생성 let arr = [값1, 값2, ...]; -> 생성과 동시에 초기화 let arr = new Array(); -> 배열을 생성하기만 함 let arr = new Array(배열크기); -> 생성과 동시에 공간을 만들어 둠 2. 주요 메소드 pop() arr.pop(); 배열의 마지막 요소를 제거 후 리턴 push() arr.push("안녕"); 배열의 마지막에 새로운 요소 추가 reverse() arr.reverse(); 배열의 요소 순서 반전 sort() sort((a ,b) => {return a - b} sort((a ,b) => {return b - a} arr.sort(); arr.sort((a ,b) => {return a - b}; arr.sort((a ,b) ..

[JavaScript] typeof / instanceof, String 객체

1. typeof, instanceof - typeof : 피연산자의 데이터 타입을 반환하는 타입 연산자 - instanceof : 객체가 특정 객체 타입인지 확인하는 비교 연산자 2. String 객체 let str = "가나다"; -> String 변수 let str = new String("가나다"); -> String 객체 3. String 객체 주요 메소드 charAt(position) str1.charAt(1); 해당 인덱스 문자 반환 charCodeAt(position) str1.charCodeAt(1); 해당 인덱스 문자를 유니코드로 반환 concat(args) str1.concat("1234"); 매개변수로 입력한 문자열을 결합 indexOf(search, position) str1.in..

[JavaScript] JavaScript 내장 객체, Object 객체, Number 객체

* 프로토타입 이해 https://tadaktadak-it.tistory.com/80?category=1024177 [JavaScript] 객체와 상속, 프로토타입 1. 객체 - 추상적인 개념이 실체화 된 것 - 프로퍼티(자바에서 필드)들로 이루어진 하나의 집합 2. 객체 선언 리터널을 이용한 객체 생성 - 장점 : 객체를 빠르고 간단하게 만들 수 있음 - 단점 : 비 tadaktadak-it.tistory.com 1. 내장 객체 - 브라우저의 자바스크립트 엔진에서 내장하고 있는 객체 - 우리가 만든 객체가 사용자 정의 객체가 아닌 자바스크립트에서 미리 만들어 놓은 객체를 의미 - 밑에 처럼 내장 객체의 종류는 어마무시하게 많다. AggragateError, Array, AsyncFunction, Ato..

[JavaScript] JavaScript 객체

https://tadaktadak-it.tistory.com/80?category=1024177 [JavaScript] 객체와 상속, 프로토타입 1. 객체 - 추상적인 개념이 실체화 된 것 - 프로퍼티(자바에서 필드)들로 이루어진 하나의 집합 2. 객체 선언 리터널을 이용한 객체 생성 - 장점 : 객체를 빠르고 간단하게 만들 수 있음 - 단점 : 비 tadaktadak-it.tistory.com 1. 객체의 기본 및 구조 - 다양한 데이터를 가질 수 있는 key, value 형식의 property 여러 개를 가질 수 있는 데이터 집합 - 자바스크립트에서의 객체란 자바스크립트 그 자체라고 말해도 과언이 아님 - 추상적인 개념이 실체화 된 것 - 프로퍼티들로 이루어진 하나의 집합 프로퍼티(property) ..