자바스크립트의 대화상자 Web API: 브라우저에서 제공하는 API(Application Programming Interface) -프로그램들과 기능들의 상호 통신 방법을 규정하고 도와주는 매게체 ●alert() : 사용자에게 메세지를 보여주고 확인을 기다림 ●confirm() : 사용자에게 메세지를 보여주고 확인이나 취소를 누르면 그결과를 불린 값을 반환 ●prompt() : 사용자에게 메세지를 보여주고 사용자가 입력한 문자열을 반환 confirm,prompt -> 결과값을 반환 한다 -> 변수에 받아야한다! HTML 코드 예시 DOCTYPE html> 대화상자 대화상자 //alert('안녕하세요 자바스크립트!') //const result = confirm('확인 또는 취소를 눌러주세요') //con..
✔자바스크립트의 변수는 타입이 고정되어 있지 않으며 같은 변수에 다른 타입의 값을 대입할수 있음 let user ={userid:'apple',name:'김사과' ,age:20} user ='김사과' 자동 타입 변환 - 특정 타입의 값을 기대하는 곳에 다른 다른 타입의 값이 오면 자동으로 타입을 변환해서 사용 const num4 =10 const str3 ="10"; console.log(num4+str3); 결과값: 1010 console.log(num4-str3); 결과값: 0 -> 자동 형변환 console.log(num4*str3); 결과값: 100 -> 자동 형변환 console.log(num4/str3); 결과값: 1 -> 자동 형변환 NaN(Not a Number) - '정의되지 않은 값이나..
데이터 타입(Data Type) - 프로그램에서 다룰 수 있는 값의 종류 - 자바스크립트는 선언시 타입을 정하지 않기 때문에 많은 문제가 발생할 수 있음 - 자바스크립트의 타입 유연성을 해결하기 위해 타임스크립트가 탄생 1.숫자형(number) - 정수와 실수를 따로 구분하지 않음 - 모든 수를 실수 하나로만 표현 2.문자형(string) -'',""또는 ``로 둘러싸인 문자의 집합 num = 10 "입력한 숫자는" +num+"입니다."; `입력한 숫자는 ${num}입니다.`; 3.논리형 (boolean) - 참(True) 과 거짓(false)으로 표현되는 값 - false, 0, '', "", null, undefined는 모두 거짓(false)로 판정함 -false 가 아닌 모든 값은 참(True)로..
상수(constant) - 한번 선언된 상수는 다시 재정의 할 수 없음 - 값을 재할당 할 수 없음 const 상수명 = 값; 예) const num =10; const 상수명; 상수명 = 값; (X) 안됨 ✔자바스크립트에서 상수를 권장하는 이유 - 해킹을 방지하기 위해 - 개발자 실수를 방지하기 위해 HTML 예제 코드 DOCTYPE html> 상수 상수 //const str; //str = '김사과' 오류 const str = '김사과'; console.log(str); const obj = {id:'apple',name:'김사과',gender:'여자' } //객체선언 -> const로 하였기 때문에 수정 불가 console.log(obj); console.log(obj.id); console.log..
변수 - 데이터를 저장할 수 있는 메모리 공간 - 값이 변경될 수 있음 - 자바스크립트의 변수는 타입이 없음 - let 키워드를 사용하여 변수를 선언 선언 방식 1.var - 지역변수, 전역변수와의 구별이 없음 - 같은 이름의 변수를 선언할 수 있음 - 성능상 쓸 필요가 없지만 알아두자 console.log(num); var num = 10; { console.log(num); // 전역변수 num = 10 var num = 20; // 지역변수 num = 20 } console.log(num); // 전역변수 num = 20 으로 된다. 2.let - 지역변수, 전역변수의 구별이 확실 - 같은 이름의 변수를 선언할 수 없음 let 변수명 = 값; 또는 let 변수명; 변수명 = 값; HTML 코드 DO..
자바스크립트의 실행 순서 인터프리터 방식이므로 위에서 아래로 실행 * JavaScript 파일 및 문장을 사이에 넣엇을 경우 html 문서의 시작 -> 에 있는 를 다운로드/실행 ->body에 있는 HTML 태그를 실행 -> 끝 -외부 script 파일을 사용할 경우 script 파일 다운로드가 늦을 때 HTML 실행되지 않은 상태에서 빈 화면이 보일 수 있음 *JavaScript 파일 및 문장을 끝에 넣을 경우 html 문서의 시작 -> 에 있는 HTML 태그를 실행 -> 를 다운로드/실행 ->끝 -완벽하지 않은 HMTL이 먼저 보여 잘못된 UI가 보일 수 있음 *를 사용할 경우 html 문서의 시작 -> script 파일을 동시에 다운로드/실행 -> 에 있는 HRTL 태그를 실행 -> 끝 -scrip..
CSS 우선순위 계산 CSS를 적용할때 적용범위가 겹치는 경우가 많은데 그런 상황에서 어떠한 부분이 우선되어 적용 되는지 알아보자 1. 동일한 속성을 적용할 경우 나중에 적용한 것이 우선 2. 외부 스타일시트와 내부 스타일시트의 적용은 순서에 따라 나중에 적용한 것이 우선 3.내부 ,외부, 인라인 스타일 시트중 인라인을 우선시 적용 4. 계산식 -inline : 1000점 -id 속성: 100점 -class,속성 선택자 : 10점 -element : 1점 5.!important 를 적용하면 0순위 HTML 예제 코드 DOCTYPE html> Css 우선순위 #id-style{background-color: deeppink;} #id-style2{background-color: deepskyblue;} d..
css animation 요소의 현재 스타일을 다른 스타일로 변환 keyframe 애니메이션의 진행 정도를 나타내는것 from 과 to로 시작과 끝을 정한다. 시작: 0% ,from 과정: 1%,2%,3%,10%... 끝 : 100% , to 1.animation name: 애니메이션의 이름을 설정 2.animation-full-mode : 애니메이션이 끝난 후 어떻게 처리할지 설정 ●forwards: 애니메이션 키프레임이 완료 되었을 때 마지막 프레임을 유지 3.animation-direction : 애니메이션의 진행 방향을 정하는 속성 ●reverse: 반대 순서로 진행 ●alternate: 정해진 순서로 진행되었다가 다시 반대 순서로 진행 ●reverse-alternate: 반대 순서로 진행했다가 ..
transition - 요소에 추가할 css 스타일 전환효과를 설정 - 추가할 전환효과나 지속시간도 설정 property 요소에 추가할 전환효과를 설정 timing -function 전환 효과의 값을 설정 속성값들 ●linear: 처음부터 끝까지 일정한 속도 ●ease : 전환효과가 천천히 -> 빨라지고 ->천천히 ->끝 ●duration : 전환효과를 나타내는 시간을 설정 ●delay : 설정한 시간만큼 대기하다 전환효과를 나타냄 HTML 예제 코드 1. DOCTYPE html> transition div{ width: 100px; height: 100px; float: left; margin: 30px; } #bg-tr{ background-color: gold; transition: backgrou..
transform - 2차원 좌표에서 요소를 변형시키는 속성 translate: 이동 rotate : 회전 scale : 확대, 축소 skew : 경사, 비틀기 HTML 예제 코드 transform original translate rotate scale skew gradient 결과 ✔참조 벤더 프리픽스(vender prefix) - 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 블라우저에 그 사실을 알리기 위해 사용하는 접두사 -W3C CSS 권고안에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 붙임 -webkit- : 크롬,엣지를 위한 접두사 -o- : 오페라를 위한 접두사 -ms- : 익스플로러를 위한 접두사 -moz-..
