TechLabs

1. 수학 객체 자바스크립트의 수학 기능을 사용하는 명령어이다. Math.max() 최대값 Math.round() 반올림 Math.min() 최소값 Math.floor() 버림 Math.random() 0 ~ 1 랜덤한 숫자 Math.ceil() 올림 예전에는 컴퓨터가 전자 계산기 역할을 수행했기 때문에, 수학 객체가 탄생한 것이다. 2. 인증 번호 만드는 방법 수학 객체를 이용하여 인증 번호를 만들 수 있다. // Math.random, Math.floor, String, padStart를 이용한 인증 번호 만들기 Math.random() * 1000000; // 301924.7597895887 Math.floor(Math.random() * 1000000); // 705252 String(Math.f..

1. 반복문 - 같은 행위를 반복하는 것을 의미한다. 초기식 : 시작점을 의미한다. 여기서 변수를 지정하고 할당할 때 const를 사용하면 증감문에서 변화를 줄 수 없기 때문에 반드시 let을 사용하기. 시작점 의미한다. 조건식 : 검증 과정을 의미한다. 언제 반복문을 종료할 것인지 정할 수 있다. 끝 점을 의미한다. 증감문 : 1회 반복할 때마다 카운트를 어떻게 할 것인지 지정할 수 있다. - 몇 번을 반복할 것인지가 핵심이다. for(초기식; 조건식; 증감문){ 반복하여 실행할 내용 } 증감문에서 일반적으로 많이 사용하는 코드이다. i++ // i += 1, 하나씩 증가를 의미한다. i-- // i -= 1, 하나씩 감소를 의미한다. 2. Template Literals 템플릿 리터럴 - 템플릿 리터..

