1-2 브라우저 실습 ⏱ 약 7분

HTML · CSS · JavaScript 3분 맛보기

모든 웹사이트는 세 가지 언어로 만들어져요. 문법을 외우지 말고, 각자 무슨 일을 하는지만 알아 둬요.

🎯 이번 레슨을 마치면
  • HTML, CSS, JavaScript가 각각 어떤 역할인지 말할 수 있다
  • 고치고 싶은 부분이 셋 중 어디에 있는지 짐작할 수 있다

하나씩 켜 보세요

지금은 HTML만 켜져 있어요. CSS와 JavaScript를 차례로 켜 보세요.

체험HTML · CSS · JavaScript 하나씩 켜 보기

HTML만 있는 상태예요. 내용(제목, 글, 목록, 버튼)은 다 있지만 꾸밈이 없어요. 버튼을 눌러도 아무 일도 일어나지 않아요.

무엇을 고치려면 어디를?

하고 싶은 것어디를 봐요?AI에게는 이렇게
글자·사진·메뉴 항목 바꾸기HTML“소개 문단 내용을 이렇게 바꿔 줘”
색·글꼴·여백·배치 바꾸기CSS“제목을 더 크게, 남색으로 바꿔 줘”
버튼 기능, 계산, 저장JavaScript“버튼을 누르면 다크모드가 되게 해 줘”

1분 실습: 직접 바꿔 보기

탭을 오가며 미션 세 개를 해 보세요. 고치면 결과가 바로 바뀌어요. (JavaScript를 바꿨다면 ▶ 실행을 눌러요.)

따라 해보기
Ctrl+Enter 실행
실행 결과
▶ 실행 버튼을 누르면 여기에 결과가 나타나요
콘솔
console.log()로 출력한 내용이 여기에 나타나요
🎯 미션0 / 3
  • HTML 탭: 가게 이름을 내 마음대로 바꿔요
  • CSS 탭: saddlebrown을 tomato나 green 같은 다른 색으로 바꿔요
  • JavaScript 탭: 버튼을 누르면 나오는 메시지를 바꾸고 ▶ 실행해요
퀴즈

버튼 색이 마음에 안 들어요. 어떤 코드를 바꿔야 할까요?

📝 정리해 볼까요?

  • HTML은 내용과 뼈대, CSS는 색·크기·배치, JavaScript는 클릭 같은 동작을 맡아요.
  • "글자를 바꾸고 싶다" → HTML, "색을 바꾸고 싶다" → CSS, "버튼을 누르면 뭔가 되게" → JavaScript.
  • 역할을 알면 AI에게 "CSS에서 제목 색만 바꿔 줘"처럼 정확하게 요청할 수 있어요.

📖 새로 나온 용어

HTML
웹페이지의 뼈대와 내용을 적는 언어예요. "여기는 제목, 여기는 문단"처럼 표시해요. 비유: 집의 뼈대
CSS
웹페이지의 색, 크기, 글꼴, 배치를 꾸미는 언어예요. 비유: 집의 인테리어
JavaScript
웹페이지가 움직이고 반응하게 만드는 프로그래밍 언어예요. 비유: 집의 전기와 수도
용어 사전 전체 보기 →