HTML, CSS, JavaScript 차이 쉽게 정리하기

웹 개발을 처음 공부하면 가장 먼저 만나는 단어가 있습니다.

바로 HTML, CSS, JavaScript입니다.

처음에는 셋 다 비슷해 보입니다.

"이게 다 웹페이지 만드는 거 아닌가?"라는 생각이 들 수 있습니다.

맞습니다. 셋 다 웹페이지를 만들 때 사용합니다.

하지만 역할은 완전히 다릅니다.

이번 글에서는 HTML, CSS, JavaScript가 각각 어떤 역할을 하는지 초보자 기준으로 정리해보겠습니다.

이 글에서 다루는 내용

HTML의 역할
CSS의 역할
JavaScript의 역할
세 가지가 함께 웹페이지를 만드는 방식
초보자가 헷갈리기 쉬운 부분

HTML은 웹페이지의 구조를 만든다

HTML은 웹페이지의 뼈대를 만드는 역할을 합니다.

웹페이지에 어떤 내용이 들어갈지 정하는 것이 HTML입니다.

예를 들면 다음과 같은 것들이 HTML로 작성됩니다.

제목
문단
버튼
이미지
링크
입력창
목록

간단한 HTML 코드를 보면 다음과 같습니다.

<h1>나의 첫 웹페이지</h1>
<p>HTML을 배우는 중입니다.</p>
<button>클릭하기</button>

위 코드는 화면에 제목, 문장, 버튼을 보여줍니다.

여기서 중요한 점은 HTML은 주로 내용과 구조를 담당한다는 것입니다.

즉, "무엇을 보여줄 것인가?"를 정하는 역할입니다.

CSS는 웹페이지를 꾸민다

CSS는 HTML로 만든 구조를 꾸미는 역할을 합니다.

HTML만 사용하면 웹페이지가 너무 단순하게 보입니다.

글자 크기, 색상, 간격, 배치, 배경색 같은 디자인을 적용하려면 CSS가 필요합니다.

예를 들어 다음과 같이 작성할 수 있습니다.

h1 {
  color: blue;
  font-size: 32px;
}

button {
  background-color: black;
  color: white;
  padding: 10px 20px;
}

이 코드는 제목의 색상과 크기를 바꾸고, 버튼의 배경색과 글자색을 바꿉니다.

CSS는 "어떻게 보이게 할 것인가?"를 담당합니다.

JavaScript는 웹페이지에 동작을 넣는다

JavaScript는 웹페이지에 움직임과 기능을 넣는 역할을 합니다.

HTML과 CSS만 있으면 화면은 만들 수 있습니다.

하지만 사용자가 버튼을 클릭했을 때 어떤 일이 일어나게 하려면 JavaScript가 필요합니다.

예를 들어 버튼을 클릭했을 때 알림창을 띄우는 코드는 다음과 같습니다.

<button onclick="alert('버튼을 클릭했습니다!')">클릭하기</button>

또는 JavaScript 파일에서 다음처럼 작성할 수도 있습니다.

const button = document.querySelector("button");

button.addEventListener("click", function () {
  alert("버튼을 클릭했습니다!");
});

JavaScript는 "사용자가 행동했을 때 무엇이 일어날 것인가?"를 담당합니다.

집으로 비유해서 이해하기

HTML, CSS, JavaScript는 집을 만드는 과정으로 비유하면 이해하기 쉽습니다.

기술	역할	집으로 비유
HTML	구조	기둥, 벽, 방 구조
CSS	디자인	벽지, 조명, 인테리어
JavaScript	동작	전등 스위치, 자동문, 엘리베이터

HTML은 집의 기본 구조입니다.

CSS는 그 집을 보기 좋게 꾸미는 인테리어입니다.

JavaScript는 사용자의 행동에 따라 움직이는 기능입니다.

예를 들어 스위치를 누르면 불이 켜지는 것처럼, 웹페이지에서도 버튼을 클릭하면 JavaScript가 동작합니다.

세 가지가 함께 웹페이지를 만드는 방식

실제 웹페이지는 HTML, CSS, JavaScript가 함께 동작합니다.

간단한 예시를 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>웹 기초 예제</title>
    <style>
      h1 {
        color: blue;
      }

      button {
        padding: 10px 20px;
      }
    </style>
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>HTML, CSS, JavaScript를 배우는 중입니다.</p>
    <button onclick="alert('반갑습니다!')">클릭</button>
  </body>
</html>

이 코드에서 역할을 나누면 다음과 같습니다.

부분	역할
`<h1>`, `<p>`, `<button>`	HTML, 화면 구조
`color`, `padding`	CSS, 디자인
`onclick`, `alert()`	JavaScript, 동작

