★ 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..
★ 문제 1 : 글 상자에 마우스를 올리면 내용을 아래로 스크롤하시오. HTML 코드 transition Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi veniam, expedita illum hic nulla quas repellendus, fuga in, perferendis possimus cupiditate ducimus optio nihil vel ratione quod atque porro error? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi veniam, expedita illum hic nulla qu..
★ 전환, Transition 객체의 속성(상태)값이 변화되는 과정을 시간 순서대로 보여주는 속성 수치형 속성에만 적용 가능(숫자, 색상) 사용방법 transition-property : width; transition-duration: 1s; 한줄로 타이핑 가능 transition : .5s all; ■ HTML 코드 상자 ■ CSS 코드 ■ 실행 결과 ■ 다양한 ex1) #box { border : 10px solid black; width : 200px; height: 200px; background-color: gold; margin : 100px; transition-property : all; transition-duration: 10s; } #box:hover { width : 400px; ..
