본문 바로가기

Front-End64

[JavaScript] Chapter 05. 배열 배열 대괄호를 사용하여 표현 각 요소 자료형 고정X 배열의 길이 존재 let arr1 = new Array("H", "e", "l", "l", "o"); let arr2 = ["H", "e", "l", "l", "o"]; 배열 선언 방법 let arr = new Array("사과", 1); let arr = new Array(2); let arr = ["사과", 1]; arr[0] // 사과 => 문자열 타입 arr[1] // 1 => 숫자 타입 arr.length // 2 => 문자열 길이 배열 요소 접근 방법 인덱스(index) indexOf() at() let arr = new Array("사과", "바나나", "오렌지"); arr.index0f(0); // -1 arr.index0f("오렌지");.. 2022. 12. 8.
[JavaScript] Chapter 04. 연산자 typeof 연산자 변수, 객체, 함수 또는 표현식의 데이터 타입을 반환해주는 연산자 typeof "John" // Return string typeof 3.14 // Return number typeof Nan // Return number typeof false // Return boolean typeof [1, 2, 3, 4] // Return object typeof {name:'John', age:34} // Return object typeof new Data() // Return object typeof function(){} // Return function typeof myCar // Return undefined typeof null // Return object instanceof 연.. 2022. 12. 8.
[JavaScript] Chapter 03. ==, ===의 차이점 ==는 Equal Operator이고, ===는 Strict Equal Operator이다. ==는 a == b 라고 할때, a와 b의 값이 같은지를 비교해서, 같으면 true, 다르면 false라고 한다.(값만 같으면 true이다.) ===는 Strict, 즉 엄격한 Equal Operator로써, "엄격하게" 같음을 비교할 때 사용하는 연산자이다. ===는 a === b 라고 할때, 값과 값의 종류(Data Type)가 모두 같은지를 비교해서, 같으면 true, 다르면 false라고 한다. 값은 똑같이 1이지만 값의 종류가 숫자냐, 문자열이냐에 따라 === 연산자를 사용할 때 결과가 false라고 나온다. var a = 1; var b = "1"; console... 2022. 12. 5.
[JavaScript] Chapter 02. 값 값 (Value) 조작 가능한 어뗜 표현 문자열, 문자, 숫자 등이 가짐 값 종류 원시 값 참조 값 원시 값 원시적인 값 단순 값 단순 데이터 원시 값 종류 숫자, 문자열, 불리언, null, undefined 원시 값은 한 번 메모리에 올라간 값이 변경되지 않는다. 참조 값 참조하여 값을 조작함 메모리에 객체로 저장됨 래퍼 객체 (Wrapper Object) 원시 타입을 객체화 -> new String() 임시 객체 생성 원시 타입 number, string, Boolean, undefined, null 래퍼 객체 종류 number, string, Boolean 래퍼 객체 변환 과정 원시 타입에 해당하는 객체 생성 생성된 객체의 함수 호출 함수 처리 생성된 객체 소멸 원시 타입만 존재 래퍼 객체 예시 .. 2022. 12. 5.
[JavaScript] Chapter 01. 자바스크립트와 웹 브라우저 렌더링 엔진 HTML / CSS 코드를 해석하여 트리를 구성해 전달해주는 역할 받아온 것 중, 자바스크립트는 인터프리터에게 줌 자바스크립트 해석기 인터프리터 HTML 태그 동적으로 움직이게 함 자바스크립트 위치 중요 스크립트는 body 요소 가장 아래 위치 페이지 로딩 문제 중간중간에 자바스크립트 코드가 들어간다면, DOM을 생성하다가 다시 자바스크립트 실행기에 자바스크립트 코드를 보내고 난 후, 다시 DOM을 생성하는 형식이 되기 때문이다. DOM 조작 에러 발생 페이지가 만들어지지 않은 상태에서 에러가 발생할 수 있다. DOM (Document Object Model) 문서 객체 모델 웹 페이지를 이루는 Tag들을 자바스크립트가 이용할 수 있게 브라우저가 렌더링 엔진을 이용해서 Node 객체들이 구성.. 2022. 12. 4.
[CSS] Chapter 05. 선택자(Selector)_3 1. 주요 선택자 - Type, Class, ID 2. 속성 선택자 - [attr], [attr=value] 3. 속성 선택자 -[attr^], [attr$], [attr_] 4. 가상클래스 선택자 - first-child, last-child, nth-child 5. 가상클래스 선택자 - first-of-type, last-of-type, nth-of-type 6. 가상클래스 선택자 - not 7. 가상클래스 선택자 - link, visited 8. 가상클래스 선택자 - hover, active, focus 9. 가상클래스 선택자 - enabled, disabled, checked 10. 가상요소 선택자 - before, after 11. 가상요소 선택자 - first-letter, first-line.. 2022. 11. 26.
[CSS] Chapter 04. 선택자(Selector)_2 1. 주요 선택자 - Type, Class, ID 2. 속성 선택자 - [attr], [attr=value] 3. 속성 선택자 -[attr^], [attr$], [attr_] 4. 가상클래스 선택자 - first-child, last-child, nth-child 5. 가상클래스 선택자 - first-of-type, last-of-type, nth-of-type 6. 가상클래스 선택자 - not 7. 가상클래스 선택자 - link, visited 8. 가상클래스 선택자 - hover, active, focus 9. 가상클래스 선택자 - enabled, disabled, checked 10. 가상요소 선택자 - before, after 11. 가상요소 선택자 - first-letter, first-line.. 2022. 11. 25.
[CSS] Chapter 03. 선택자(Selector)_1 1. 주요 선택자 - Type, Class, ID 2. 속성 선택자 - [attr], [attr=value] 3. 속성 선택자 -[attr^], [attr$], [attr_] 4. 가상클래스 선택자 - first-child, last-child, nth-child 5. 가상클래스 선택자 - first-of-type, last-of-type, nth-of-type 6. 가상클래스 선택자 - not 7. 가상클래스 선택자 - link, visited 8. 가상클래스 선택자 - hover, active, focus 9. 가상클래스 선택자 - enabled, disabled, checked 10. 가상요소 선택자 - before, after 11. 가상요소 선택자 - first-letter, first-line.. 2022. 11. 24.
[CSS] Chapter 02. Cascading 원칙 (적용 우선순위) Cascading : 폭포같은, 계단식의, 위에서 아래로 흐르는, 연속적인 CSS 개발을 할 때, 흔히 겪을 수 있는 실수 : 요소에 CSS를 줬지만 적용되지 않을 때 1. 스타일 우선순위 2. 스타일 상속 1. 스타일 우선순위 선언된 위치 : 동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해진다 브라우저 기본 스타일 < 외부 스타일(External) < 내부 스타일(Embedded) < inline 스타일 Specificity(명시도) : 적용 범위가 더 구체적일수록 우선적으로 적용된다. tag 스타일 < class 스타일 < id 스타일 < inline 스타일 단순 tag로 지정된 스타일 < id/class/attribute 등 직접 지정한 스타일 id는 calss보다 우선이다. 부모로부터 상속받.. 2022. 11. 24.
[CSS] Chapter 01. CSS 적용 1. 내부 스타일 (embedded) 2. 인라인 스타일 (inline) 3. 외부 스타일 (external) 1. 내부 스타일 (embedded) 코드는 위에서부터 아래로 읽는다. style 태그는 body 태그 안에 맨 마지막에 놔둬도 적용이 된다. 렌더링이 잘 되지만, 추후 웹 페이지에 다양한 기능들로 인해 스크립트들이 추가되고, 맨 마지막에 style 태그 코드가 있다면? 맨 처음에는 style 적용이 안된 상태로 렌더링이 되었다가 다양한 기능 로딩후에 style 적용이 된 상태로 렌더링 될 것이다. 그래서 style 태그는 head에 정의해두는 것이다. 2. 인라인 스타일 (inline) Welcom! 3. 외부 스타일 (external) link 태그의 위치는 최상단에 두어야 한다. html의.. 2022. 11. 24.

티스토리툴바