Ch.9 JavaScript 기초 — 페이지에 생명을

JavaScript란? — 세 번째 언어

HTML, CSS, JavaScript의 역할 차이를 명확히 구분한다<script> 태그로 JavaScript를 HTML에 연결할 수 있다console.log와 alert로 간단한 출력을 수행할 수 있다

HTML은 뼈대, CSS는 옷 그럼 JavaScript는?

지금까지 만든 홈페이지는 보기에는 예쁘지만, 버튼을 눌러도 아무 일도 일어나지 않습니다. 페이지에 '생명'을 불어넣으려면?

정적인 페이지에 동작을 추가하려면?

JavaScript — 웹 페이지에 상호작용과 동적 기능을 부여하는 프로그래밍 언어입니다.

article

핵심 내용

웹 페이지는 세 가지 언어로 만들어집니다

비유하자면: HTML = 집의 골조 (벽, 방, 창문) CSS = 인테리어 (벽지, 가구 배치, 조명) JavaScript = 전기·수도 (스위치 누르면 불이 켜짐)

JavaScript는 <script> 태그로 HTML에 연결합니다

<!DOCTYPE html>
<html>
<head>
  <title>내 홈페이지</title>
</head>
<body>
  <h1>안녕하세요!</h1>

  <!-- JavaScript는 보통 body 맨 아래에 작성 -->
  <script>
    console.log("Hello, JavaScript!");
    alert("환영합니다!");
  </script>
</body>
</html>

console.log(): 개발자 도구 콘솔에 출력 (디버깅용)

alert(): 팝업 창으로 메시지 표시

외부 파일: <script src="app.js"> 로 분리 가능

console.log() 는 화면에 보이지 않고 개발자 도구(F12)에서만 확인 가능 alert() 는 사용자에게 팝업을 띄움 — 디버깅보다는 알림용

script 태그 안에 JavaScript를 작성해봅시다

JavaScript 코드를 HTML에 삽입하는 태그는?

console.log()의 결과는 웹 페이지 화면에 직접 표시된다

다음 중 JavaScript의 역할로 올바른 것은?

JavaScript 첫걸음!

key

핵심 용어

🦴

HTML

구조 — 제목, 문단, 이미지 등 뼈대

🎨

CSS

스타일 — 색상, 레이아웃, 애니메이션

⚡

JavaScript

동작 — 클릭, 입력, 데이터 처리

edit_note

정리 노트

JavaScript란? — 세 번째 언어

웹의 세 기둥

HTML
페이지의 구조(뼈대)를 담당
CSS
페이지의 스타일(색상·레이아웃)을 담당
JavaScript
페이지의 동작(클릭·입력·애니메이션)을 담당

핵심 문법

<script>
HTML에 JavaScript를 연결하는 태그
console.log()
개발자 도구 콘솔에 값을 출력
alert()
브라우저 팝업으로 메시지 표시
★

JavaScript는 웹 페이지에 '생명'을 불어넣는 언어입니다.

image

시각 자료

다이어그램: wd-scene-js-basics
check_circle

핵심 정리

  • 1HTML = 구조, CSS = 스타일, JavaScript = 동작
  • 2<script> 태그로 JS를 HTML에 연결
  • 3console.log = 콘솔 출력, alert = 팝업 출력

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작