본문 바로가기

언어46

응용) HTML 과 CSS (애니메이션 속성) CSS에서 애니메이션 효과를 줄 수 있다. css에서 작성. 1.애니메이션 속성을 하나 만들어준다. @keyframes 애니메이션이름 { from(=0%) { margin-left: 0; 마지막은from에서 멈춘다. } 50% { } to =100%) { margin-left: 400px; } 2. 적용시킬 엘리먼트에 애니메이션을 불러온다. animation-name: box_ani; => 애니메이션 이름 부여 (keyframes에 적용시킨 이름) 3. 애니메이션 속성을 각각 부여한다. (축약형 사용가능) animation: moving 1s 3s forwards alternate 3; /* =>에니메이션 축약형 =>순서 상관없이 띄어쓰기로 구분된다, => 단, duration은 앞에 delay값은 뒤에.. 2023. 11. 15.
(입문) 자바스크립트 (개요) html 과 css 를 선행하고 공부 해야한다. (자바스크립트 == ECMA 같다) 자바스크립트를 먼저 간략히 알아보자. 어떤 언어인가 ?? 웹 프로그래밍이란 - 프로그래밍 : 사람이 원하는대로 컴퓨터가 작동할 수 있도록 컴퓨터 언어로 명령어를 나열하는 행위 - 웹 프로그래밍 : '웹 브라우저'와 관련된 프로그램을 작성하는 것 - 백엔드 프로그래밍 : 서버에서 데이터 관리를 프로그래밍 -프론트엔드 프로그래밍 : 서버에서 받아온 정보를 웹 브라우저에 어떻게 표시할 것인지 프로그래밍 자바스크립트의 역할 : 서버를 구성하고 서버용 프로그램을 만들 수 있다. ( ex: Node.js ) 자바스크립트의 특징 - 모든 웹 브라우저에서 작동한다, - 풀스텍 웹 개발 뿐 아니라 다양한 용도의 프로그래밍 가능 - 다양한.. 2023. 7. 5.
(입문) 자바스크립트 ( 변수, 함수 기초) 1. setTimeout 2. setInterval : 몇 초뒤에 실행하고 또 실행하고 반복 3. 특수문자 4. 역슬래시 : 문자열 세계의 초능력자 (이스케이프 문자) 5. 연산자의 우선순위 에 대해 알아보자. 먼저 연습페이지에서 JS 의 설정을 jQuery로 바꿔준다. Settings 에서 -> JS -> 아래에 Add Extemal Scripts/Pens 에서 -> jQuery 로 검색후 추가하기 ->SaveClose ㅡ setTimeout ( ~ 초 후에 실행된다) 천천히 ~ 2초 후에 실행 된다. console.clear(); function a() { alert('하이'); $('body') .css('background-color', 'red') } setTimeout(a, 2000); ㅡ s.. 2023. 7. 5.
입문) 자바스크립트 ( 데이터 형태와 함수 ) 1.자바스크립트의 데이터 형태는 문자, 숫자 , true, false 로 구분 된다. ㅡ typeof 함수를 통해서 데이터 형태를 알아보자 2. 숫자+문자 = 문자 3. 문자열의 데이터를 자르는 함수 substr(); 5. 정수화, 실수화 에 대해 알아보자. ㅡ typeof 함수 console.clear(); //숫자 var a = 1; var b = 2; //문자 var c = 'a'; //논리형 var d = true; var e = false; console.log(a,b,c,d,e); console.log(typeof(c), typeof(b),typeof(c), typeof(d), typeof(e)); >>결과값 으로 나온다. 1 2 "a" true false "string" "number" "s.. 2023. 7. 5.