본문 바로가기

학원

 (182)
[JavaScript] 함수(Function) / 선언함수와 익명함수 / 화살표함수 함수(Function) 함수는 매개변수로 값을 전달받아 가공처리하여 결과값을 반환하는 기능을 제공한다. 자바스크립트에서는 함수를 선언해야지만 함수를 호출하여 함수에 작성된 명령을 실행해 결과값을 반환받아 사용할 수 있다. 자바스크립트에서는 함수 선언방법에 따라 선언함수와 익명함수로 구분할 수 있다. 선언함수는 함수명을 명시하여 선언하는 함수이고, 익명함수는 함수명을 명시하지 않고 선언하는 함수이다. 선언함수 함수명을 명시하여 함수를 선언한다. 여기서 함수명은 함수를 구분하기 위한 식별자를 뜻한다. 형식) function 함수명(매개변수, 매개변수, ...) { 명령; 명령; ... } → 함수명은 내부적으로 변수로 처리되어 선언함수를 값으로 저장한다. (함수명에 함수가 저장된다.) function dis..
[JavaScript] 제어문 자바스크립트 제어문 제어문 : 프로그램의 흐름을 변경하기 위해 사용하는 명령 선택문 - if, switch 반복문 - for, while 기타 - break,continue 예제1) 사용자로부터 숫자값을 입력받아 숫자값에 대한 제곱근을 계산하여 출력 → 숫자형이 아닌 값을 입력한 경우 에러메세지 출력 var num=prompt("숫자값을 입력해 주세요."); alert(num*num); //num은 string 이지만 * 연산을 하면 숫자값으로 자동 형변환된다. if(isNaN(num)) { alert("입력값이 숫자가 아닙니다."); } else { alert(num*num); } prompt(message[, value]) : 입력창을 제공하여 사용자로부터 값을 입력받아 문자값으로 반환하는 함수 is..
[JavaScript] 연산자 / 형변환(자동 형변환, 강제 형변환) 자바스크립트 연산자 연산자 우선 순위에 의한 분류 최우선 연산자 : (), [], {}, . 단항 연산자 : +, -, ++, --, !, new, typeof new : 객체 생성하기 위한 연산자 typeof : 변수의 자료형을 알아내기 위해 사용하는 연산자 산술 연산자 : *, /, %, +, - 관계 연산자 : >, >=,
[JavaScript] JavaScript 명령 소스 제공 / onclick 이벤트 / 함수 호출 모든 웹문서에 공통적으로 제공해야하는 JavaScript 명령을 소스로 제공해 줄 수 있다. 01_hello.js alert("JavaScript Source File에 작성된 자바스크립트 명령"); script 태그를 이용해 JavaScript Source File을 불러와 HTML 문서에 포함시킬 수 있다. →사이트를 구성하는 모든 웹문서에 동일한 기능(함수)을 제공하기 위해 사용한다. button 태그의 type 속성값을 [button]으로 설정하면 버튼만 출력되어, 이벤트가 발생되지 않는다. 버튼을 눌러보세요. html 태그의 onXXX 속성은 이벤트 리스너 속성으로, 이벤트 처리 명령을 설정값으로 설정할 수 있다. 이때, 이벤트 처리 명령을 JavaScript를 통해 만든다. 버튼을 눌러보세요...
[JavaScript] 자바스크립트란? / window.alert() / console.log() 자바스크립트(JavaScript) 자바스크립트는 웹페이지에서 발생된 이벤트를 처리하기 위한 기능을 제공하는 스크립트 프로그래밍 언어이다. 여기서 스크립트 프로그래밍 언어란 컴파일을 하지 않아도 동적으로 실행될 수 있는 프로그램 언어를 뜻한다. 자바스크립트는 클라이언트에서 해석되어 실행되며, 자바스크립트를 이용해 동적인 페이지를 만들 수 있다. 자바스크립트 표준 규약은 ES15(ECMAScript15)까지 구현되었으나 일반적으로 ES6(ECMAScript6)을 이용하여 작성한다. 태그로 종료된 곳까지를 스크립트 영역이라고 한다. 자바스크립트의 주석문은 자바와 동일하다. //주석처리 /* 주석처리 */ 자바스크립트는 한 줄에 작성된 코드를 하나의 명령으로 인식하여 처리된다. 따라서 명령 마지막에 ; 생략이 ..
[CSS] 애니메이션 관련 스타일 속성 / 반응형 웹디자인 애니메이션 관련 스타일 속성 animation은 animation-* 속성과 애니메이션의 중간상태를 정의할 수 있는 @keyframes로 구성되어 있다. @keyframes : 애니메이션의 이름과 상태에 따른 스타일 변화를 정의하기 위한 시스템 속성 → 상태(백분율 또는 키워드 - from, to)에 따른 CSS 스타일을 정의하여 애니메이션 효과를 제공할 수 있다. → 반드시 시작상태(from)와 종료상태(to)를 포함하여 2개 이상의 상태를 작성해주어야 한다. /* 시작상태 */ from { top: 0; left: 10px; background: url("images/f1.png") no-repeat center; } /* 종료상태 */ to { top: 0; left: 600px; backgroun..
[CSS] 트렌지션 효과(Transition Effect) 트렌지션 효과(Transition Effect) : 시간 경과에 따른 박스모델의 스타일 변경 기능 제공 transition-property : 트렌지션 효과를 제공할 스타일을 속성값으로 설정 transition-duration : 트렌지션 효과의 제공 시간(효과가 나타나는데 걸리는 시간)을 속성값으로 설정 transition-timing-function : 트렌지션 효과의 제공 속도를 속성값으로 설정 → 속성값 ease(기본값) : 느리게 시작하여 점점 빨라졌다 느려지면서 종료 linear : 시작부터 종료까지 일정하게 ease-in : 느리게 시작한 후 일정한 속도에 다다르면 그 상태로 서서히 ease-out : 빠르게 시작해서 점점 느려짐 ease-in-out : 느리게 시작하여 빨라지다가 느려지면서..
[CSS] 테이블 관련 스타일 속성 / 박스모델 변형 관련 스타일 속성 테이블 관련 스타일 속성 테이블에 있는 외곽선이 중첩될 경우, 병합시키기 위해서 border-collapse 속성을 사용한다. html 테이블 관련 스타일 속성 번호이름주소 1000홍길동서울시 강남구 역삼동 79-11 역삼타워 2000임꺽정부산시 사하구 3000전우치광주시 광산구 4000일지매수원시 팔달구 5000장길산인천시 월미구 css 이처럼 테이블에 있는 외곽선이 중첩될 경우, 외곽선을 병합시키기 위해 border-collapse 속성을 사용한다. border-collapse : 박스모델의 외곽선 중첩 관련 스타일 속성 → 속성값 : seperate(중첩된 외곽선 구분 - 기본값), collapse(중첩된 외곽선 병합) 셀(Cell)의 폭은 태그내용에 의해 자동으로 설정되는데, 이처럼 태그내용에 따..

티스토리툴바