HTML/CSS 다음은 JavaScript! 웹 개발을 위한 자바스크립트 기초

🚀 HTML/CSS 다음 단계, 이제 JavaScript입니다

HTML로 웹페이지의 구조를 만들고 CSS로 디자인했다면, 이제 JavaScript로 웹페이지에 동작과 상호작용을 더할 차례입니다.

버튼을 클릭했을 때 화면이 바뀌고, 사용자의 입력에 따라 콘텐츠가 변경되고, 탭이나 아코디언 메뉴가 움직이는 웹페이지. 이런 기능을 구현하는 핵심 언어가 JavaScript입니다.

이 강의에서는 단순히 문법을 암기하는 데 그치지 않고,

JavaScript 기본 문법 → DOM 요소 제어 → 이벤트 → 실제 UI 구현

순서로 학습합니다.

변수와 함수가 실제 웹페이지에서 어떻게 사용되는지 직접 확인하면서 HTML/CSS로 만든 정적인 페이지를 JavaScript로 동작하게 만드는 과정을 경험해보세요.

🤖 AI 시대에도 JavaScript 기본기가 필요한 이유

AI가 JavaScript 코드를 빠르게 만들어주는 시대가 되었습니다.

하지만 AI가 생성한 코드가 왜 동작하는지 이해하고, 원하는 기능으로 수정하고, 오류가 발생했을 때 문제를 찾으려면 JavaScript의 기본 원리를 이해하고 있어야 합니다.

특히 React, Next.js와 같은 프론트엔드 기술 역시 JavaScript를 기반으로 합니다.

AI에게 코드를 요청하는 능력과 함께 생성된 코드를 읽고 이해하고 수정할 수 있는 기본기를 갖춘다면 AI를 더욱 효과적인 개발 도구로 활용할 수 있습니다.

🎯 이런 분들께 추천합니다

JavaScript를 처음 배우는 분
HTML/CSS 학습을 마치고 프로그래밍을 처음 시작하는 분께 적합합니다.

웹 퍼블리싱 역량을 확장하고 싶은 분
정적인 페이지를 넘어 클릭, 입력, 스크롤 등에 반응하는 인터랙티브 웹페이지를 만들고 싶은 분께 추천합니다.

JavaScript 문법은 배웠지만 활용이 어려운 분
변수, 함수, 조건문은 알고 있지만 실제 HTML 요소에 어떻게 적용해야 하는지 막막했던 분께 도움이 됩니다.

React 등 프론트엔드 기술을 배우려는 분
React 학습 전에 필요한 JavaScript와 DOM, 이벤트의 기본 개념을 익힐 수 있습니다.

💡 무엇을 배우게 되나요?

STEP 01. JavaScript 프로그래밍 기본기

프로그래밍의 기본이 되는 JavaScript 핵심 문법부터 시작합니다.

• 변수와 연산자

• 함수와 객체

• 배열의 생성과 활용

• 조건문과 논리 연산자

• for, while, forEach, for...of 등의 반복문

문법 하나하나를 외우기보다 코드의 흐름을 이해하는 데 중점을 둡니다.

STEP 02. 문자열과 타이머 활용하기

웹 개발에서 자주 사용하는 문자열 처리와 시간에 따른 동작을 학습합니다.

• 문자열 추출과 병합

• 문자열 내용 변경

• JavaScript 타이머

JavaScript로 데이터를 가공하고 특정 시간에 코드를 실행하는 기본 원리를 이해합니다.

STEP 03. JavaScript로 웹페이지 제어하기

앞에서 배운 문법을 실제 HTML/CSS와 연결합니다.

• DOM 요소 선택

• 선택한 요소의 스타일 변경

• 반복문을 활용한 여러 요소 제어

• click, mouseover, mouseout 등의 이벤트

• change 등 입력 요소 이벤트

여기서부터 JavaScript 문법이 실제 웹페이지에서 어떻게 사용되는지 본격적으로 경험합니다. 현재 강의에서도 DOM 선택과 스타일 변경, 이벤트가 별도 차시로 구성되어 있습니다. 인프런