1. 조건문 - 특정 조건을 만족하면 실행한다. - 핵심은 시작점과 끝점이 존재한다는 것이다. - true 인 경우에는 시작점을 실행하고, false인 경우에는 끝 점을 실행한다. 조건의 개수는 신경쓰지 않아도 된다. - 각각 다른 명령이 실행될 수 있도록 만들어주면 된다. if(조건문){ console.log(A) // 조건문이 참인 경우 // A 실행하기 }else{ console.log(B) // 조건문이 거짓인 경우 // B 실행하기 } 2. 거짓같은 값 false 라고 평가되는 값을 의미한다. 0 마이너스 0 빈 문자열 null undefined NaN 이외의 값들은 true 라고 평가되는 값이다. 주의할 점은 빈 문자열인 경우 문자가 없어도 띄어쓰기가 있는 경우 에는 true 라고 평가된다. ..

1. 데이터 타입 String object 배열은 객체의 한 종류이다. Number null Boolean undefined - null : 아무것도 없음을 알려준다. 우리가 의도한 빈칸이다. - undefined : 값이 없음을 알려준다. 우리가 의도치 않게 값을 넣지 않은 것이다. 위의 2개의 데이터 타입을 우리가 의도한 것인지 아닌지를 구분해야 한다. ∴ null ≠ undefined 2. 연산자 산술 연산자 비교 연산자 논리 연산자 2-1. 산술 연산자 - 더하기는 주의해서 사용해야 한다. 1 - "1"; // 0 1 + "1"; // '11' 1 + "1000"; // '11000' 1 - "1000"; // -999 더하기 문자열과 숫자 조합에서 연결이 발생한다. 더하기 제외한 나머지 연산자 ..

html, css를 이용하여 싸이월드 양식 만들기 1. (2)와 마찬가지로 iframe을 이용하여 game.html을 넣어주기. 2. space-between과 padding을 적절하게 이용하면 같은 px로 정렬 가능하다. 3. 자바스크립트에서 태그 가져와서 제어하는 경우에는 id를 사용한다. 4. 내용물이 있는 경우 background-color보다 border를 이용한다. 5. 굳이 이런 경우에는 wrapper-header, wrapper-body로 나누지 않아도 된다. wrapper-header, game-container x 2로 나누어도 된다. 완성된 싸이월드 양식

1. 객체 - 배열은 어떤 데이터인지 알 수 없다. - 이를 해결하기 위하여 객체를 이용할 수 있다. 객체는 키와 값으로 구성되어 있다. 값은 없어도 괜찮지만, 키는 없으면 안 된다. - 빈 객체도 가능하다. - 객체에서 값을 가져올 때, 2가지 방법이 존재한다. 변수명.key // dot notation 변수명["key"] // bracket notation dot notation을 더 많이 사용한다. 2. 배열에 담긴 객체 - 배열 안에 객체를 담아서 많은 데이터를 하나의 변수에 보관할 수 있다. - 배열과 객체를 동시에 잘 활용하면 좋다. let popularFruit = [ { ranking: 0, fruit: "레드향" }, { ranking: 1, fruit: "샤인머스켓" }, { ranki..

1. 배열 - 배열을 이용하여 데이터를 한번에 담을 수 있다. - 빈 배열, 숫자 배열, 문자열 배열 등 가능하다. 인덱스 0부터 시작한다. 길이 1부터 시작한다. - undefined는 할당되지 않은 경우에 등장한다. 예를 들면 변수를 선언만 한 경우에 나온다. 2. 배열 기본 기능 .length 배열의 길이를 알려준다. [인덱스] 인덱스를 이용하여 배열의 값을 가져온다. .push() 배열의 맨 뒤에 값을 추가한다. 추가되는 인덱스를 반환한다. .pop() 배열 맨 마지막 값을 제거한다. 제거되는 값을 반환한다. .sort() 배열을 정렬한다. .includes() 배열 안에 해당 값이 있는지 확인한다. 있는 경우에는 true를 반환하고, 없는 경우에는 false를 반환한다. 뒤에 괄호가 있는 경우에..

1. html, css, javascript의 역할 html 웹 페이지 구조화하기. css 동적 디자인 넣어주기. javascript 브라우저의 모든 기능을 의미한다. 이벤트가 발생하는 경우 조건을 체크하고, 조건이 성립하면 약속된 명령어를 실행한다. 명령문 작성하는 것을 계속 공부할 것이다. 2. 변수와 상수 - 변수와 상수는 값의 변화 유무에 따라서 결정된다. - 변수와 상수 모두 데이터를 담는 공간 (상자)이다. 변수 여러가지로 변할 수 있는 값을 의미한다. 상수 변수와 반대이다. 변할 수 없는 값을 의미한다. - 선언 : 변수의 이름은 소문자로 시작하기. - 할당 : 변수에 데이터를 넣어주기. - 선언과 할당 : 동시에 진행 가능하다. = 은 변수에 데이터를 대입하는 것이다. 가독성을 확보하기 위..

html, css를 이용하여 싸이월드 양식 만들기 1. 싸이월드 만들기 (1)에서 진행했던 것처럼 똑같이 오른쪽도 진행하면 된다. 2. 주의할 점은 부모 박스 만든 곳에 또 다른 내용이 들어가는 경우에 다시 한번 부모 박스로 감싸준다. 그렇게 만들어주는 것이 나중에 태그를 다루기가 쉬워진다. 3. 같은 형식을 보이는 경우에는 class를 지정하여 재활용하기. 오른쪽 박스를 보면 같은 형식을 보이는 것이 있다. (Updated news와 My Video 그리고 TODAT|Y STORY와 INTRODUCE MYSELF는 같은 형식을 보인다. 그러므로 각각 같은 class를 지정하여 css를 적용시켜준다.) 4. iframe을 이용하여 home.html을 넣어준다. iframe은 inline frame을 지정..

html, css를 이용하여 싸이월드 양식 만들기 1. html 작성하기 전에 어떻게 구조화 되어 있는지 파악하기. 하이픈을 이용하여 부모 박스와 연관되어 있는 경우를 표기하기. 2. 바깥에서 안으로, 위에서 아래로 천천히 css 적용하기. padding 먼저 적용해보고, 잘 안되는 경우에 margin 이용해보기. padding을 이용하는 경우에는 부모 박스를 이용하자. 3. html 위치 조정할 때 시각적으로 잘 보이지 않기 때문에 background-color를 설정하여 css 적용이 잘 보이도록 만든다. 4. 절대적인 길이와 상대적인 길이가 있는데 상대적인 길이는 부모 박스에서 영향을 받는다. (예시 : % 기호는 상대적인 길이이다. 부모 박스의 길이에 따라 자식 박스의 길이가 달라진다.) 완성된 ..