이렇게 세 가지가 합쳐져 하나의 웹페이지가 만들어집니다.

같은 화면을 세 가지로 나눠서 보기

예를 들어 회원가입 버튼 하나를 만든다고 해보겠습니다.

먼저 HTML은 버튼이 화면에 존재하도록 만듭니다.

<button>회원가입</button>

그다음 CSS는 버튼의 모양을 정합니다.

button {
  background-color: orange;
  color: white;
  padding: 10px 16px;
}

마지막으로 JavaScript는 버튼을 눌렀을 때 어떤 일이 일어날지 정합니다.

button.addEventListener("click", function () {
  alert("회원가입을 진행합니다.");
});

이렇게 보면 세 기술이 같은 버튼을 다루더라도 역할이 다르다는 점이 더 분명하게 보입니다.

세 파일이 실제로 어떻게 연결될까?

처음에는 HTML, CSS, JavaScript를 한 파일 안에서만 보게 되는 경우가 많습니다.

하지만 실제로는 아래처럼 나누어 두고 연결하는 경우도 많습니다.

index.html
style.css
script.js

HTML 파일에서 CSS와 JavaScript를 연결하면 구조가 조금 더 또렷하게 보입니다.

<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button>클릭</button>
  <script src="script.js"></script>
</body>

처음에는 한 파일 안에서 익혀도 괜찮습니다.

다만 나중에는 구조는 HTML, 꾸미기는 CSS, 동작은 JavaScript로 나누어 생각하는 습관이 중요합니다.

초보자가 자주 헷갈리는 부분

처음 공부할 때는 HTML, CSS, JavaScript의 역할이 섞여 보일 수 있습니다.

하지만 기준을 하나만 기억하면 됩니다.

구조는 HTML, 꾸미기는 CSS, 동작은 JavaScript입니다.

예를 들어 버튼을 만든다고 생각해보겠습니다.

<button>회원가입</button>

이 코드는 버튼을 만드는 HTML입니다.

button {
  background-color: orange;
}

이 코드는 버튼을 꾸미는 CSS입니다.

button.addEventListener("click", function () {
  console.log("회원가입 버튼 클릭");
});

이 코드는 버튼을 클릭했을 때 동작을 처리하는 JavaScript입니다.

같은 버튼을 다루더라도 역할이 다릅니다.

자주 헷갈리는 질문

HTML만으로도 웹페이지를 만들 수 있을까?

기본적인 화면은 만들 수 있습니다.

하지만 글자 색, 간격, 배치 같은 디자인은 거의 기본 상태로만 보입니다.

즉 HTML만으로도 화면은 나오지만, 보기 좋게 꾸미려면 CSS가 필요합니다.

CSS만으로 버튼을 만들 수 있을까?

아닙니다.

CSS는 이미 있는 HTML 요소를 꾸미는 역할입니다.

즉 버튼 자체는 HTML이 만들고, CSS는 그 버튼을 더 보기 좋게 꾸밉니다.

JavaScript가 없으면 웹페이지가 아예 안 될까?

반드시 그렇지는 않습니다.

정적인 소개 페이지나 간단한 문서 페이지는 HTML과 CSS만으로도 충분히 만들 수 있습니다.

다만 클릭, 입력, 화면 변경처럼 사용자의 행동에 반응하려면 JavaScript가 필요합니다.

정리

HTML, CSS, JavaScript는 웹 개발의 기본입니다.

처음부터 모든 문법을 외우려고 할 필요는 없습니다.

먼저 각각의 역할을 구분하는 것이 중요합니다.

HTML은 웹페이지의 구조를 만듭니다.
CSS는 웹페이지를 보기 좋게 꾸밉니다.
JavaScript는 웹페이지에 동작을 추가합니다.

웹페이지를 만들 때는 보통 HTML로 뼈대를 만들고, CSS로 꾸민 뒤, JavaScript로 기능을 추가합니다.

처음 웹 개발을 공부한다면 이 순서로 이해하면 좋습니다.

HTML은 구조, CSS는 디자인, JavaScript는 동작입니다.

이 한 문장만 확실히 기억해도 웹 개발의 첫 단계는 잘 시작한 것입니다.

CSS가 왜 따로 필요한지 더 자세히 보고 싶다면 CSS가 왜 필요한지, CSS의 역할과 기본 문법 정리 글을 함께 보면 좋습니다.

직접 HTML 파일을 하나 만들어보는 흐름부터 보고 싶다면 첫 번째 HTML 문서 만들기 글로 이어서 읽어보면 자연스럽습니다.