본문 바로가기

전체 글1642

JavaScript 연산자 연산자(operator) 자바스크립트는 여러 종류의 연산을 위한 다양한 연산자(operator)를 제공하고 있습니다. 산술 연산자(arithmetic operator) 산술 연산자는 사칙연산을 다루는 가장 기본적이면서도 많이 사용하는 연산자입니다. 산술 연산자는 모두 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽입니다. 항이란 해당 연산의 실행이 가능하기 위해 필요한 값이나 변수를 의미합니다. 따라서 이항 연산자란 해당 연산의 실행을 위해서 두 개의 값이나 변수가 필요한 연산자를 의미합니다. 예) var x = 10, y = 4; document.write(x + y + " "); // 14 document.write(x - y + " "); // 6 documen.. 2020. 7. 1.
JavaScript 타입 기본 타입 타입(data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미합니다. 자바스크립트에서는 여러 가지 형태의 타입을 미리 정의하여 제공하고 있으며, 이것을 기본 타입이라고 합니다. 자바스크립트의 기본 타입은 크게 원시 타입과 객체 타입으로 구분할 수 있습니다. 원시 타입(primitive type)은 다음과 같습니다. 1. 숫자(number) 2. 문자열(string) 3. 불리언(boolean) 4. 심볼(symbol) : ECMAScript 6부터 제공됨 5. undefined 객체 타입(object type)은 다음과 같습니다. 6. 객체(object) 예) var num = 10; // 숫자 var myName = "홍길동"; // 문자열 var str; // undefined .. 2020. 7. 1.
JavaScript 기초 자바스크립트(JavaScript)란? 자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어입니다. HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있습니다. 자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다. 현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있습니다. 자바스크립트의 역사 자바스크립트는 1995년에 넷스케이프(Netscape)의 브렌던 아이크(Brendan Eich)에 의해 만들어졌습니다. 처음에는 모카(Mocha)라는 이름으로 개발되었으나, 그 후에 라이브스크립트(LiveScript.. 2020. 7. 1.
CSS3 확장 CSS3 버튼 CSS3 버튼(button) CSS를 이용하면 다양한 모양의 버튼을 여러 방식으로 만들 수 있습니다. CSS에서 버튼은 태그 뿐만 아니라 태그와 태그로도 만들 수 있습니다. 예) button 태그 a 태그 button 타입의 input 요소에서 내부에 표시될 문자열은 value 속성값으로 설정할 수 있습니다. 다음 예제는 마우스를 올리면 배경색이 변하는 버튼 예제입니다. 예) 위의 예제처럼 transition-duration 속성을 이용하면, 배경색 뿐만 아니라 글자의 색상까지 변경되게 할 수 있습니다. 다음 예제는 그림자 효과를 설정한 버튼 예제입니다. 예) 위의 예제처럼 box-shadow 속성을 이용하면, 버튼에 실제와 같은 그림자 효과를 간단히 설정할 수 있습니다. 다음 예제는 버튼.. 2020. 7. 1.
CSS3 변형 2D Transform 변형(Transform) CSS3에서는 transform 속성을 사용하여 HTML 요소의 모양, 크기, 위치 등을 자유롭게 바꿀 수 있습니다. transform 속성은 HTML 요소에 대해 다음과 같은 동작을 제공합니다. - 해당 요소를 움직입니다. - 해당 요소를 회전시킵니다. - 해당 요소의 크기를 변경합니다. - 해당 요소를 기울입니다. - 해당 요소에 위의 네 가지 동작 중 원하는 동작들을 한 번에 적용시킵니다. CSS3에서는 transform 속성을 사용하여 2D 변형(transform)과 3D 변형(transform)을 모두 제공합니다. CSS 좌표 체계 transform 속성에서 사용하는 x, y, z좌표는 다음 그림과 같은 좌표 체계를 따릅니다. CSS 좌표 체계에서.. 2020. 7. 1.
CSS3 모듈 CSS3 개요 CSS3는 이전 버전 CSS와 완전히 호환되는 CSS의 최신 표준 권고안입니다. CSS3 변경사항 CSS3에서 새롭게 추가되거나 변경된 대표적인 기능은 다음과 같습니다. - 선택자(Selectors) Level 3 - 미디어 쿼리(Media Queries) Level 3 - 색(Color) Level 3 - 네임스페이스(Namespaces) CSS3 모듈(module) CSS3는 새롭게 정의된 기능과 함께 이전 버전의 CSS 기능까지도 함께 포함하고 있는 모듈(module)이라는 것으로 구성됩니다. CSS3를 구성하고 있는 주요 모듈은 다음과 같습니다. - 선택자(Selectors) - 박스 모델(Box Model) - 배경(Backgrounds) - 이미지(Image Values and .. 2020. 7. 1.

티스토리툴바