lesson1Title

lesson2Title

lesson3Title

lesson4Title

webIntroOtChapter2Title

webIntroOtChapter1Title

# 웹 프로그래밍 3대장

웹페이지는 **HTML, CSS, JavaScript**가 함께 작용해서 나타나는 종합적인 결과물입니다.

이 3가지 요소를 잘 활용하면 단순한 홈페이지 뿐만 아니라, 화면과 같이 정교한 논리로 구성된 게임도 만들 수 있습니다.

HTML, CSS, JavaScript는 웹에서 어떤 역할을 할까요?

<br />

## HTML: 웹페이지의 골격

HTML은 사람의 `골격`과 같습니다.

웹페이지의 구조를 정의하고 화면에 보이는 **콘텐츠**를 구성합니다.

<br />

## CSS: 웹페이지의 옷

CSS는 사람의 `옷`과 같습니다.

CSS를 사용하면 HTML 요소에 스타일, 색상, 크기와 같은 **디자인**을 적용합니다.

<br />

## JavaScript: 웹페이지의 뇌

JavaScript는 사람의 `뇌`와 같습니다.

HTML과 CSS와 함께 사용되어 웹페이지에 상호 작용성과 **동적인 기능**을 추가합니다.

동적인 기능은 특정 버튼을 클릭하면 화면의 배경색이 바뀌게 하거나 입력창에 넣는 값의 유효성을 검사하는 것(예: 비밀번호 6자리 이상)을 뜻합니다.

### JavaScript 변수 선언하기

프로그래밍에서 **변수**(Variable)는 값을 저장할 수 있는 `메모리 공간`을 의미합니다. 쉽게 말하면, 변수는 데이터를 임시로 담고 있는 상자입니다.

JavaScript를 활용하면 데이터를 처리할 변수를 선언하고 활용한 값을 담아 두었다가, 필요한 순간에 담아두었던 값을 불러와 재활용할 수 있습니다.

**let**는 언제든지 값을 변경할 수 있는 데이터를 보관하는 상자를 만들때 사용하는 JavaScript 내 예약어입니다.

`let myCurrentIndex = 490`는 `myCurrentIndex`라는 이름의 변수에 490이라는 값을 저장하는 JavaScript 코드입니다. 490을 0에서 783 사이의 다른 숫자로 변경하면, 캐릭터의 첫 시작 위치가 바뀌는 것을 확인하실 수 있습니다.

아래 빈칸에 `let`을 입력하고, 변수를 선언하는 JavaScript 코드를 완성해 보세요.