★ 변수 영역 1. 전역 변수 > HTML 페이지 전역 > 선언문 실행(생성) ~ 페이지 종료(소멸) var num1 = 100; //전역 변수. 태그 내에서 직접 선언. 2. 지역 변수 > 블럭 영역 변수(X), 함수 영역 변수(O), 함수만 지역으로 인식하고, 제어문을 인식하지 못한다. function m1() { var num2 = 200; //지역 변수 console.log('m1', num2); //지역내 지역변수 접근 O console.log('m1',num1); //지역내 + 지역변수 접근 O if(true) { var num3 = 300; //지역변수. if console.log('if', num3); } console.log('m1',num3); //이건 가능 } m1(); // cons..
★ JavaScript Function 구조 function m1(num) { return 10; } ex) 자바스크립트는 초기화가 되지 않는 변수의 상태를 null이라고 하지 않고, undefined라고 한다. console.log(arguments); //예약어 > 내장 배열 : 모든 매개변수를 자동으로 담는 배열 function m1() { console.log('m1'); } m1(); function m2(name) { console.log('name', name); console.log(arguments); //예약어 > 내장 배열 console.log(arguments[0]); console.log(arguments[1]); } m2('홍길동'); m2('아무개'); m2(); m2('홍길동..
★ JavaScript 자료형 1. number 숫자형(정수, 실수) 2. String 문자, 문자열 3. boolean 논리형 4. object 객체형 JavaScript에는 클래스가 없다. 하지만 객체는 있다. JavaScript에서 미리 정의 된 타입 객체는 있다. 개발자가 클래스는 선언할 수 없다. 자바 > 객체 지향 프로그래밍 언어 자바스크립트 > 객체 기반 프로그래밍 언어 5. 기타(=상수) a. null b. undefined c. NaN(Not a Number) 변수, 상수(리터럴) JavaScript는 변수의 타입이 없다. var 변수명; 변수는 모든 자료형의 데이터를 저장할 수 있다. (=자바의 Object 변수) var num = 10; var num2 = 3.14; var name ..
★ Front-end, Client-side Programing 1. HTML 골격 > 블럭 태그 내용물 > 인라인 태그 + 텍스트 2. CSS 서식 3. JavaScript 프로그래밍 기능 ★ JavaScript 브라우저에서 동작하는 프로그래밍 언어 Netscape > Navigator 초기 : 가볍다 + 쉽다 = 기능 적음 > 현재(2014년 이후) : 어려워짐.. C 계열 언어 > 기본 구문이 자바와 유사 Java JavaScript LiveScript > JavaScript 초반 > 폼태그 유효성 검사 + 링크 조작 + 이미지 조작 등.. 중반(~2013) > 모든 태그 조작 > DOM 후반(2014~) > ECMA2015(ES6) > Node.js 출시 (구글 크롬 V8 엔진) > 비 브라우저 ..
★ CSS3 레이아웃 flex(선형 레이아웃), grid(평면 레이아웃) ★ Grid Grid 함수 Grid Container - Grid 전체 영역 Grid Item - 내부 요소 - Grid Cell - Grid의 한칸 Grid Line - Grid Cell을 구분하는 각각의 선 Grid Number - Grid Line 번호 Grid Gap - Grid Cell 사이의 간격 사용 방법 .container { display : grid; } .container { /* 행과 열의 개수 + 크기 > 2행 3열*/ grid-template-rows: 100px 100px; grid-template-columns: 100px 100px 100px; } 행과 열 옵션을 주어 배열을 만들어냄 실행 결과 퍼센트..
★ 반응형 웹, Responsive Web 반응형 레이아웃 웹 소비 장치 > 다양화 이전 : PC(다양한 해상도) 이후 : PC, 태블릿, 스마트폰 등.. (훨씬 다양한 해상도) 웹 페이지의 크기?? 1. 페이지 각각 생성 PC > PC 해상도에 맞는 페이지 제작 MObile > Mobile 해상도에 맞는 페이지 제작 2. 페이지 1회 생성 > 반응형 레이아웃 > CSS 미디어 쿼리 PC > PC 해상도에 맞게 출력 Mobile > Mobile 해상도에 맞게 출력 사용 방법 @media (조건) { CSS 영역 } @media screen and (해상도 조건) { 해상도 조건에 맞는 기기를 위한 CSS 정의 } ■ 사용 ex) HTML 코드 상자 기본 CSS 코드 #box { border : 1px s..
★ CSS 변수 변수 선언 --변수명 : 값 변수 값 1. 열거형(색상) 2. 열거형(그외, left, center, solid, dashed..) 3. 수치(10px) 변수 사용(호출) var(--변수명) ■ HTML 코드 상자1 상자2 상자3 ■ CSS 코드 : 지역변수로 설정을 했기때문에 적용이 자신의 지역에만 가능함. #box1 { --fore-color : blue; color : var(--fore-color); } #box2 { /* 선언되지 않은 변수 > 초기값(기본값) 적용됨 */ color : var(--fore-color); } ■ CSS 코드 : 해결법 -> 부모지역에 변수를 설정하면 적용이 가능하다. #list { --main-color : gold; } #box1 { color ..
★ 객체의 움직임 1. transition 2. animation > transition + 버전업 ★ Animation animation-name : [애니메이션 이름] animation-duration: [시간초] animation-fill-mode: [시간이 다찼을 때 어떻게 할지] animation-timing-function: linear; animation-delay : [딜레이 시간] animation-iteration-count: [반복 횟수][infinite를 주면 무한 반복] animation-direction: [reverse : 역으로 진행 | alternate : 원래방향->역방향 재생 반복 | alternate-reverse : 역방향으로 시작 해서 alternate] 사용 an..
