HTML, CSS, JavaScript는 각각 뭘 할까?

웹 화면을 만드는 세 친구: 뼈대, 옷, 근육

한 줄로 말하면

HTML은 내용과 구조, CSS는 모양과 꾸미기, JavaScript는 움직임과 반응을 맡아.

너가 보는 모든 웹사이트(네이버, 유튜브, 쇼핑몰)는 결국 이 세 가지로 만들어져 있어. AI가 React나 Next.js로 코드를 짜줘도, 브라우저에 도착할 때는 결국 HTML·CSS·JavaScript로 바뀌어서 들어가.

HTML: 뭐가 어디에 있는지

HTML은 "여기는 제목, 여기는 문단, 여기는 버튼, 여기는 사진"이라고 이름표(태그)를 붙여주는 언어야. 꾸미는 기능은 거의 없어. 오직 "무엇이 있는지"만 말해.

<h1>오늘의 할 일</h1>
<p>세 개만 끝내자!</p>
<button>추가하기</button>

CSS: 어떻게 보이는지

CSS는 HTML에 옷을 입히는 역할이야. 글자 색, 크기, 여백, 배경, 둥근 모서리, 배치(가로로 줄 세울지 세로로 쌓을지)를 정해. 같은 HTML이라도 CSS만 바꾸면 완전히 다른 사이트처럼 보여.

• 색과 글자: 버튼을 파란색으로, 제목을 굵게
• 여백과 크기: 카드 사이 간격, 사진 너비
• 배치: 메뉴를 가로로 한 줄에, 카드를 격자로
• 반응형: 폰에서는 한 줄, PC에서는 세 줄 (이 트랙 4번 레슨에서!)

JavaScript: 어떻게 반응하는지

JavaScript는 생각하고 움직이는 담당이야. 버튼을 누르면 할 일을 추가하고, 입력이 비었으면 경고를 띄우고, 서버에서 새 글을 가져와서 화면에 붙여. 웹에서 "살아 있는" 느낌은 전부 JavaScript가 만들어.

1. HTML — 버튼이 화면에 있음
2. CSS — 버튼이 파랗고 둥글게 보임
3. JavaScript — 클릭을 알아채고 할 일을 목록에 추가
4. 화면 — 새 할 일이 짠 하고 나타남

확인 퀴즈

무료 · 카카오로 바로 시작 · 레슨 243개