transition opacity 1) transition + opacity 사진 두 장을 img로 불러오고 absolute를 사용해 겹친 다음 첫 번째 사진에만 효과를 주었다. 1초 동안 ease-in-out 방식으로 opacity: 0 을 주어 사라지게 했다. 이번엔 사라지지 않고 translateX를 사용해 x축 방향으로 +600px만큼 이동하게 해 보았다. 부모에 overflow:hidden을 넣어 첫 번째 사진이 이동을 하면 자연스럽게 숨겨지도록 했다. 사진을 한 장만 불러오고 scale을 사용해 크기가 130%가 됨과 동시에 15deg만큼 회전하게 했다. 마찬가지로 회전하면서 부모의 크기를 넘는 부분은 hidden을 사용해 숨김처리 하였다.

this return 매개변수 화살표함수 콜백함수 1) this this는 자기 자신을 의미한다. 커피 주문 make 함수의 변숫값을 자기 자신의 value로 지정했으므로 각 value값에 따른 alert창이 뜨게 된다. 2) 매개변수 function make(x, y) { //매개변수 지역변수 {} 스코프 안에서 사용 console.log(`x: ${x}, y: ${y}`); let result1 = 0; //지역변수, {} 스코프 안에서만 사용 let result2 = 0; // if문 처리 // undefined가 아니면 result에 x값을 더해서 출력 if (x != undefined) { result1 = result1 + x console.log(`${result1}`); } // if문 처..

4-20 // self() 함수 var self = function () { console.log('a'); return function () { console.log('b'); } } self = self(); self(); a b 익명함수1 안에 'a' 가 있고 그 안에 'b'를 담고 있는 익명함수2가 있다. 처음 self 함수를 호출했을땐 a가 출력되지만 다시 self 함수 변수에 self() 함수 호출 리턴값으로 내보낸 함수가 저장된다. 4-21 function func(arg1, arg2) { console.log(arg1, arg2); } func(); func(1); func(1,2); func(1,2,3); 1 undefined 1 2 1 2 자바스크립트의 자유로운 문법성을 볼 수 있다. ..

transform transitions 1) transform 위치를 이동시키거나 크기를 늘이거나 줄이고, 회전, 기울기를 줄 때 사용한다. 1번 박스의 transform: translate는 자기 자신의 위치를 기준으로 이동하며 translate(x, y) 혹은 translateX(x) translateY(y) 로 각각 x축, y축을 적용시킬 수 있다. 2번 박스는 translateX가 적용된 모습. 3번 박스의 scale은 너비와 높이를 늘이거나 줄일 때 사용하는데 scale(너비, 높이) 혹은 scaleX(너비) scaleY(높이)로 적용할 수 있다. 4번 박스의 rotate는 회전을 시킬 수 있는데 360도 기준으로 deg값을 양수 혹은 음수가 사용 가능하다. 5번 박스 처럼 rotateX, ro..

탬플릿 리터널 함수 onclick 1) 탬플릿 리터널 할당된 값을 불러올 때 사용한다. 아래 방식이 탬플릿 리터널인데 기존 방식보다 여러 줄을 작성할 때 자유롭고 편리하다. 작성할 땐 작은 따옴표( ' )가 아닌 백틱 ( ` )을 사용하며 변수나 수식, 값을 불러올 땐 ${} 형식으로 불러오면 된다. 2) 함수 자주 사용하는 명령(실행문, 내용, 문장, 수식, 제어문등)을 함수로 담아두었다가 필요할 때 꺼내 사용한다. 코드를 줄일수 있고 재사용할 수 있다는 장점이 있다. ====================== 형식-1 ====================== function 함수명() { //함수명규칙=변수규칙동일 실행문 } - 정의문 함수명() : 호출 ====================== 형식-..

자바스크립트에서 가장 중요한 개념은 함수. 함수를 생성하는 방법은 3가지 함수 선언문 함수 표현식 Function() 생성자 함수 4-1 // add() 함수 선언문 function add(x, y) { return x + y; } console.log(add(3, 4)); 7 함수 선언문 방식으로 함수 생성 *함수 선언문 방식은 반드시 함수명이 정의되어 있어야 한다 4-2 // add()함수 표현식 var add = function(x, y) { return x + y; }; var plus = add; console.log(add(3,4)); console.log(plus(3,4)); 7 7 함수 표현식 방식으로 함수 생성 add는 함수를 참조하는 변수, 함수 이름이 아니다. 함수 이름이 선택사항이며..

for 이중 for문 select while do~while break continue 1) for for 반복문은 초기값, 조건식, 증감식, 실행문으로 이루어져 있다. for( let 초기값 ; 조건식 ; 증감식 ) { 실행문 } 초기값 변수는 i, j, k 순서대로 지정을 해야 하고 조건식은 true/false가 결과로 나온다. i가 0부터 시작하여 document를 출력 하고, i++이므로 1이 되어 for문으로 다시 들어간다. 1

3-13 // 배열 리터럴을 통한 배열 생성 var colorArr = ['orange', 'yellow', 'blue', 'green', 'red']; console.log(colorArr[0]); console.log(colorArr[1]); console.log(colorArr[3]); console.log(colorArr[4]); orange yellow green red 객체 리터럴 { ] 배열 리터럴 [ ] * 0부터 시작 3-14 // 빈 배열 var empty = []; console.log(empty[0]); //undefined // 배열 요소 동적 생성 empty[0] = 100; empty[3] = 'eight'; empty[7] = 'true'; console.log(empty);..

폰트아이콘 position 1) 폰트아이콘 아이콘을 html에 불러오는 방법들 중 XEIcon의 아이콘을 불러와 보았다. ​ 위 내용을 head문 안에 붙여 넣는다. https://xpressengine.github.io/XEIcon/library-2.3.3.html XEIcon, 문자를 그리다 XEICon은 웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷입니다. 여러분의 아름답고 직관적인 웹페이지 제작을 돕습니다. xpressengine.github.io XEIcon 페이지 에서 원하는 아이콘을 고른 후 이름을 복사한다. 복사한 이름을 class 명에 넣으면 그대로 아이콘이 나오게 된다. ul li { margin-left: 40px; } ul li i { font-size: 40px; color: ..