Visual Studio Code에서는 파이참과 같은 IDE와 달리 단순하게 빌드와 실행을 하기 어렵습니다 따라서 Code runner (코드 러너) 라는 확장 프로그램을 통해 편하게 실행할 수 있습니다! Code Runner가 지원하는 언어는 다음과 같습니다 C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScri..

타입 변환 (type conversion) - 자바스크립트는 타입 검사가 매우 유연한 언어다 - 자바스크립트의 변수는 타입이 정해져 있지 않고, 같은 변수에 다른 타입의 값을 다시 대입할 수 있다 > 묵시적 타입 변환 (implicit type conversion) - 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환하여 사용한다 10 + "문자열"; // 문자열 연결을 위해 숫자 10이 문자열로 변환됨. "3" * "5"; // 곱셈 연산을 위해 두 문자열이 모두 숫자로 변환됨. 1 - "문자열"; // NaN - 세 번째 예제에서 문자열은 의미에 맞게 숫자로 자동 타입 변환이 불가능하므로, NaN 값을 반환한다 ▶ NaN (Not a Number) 정의되지 않은 값이나 표..

기본 타입 > 타입 (data type) : 프로그램에서 다룰 수 있는 값의 종류 - 자바스크립트에서 미리 정의하여 제공하는 타입들을 기본 타입이라고 한다 - 기본 타입은 원시 타입(숫자, 문자열, 불리언, 심볼, undefined)과 객체 타입으로 나눌 수 있다 > 숫자 타입 (number type) - 자바스크립트는 다른 언어와 달리 정수와 실수를 구분하지 않고, 모든 수를 실수로만 표현한다 - 매우 큰 수나 작은 수를 표기할 때는 e 표기법을 사용할 수 있다 var firstNum = 10; // 소수점을 사용하지 않은 표현 var secondNum = 10.00; // 소수점을 사용한 표현 var thirdNum = 10e6; // 10000000 var fourthNum = 10e-6; // 0..

자바스크립트 (JavaScript) > 자바스크립트 : 객체 (object) 기반의 스크립트 언어 - HTML은 웹의 내용, CSS은 웹을 디자인, JS로는 웹의 동작을 구현한다 - 주로 웹 브라우저에서 사용되지만, Node.js 같은 프레임 워크를 사용하면 서버 프로그래밍에서도 사용할 수 있다 - 컴퓨터, 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있다 > 자바스크립트의 역사 - 1995년 Netscape의 Brendan Eich에 의해 만들어졌다 - Mocha, LiveScript의 이름을 거쳐 JavaScript라는 이름으로 변경됨 > 자바스크립트의 특징 - 객체 기반의 스트립트 언어 - 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다 - 객체 지향형 ..

CSS3 버튼 (button) > CSS3 버튼 - 다양한 모양의 버튼을 만들 수 있다 - 태그 뿐만 아니라 태그와 태크로도 만들 수 있다 button 태그 a 태그 - (예) 마우스를 올리면 배경색이 변하는 버튼 - (예) 그림자 효과 설정 버튼 - (예) 버튼을 사용하지 못하게 설정 - 사용 금지된 버튼은 반투명하게 보인다 - (예) float 속성을 이용하여 만든 버튼 > 다양한 형태의 버튼 예제 - 애니메이션 효과를 이용하여 버튼에 다양한 효과를 줄 수 있다 - (예) 마우스를 올리면 버튼의 표시 내용이 바뀌는 예제 - (예) 버튼을 눌면 버튼 위로 다른 색상이 물결처럼 퍼지는 예제 - :active와 :after 선택자를 이용하여 transition 효과를 설정하여 구현 - (예) 진짜 버튼을 ..

변형 (Transform) - transform 속성을 사용하여 HTML 요소의 모양, 크기, 위치 등을 바꿀 수 있다 - 제공하는 동작 : 요소를 움직이거나, 회전시키거나, 크기를 변경하거나, 기울이기 > CSS 좌표 체계 - CSS 좌표 체계에서 기준점은 브라우저의 왼쪽 상단 > 2D 변형 (transform) - CSS3 2D transform 속성 속성 설명 transform 요소에 2D 또는 3D transform을 적용함 transform-origin 요소에 transform을 적용하는 변환 중심을 설정 - CSS3 2D transform 메소드 메소드 설명 matrix(n,n,n,n,n,n) 모든 2D transform 메소드를 한 번에 설정 translate(x,y) 해당 요소를 주어진 x..

CSS3 그림자 효과 > text-shadow 속성 text-shadow: 그림자의x축값 그림자의y축값 blur값 색상값; - 그림자가 시작할 x축과 y축과 상대 위치를 명시하고, blur값으로 그림자의 흐린 정도를 명시 - (예) 다양한 그림자 효과 > box-shadow 속성 - 해당 HTML 요소에 그림자 효과 적용 box-shadow: 그림자의x축값 그림자의y축값 blur값 색상값; CSS3 배경 - 배경의 크기뿐 아니라 위치까지 설정 가능 - 하나의 HTML 요소에 여러 개의 배경 이미지 적용 가능 - CSS2의 background 속성 : background-color, background-image, background-repeat, background-position, background-..

CSS3 : 이전 버전 CSS와 완전히 호환되는 CSS의 최신 표준 권고안 > CSS3 변경 사항 : CSS3에서 새롭게 추가되거나 변경된 대표적인 기능 - Selectors Level 3 - Media Queries Level 3 - Color Level 3 - Namespaces > CSS3 모듈 (Module) : CSS3는 새로운 기능들과 함께 이전 버전 CSS 기능까지 포함하는 모듈이라는 것으로 구성되며, 다음은 CSS3를 구성하는 주요 모듈이다 - Selectors - Box Model - Backgrounds - Image Values and Replaced Content - Text Effects - 2D Transformations - 3D Transformations - Animatio..

Form 요소 : 사용자의 입력을 받는 input 요소에도 다양한 스타일을 설정할 수 있다 > input 요소의 크기 설정 - width 속성을 이용하여 input 요소의 크기 설정 가능 > input 요소의 테두리 설정 - border 속성을 이용하여 input 요소의 테두리 색상, 두께를 바꿀 수 있다 - border-radius 속성을 이용하여 input 요소의 모서리를 둥글게 만들 수도 있다 > input 요소에 배경색 적용 - background-color 속성을 이용하여 input 요소의 배경색을 설정할 수 있다 - color 속성을 이용하여 input 요소의 텍스트 색상 변경 가능 > 포커스를 가지고 있는 input 요소의 스타일 적용 - focus 선택자를 이용하여 해당 input 요소가 ..

내비게이션 바 (navigation bar) : 우리가 흔히 사용하는 웹 사이트의 메뉴를 의미 > 링크를 사용한 리스트 메뉴 - 내비게이션 바 중에서도 가장 기본적인 것 - HTML에서 링크는 태그로 표현한다 - 다음은 링크를 사용하여 내비게이션 바를 구현한 간단한 메뉴 예제 Home HTML CSS 자바스크립트 > 수직 내비게이션 바 - 링크를 사용한 리스트 메뉴에 display 속성값을 block으로 설정 → 메뉴의 어느 곳을 클릭해도 연결된 페이지로 바로 넘어간다 - class를 이용하면 내비게이션 방서 현재 메뉴의 위치도 표현 가능, 다음 예제에서는 :not 선택자를 이용하여 현재 메뉴인 current 클래스와 그 외의 메뉴 배경색을 구분한다 - border 속성을 이용하여 내비게이션 바에 경계선..