728x90

분류 전체보기 96

JavaScript function | 명시적 함수 / 익명 함수 / 리터럴 함수

함수의 종류 1. 명시적 함수 -함수 정의 후 사용 ex) function func01(){ alert("명시적 함수"); } 2. 익명 함수 - 변수에 함수 넣어준 뒤 사용 - 이 때 사용하는 함수는 함수 실행이 아니라 변수를 실행하는 것임 ex) var func02 = function(){ alert("익명 함수"); } 3. 리터럴 함수 -리터럴?값 자체 -함수 자체를 리터럴(매개변수, 리턴 등등)로 사용 --함수를 값처럼 사용하자~ ex) /*prn의 매개변수로 함수를 넣음*/ function func03(){ prn(function(msg){ alert(msg); }); } function prn(literal){ alert(literal); literal("안녕하세요. 리터럴입니다."); } ..

UI/JS(Java Script) 2021.05.10

JavaScript window function | 대화형 함수

JavaScript에는 다양한 내장 객체 존재하는데, 그 중 window객체는 브라우저 관련된 내용을 다룰 수 있다. window객체중 대화형 함수 1. alert(): 단순 경고 or 디버깅용으로 자주 사용 window.alert()에서 window를 생략해 사용하는 경우가 많다. 2. confirm(): 확인/취소 버튼 제공(true/false 반환) 3. prompt(): 텍스트박스, 확인/취소 버튼 제공 브라우저로부터 입력받은 값이 넘어옴(반환값은 텍스트/취소하면 null) console.log(변수): 콘솔창에 로그 찍어주기 (라잌 자바에서 println) window객체(웹브라우저창) 아래에 document객체 존재

UI/JS(Java Script) 2021.05.03

JavaScript 변수 선언 규칙 | 선언과 저장 | 변수 범위 | 변수 자료형

선언 규칙 - 대소문자 구분 - 영문,$,_로 시작 - 영문,$,_,숫자 포함 가능 - 키워드, 예약어 사용 불가 변수의 선언과 저장 1. var 키워드를 사용하여 변수 선언 2. 변수의 타입은 저장되는 데이터의 타입에 따라 결정된다. 3. 객체 단위로 저장 가능 4. 함수 단위로 저장 가능 ( 이 때, 함수명을 별도로 지정해주는 것은 아니다.) (리턴값으로 사용 가능하다.) ex) 함수 단위로 저장한 변수 실행법 //변수 저장 변수명 = function(){ 내용내용 }; //변수 실행 변수명(); 변수 범위 전역변수 vs 지역변수 1. 전역변수 window 객체에 포함되는 변수로 다른 함수들에서 공용으로 사용할 수 있다. (값 유지) ->window를 브라우저 내라고 일단은 생각해두자 ->window..

UI/JS(Java Script) 2021.05.03

CSS keyframes 애니메이션

CSS keyframes를 이용해 애니메이션 효과 만들기 keyframes는 애니메이션 효과를 주기 위해 필요하다 키프레임을 하나의 사진이라고 생각하고 프레임이 많아질수록 플립북처럼 애니메이션이 부드럽게 진행될 것이다. 실습으로 확인하면 이해가 훨씬 쉽다 1. 기본 준비 div{ width: 100px; height: 100px; font-size: 30px; background-color: red; word-wrap: break-word; } Animation 효과 Animation 2. 키프레임 만들기 문법 @keyframes 이름 { } mybox라는 키프레임을 생성했다 div{ width: 100px; height: 100px; font-size: 30px; background-color: red..

UI/CSS 2021.05.01

CSS transform 정리

CSS transform과 관련된 속성 살펴보기 transform: translate(x,y) x(가로), y(세로) 지정한만큼 위치 이동 transform: rotate(deg) 입력값 만큼 회전한다 ex) transform: rotate(20deg) -> 20도 회전 transform: scale(x,y) 가로(x)와 세로(y)가 입력값만큼의 비율로 크기가 변함 ex) transform: sclae(1.5, 0.6) ->가로1.5배 세로0.6배 transform: skew(x deg, y deg) 입력값만큼 x축과 y축을 기울인다 CSS transition transition: 속성(폰트사이즈, width, height, color...등등) 변형을 위해 사용한다 ex) #tran{ transitio..

UI/CSS 2021.05.01
728x90