STEP 04. 현대 JavaScript 문법 익히기

현대적인 JavaScript 코드를 이해하기 위해 ES6의 주요 문법을 학습합니다.

• let, const

• 템플릿 리터럴

• 화살표 함수

기존 문법과 비교하면서 더욱 간결하고 현대적인 JavaScript 작성 방법을 익힙니다.

STEP 05. JavaScript로 실전 UI 구현하기

지금까지 학습한 문법, DOM, 이벤트를 종합하여 실제 웹사이트에서 자주 볼 수 있는 UI를 직접 구현합니다.

Back to Top
스크롤과 이벤트를 활용해 페이지 상단으로 이동하는 기능을 구현합니다.

Tabs
메뉴를 선택하면 콘텐츠가 변경되는 탭 UI를 구현합니다.

Accordion
클릭에 따라 콘텐츠가 펼쳐지고 닫히는 아코디언 UI를 구현합니다.

단순히 완성된 코드를 따라 작성하는 것이 아니라 앞에서 배운 JavaScript가 실제 UI를 구현할 때 어떻게 연결되는지 확인합니다.

Cookies & 오늘 하루 안 보기
쿠키(Cookie)의 기본 개념과 동작 방식을 이해하고, JavaScript를 활용해 쿠키 생성·조회·삭제 방법을 학습합니다. 이를 바탕으로 실제 웹사이트의 이벤트 팝업에서 자주 사용하는 ‘오늘 하루 안 보기’ 기능을 직접 구현합니다.

단순히 완성된 코드를 따라 작성하는 것이 아니라 앞에서 배운 JavaScript가 실제 UI 기능과 사용자 상태 관리에 어떻게 연결되는지 확인합니다.

✅ 수강 후에는 이런 것을 할 수 있습니다

수강 후에는 JavaScript의 주요 문법을 이해하고 직접 코드를 작성할 수 있으며, 조건문과 반복문을 활용해 프로그램의 흐름을 제어할 수 있습니다.

또한 DOM 요소를 선택하고 변경하거나 사용자 이벤트에 반응하는 기능을 구현하고, HTML/CSS와 JavaScript를 결합해 실제로 동작하는 웹페이지를 제작할 수 있는 기초 역량을 갖추게 됩니다.

무엇보다 앞으로 jQuery, React, TypeScript 등 다음 단계의 웹 개발 기술을 학습하기 위한 JavaScript 기본기를 만들 수 있습니다.

🛠 수강 전 준비 사항

JavaScript를 처음 배우는 분도 수강할 수 있습니다.

다만 실습에서 JavaScript로 HTML 요소와 CSS 스타일을 직접 제어하기 때문에 HTML과 CSS의 기본 문법을 알고 있다면 더욱 수월하게 학습할 수 있습니다.

JavaScript에 대한 사전 경험은 필요하지 않습니다.

실습에는 Visual Studio Code와 Chrome 등의 최신 웹 브라우저를 사용하며, 강의를 시청하는 것에 그치지 않고 예제 코드를 직접 작성하고 실행해보는 것을 권장합니다.

HTML/CSS가 처음이라면 먼저 무료 기초 과정을 학습한 뒤 시작해도 좋습니다.

HTML 기초 과정
CSS 기초 과정

자주 묻는 질문

📚 JavaScript 기본기를 익혔다면 다음 단계로!

JavaScript의 기본 문법과 DOM, 이벤트까지 이해했다면 이제 학습 목적에 따라 다음 단계로 확장해보세요.

웹 퍼블리싱을 더 깊게 배우고 싶다면
jQuery를 활용해 탭, 아코디언, 슬라이드 등 다양한 실무 UI 구현 방법을 학습할 수 있습니다.

프론트엔드 개발로 확장하고 싶다면
React의 컴포넌트, Props, State 등을 배우고 실제 프로젝트 제작에 도전해보세요.