웹사이트를 처음 공부할 때 가장 먼저 만나게 되는 단어가 있다. 바로 HTML, CSS, JavaScript다. 프로그래밍을 전혀 해보지 않은 사람도 이 세 가지 이름은 한 번쯤 들어본 적이 있을 가능성이 높다. 하지만 이름은 익숙해도, 각각이 정확히 어떤 역할을 하는지는 생각보다 헷갈리기 쉽다.
특히 처음에는 “셋 다 웹사이트 만드는 거 아닌가?” 정도로만 느껴질 수 있다. 나도 처음 웹사이트 구조를 볼 때는 HTML, CSS, JavaScript가 전부 비슷한 역할을 하는 줄 알았다. 그런데 직접 HTML 파일을 만들고, 브라우저에서 열어보고, 스타일을 바꾸고, 버튼을 눌렀을 때 반응이 생기는 것을 보면서 셋의 차이를 조금씩 이해하게 됐다.
결론부터 말하면 HTML은 웹페이지의 뼈대, CSS는 웹페이지의 디자인, JavaScript는 웹페이지의 움직임과 기능을 담당한다. 이 세 가지가 함께 있어야 우리가 평소 보는 익숙한 웹사이트 화면이 완성된다.
HTML은 웹페이지의 내용과 구조를 만드는 역할을 한다
HTML은 웹페이지의 가장 기본이 되는 언어다. 쉽게 말하면, 웹페이지 안에 무엇이 들어갈지 정리하는 역할을 한다. 제목, 문단, 사진, 링크, 버튼 같은 요소를 어디에 놓을지 결정하는 것이 HTML이다.
예를 들어 아래와 같은 코드를 생각해보자.
<h1>안녕하세요</h1>
<p>이것은 첫 웹페이지입니다.</p>
이 코드는 “안녕하세요”라는 큰 제목과, “이것은 첫 웹페이지입니다.”라는 문장을 웹페이지에 보여준다. 즉, HTML은 웹페이지 안에 들어갈 실제 내용과 구조를 만드는 역할을 한다.
이때 중요한 점은 HTML이 “예쁘게 꾸미는 것”까지 담당하지는 않는다는 점이다. HTML만 있으면 웹페이지는 만들어지지만, 매우 단순하고 기본적인 모습으로 보인다. 색도 거의 없고, 배치도 투박하고, 움직임도 없다. 하지만 그 단순한 상태라도 HTML이 없으면 웹페이지 자체를 만들 수 없다.
쉽게 비유하면 HTML은 집의 골조나 뼈대와 같다. 방이 몇 개 있는지, 문은 어디 있는지, 창문은 어디에 달리는지 같은 기본 구조를 잡는 것이다. 아무리 예쁜 인테리어를 하고 싶어도, 먼저 집의 구조가 있어야 하는 것처럼 웹사이트도 HTML이 먼저 있어야 한다.
실제로 블로그 글이나 웹사이트를 만들 때도 가장 먼저 HTML이 바탕이 된다. 예를 들어 제목은 <h1>, 문단은 <p>, 이미지는 <img>, 링크는 <a>처럼 태그를 사용해 내용을 배치한다. 그래서 HTML은 웹사이트를 만드는 첫 번째 단계라고 볼 수 있다.
CSS는 웹페이지를 보기 좋게 꾸며주는 역할을 한다
HTML이 웹페이지의 구조를 만든다면, CSS는 그 구조를 예쁘게 꾸미는 역할을 한다. 글자 크기, 색상, 배경색, 여백, 정렬, 버튼 모양 같은 시각적인 부분을 담당하는 것이 CSS다.
예를 들어 같은 HTML이라도 CSS를 넣느냐에 따라 화면 느낌이 완전히 달라질 수 있다. 아래처럼 제목 색을 파란색으로 바꾸고, 글씨를 가운데 정렬하고, 배경색을 넣을 수 있다.
h1 {
color: blue;
text-align: center;
}
p {
font-size: 18px;
color: gray;
}
이처럼 CSS는 웹사이트를 더 보기 좋고 읽기 쉽게 만들어준다. 같은 내용의 웹페이지라도 CSS를 적용하면 훨씬 세련되고 전문적으로 보인다.
처음 웹사이트를 만들었을 때 HTML만으로 화면을 열어보면, 정말 단순한 문서처럼 보이는 경우가 많다. 나도 처음 HTML 파일을 브라우저에서 열었을 때는 “이게 웹사이트 맞나?” 싶을 정도로 아주 기본적인 화면만 나왔다. 그런데 CSS를 조금씩 추가하자 글자 크기가 바뀌고, 색이 들어가고, 여백이 정리되면서 훨씬 진짜 웹사이트처럼 보이기 시작했다.
CSS는 집으로 비유하면 인테리어와 비슷하다. 같은 구조의 집이라도 벽지 색, 조명, 가구 배치에 따라 분위기가 완전히 달라지는 것처럼, CSS도 같은 HTML 구조를 전혀 다른 느낌으로 바꿔준다.
예를 들어 쇼핑몰 사이트를 생각해보면, 상품 사진이 가지런히 정렬되고, 가격은 강조된 색으로 보이고, 구매 버튼은 눈에 띄는 디자인으로 만들어져 있다. 이런 시각적인 완성도는 대부분 CSS의 역할이다. 그래서 HTML이 “무엇을 보여줄지”를 정한다면, CSS는 “어떻게 보이게 할지”를 정한다고 생각하면 된다.
JavaScript는 웹페이지에 반응과 기능을 넣는 역할을 한다
HTML이 구조, CSS가 디자인이라면, JavaScript는 웹페이지가 실제로 움직이고 반응하게 만드는 역할을 한다. 버튼을 눌렀을 때 내용이 바뀌거나, 메뉴가 열리거나, 슬라이드가 넘어가거나, 입력한 내용이 바로 검사되는 기능은 대부분 JavaScript로 만든다.
예를 들어 아래처럼 아주 간단한 JavaScript 코드를 생각해볼 수 있다.
function hello() {
alert("안녕하세요!");
}
그리고 버튼에 이 기능을 연결하면:
<button onclick="hello()">눌러보세요</button>
사용자가 버튼을 눌렀을 때 “안녕하세요!”라는 팝업이 뜬다. 즉, JavaScript는 사용자의 행동에 따라 웹페이지가 반응하게 만드는 언어다.
처음에는 JavaScript가 없어도 웹사이트가 보이니까 “꼭 필요한가?”라고 느껴질 수 있다. 하지만 우리가 평소 사용하는 웹사이트를 떠올려보면, 거의 모든 곳에 JavaScript 기능이 들어 있다. 로그인 버튼을 누르면 입력값을 확인하고, 장바구니 수량을 바꾸면 가격이 즉시 계산되고, 댓글을 작성하면 새로고침 없이 화면에 바로 반영되기도 한다. 이런 기능은 대부분 JavaScript 덕분에 가능하다.
쉽게 비유하면 JavaScript는 집 안의 전기, 센서, 자동문 같은 기능이다. 집 구조와 인테리어만으로도 기본적인 공간은 완성되지만, 불이 켜지고 꺼지고, 자동문이 열리고, 버튼을 누르면 무언가 반응하는 기능은 별도의 시스템이 필요하다. 웹사이트에서도 그 역할을 JavaScript가 맡는다.
특히 요즘 웹사이트는 단순히 글만 보여주는 수준을 넘어서, 앱처럼 동작하는 경우가 많다. 검색창 자동완성, 무한 스크롤, 실시간 알림, 탭 전환 같은 기능은 대부분 JavaScript가 핵심 역할을 한다. 그래서 JavaScript는 “웹페이지를 살아 움직이게 만드는 언어”라고 이해하면 쉽다.
HTML, CSS, JavaScript는 따로가 아니라 함께 작동한다
중요한 점은 이 세 가지가 각각 따로 놀지 않는다는 것이다. 실제 웹사이트에서는 HTML, CSS, JavaScript가 함께 작동한다.
예를 들어 회원가입 페이지를 생각해보자.
- HTML은 제목, 입력창, 버튼 같은 구조를 만든다.
- CSS는 입력창 크기, 버튼 색상, 글자 정렬을 꾸민다.
- JavaScript는 입력값이 비어 있으면 경고를 띄우고, 이메일 형식이 맞는지 확인한다.
즉, HTML만 있으면 내용은 보이지만 투박하고 기능이 없다. CSS만 있어서는 꾸밀 대상 자체가 없다. JavaScript만 있어도 구조가 없으면 보여줄 수 없다. 결국 세 가지가 각각 다른 역할을 하면서 하나의 웹사이트를 완성하는 것이다.
| 기술 | 주요 역할 | 쉽게 비유하면 |
|---|---|---|
| HTML | 내용과 구조 만들기 | 집의 뼈대 |
| CSS | 디자인과 꾸미기 | 인테리어 |
| JavaScript | 움직임과 기능 추가 | 전기·자동문·센서 |
나도 처음에는 이 셋의 차이를 머리로만 외우려고 해서 더 헷갈렸다. 그런데 직접 HTML 파일 하나를 만들고, CSS로 색을 바꾸고, JavaScript로 버튼 반응을 넣어보니까 훨씬 명확하게 이해됐다. 결국 이 셋은 따로 배우는 것이 아니라, 같이 써보면서 익히는 것이 가장 잘 들어온다.
왜 초보자는 이 세 가지를 자꾸 헷갈릴까
초보자가 HTML, CSS, JavaScript를 헷갈리는 이유는 셋 다 결국 “웹사이트 만들기”에 쓰이기 때문이다. 게다가 브라우저 안에서 함께 동작하니, 처음에는 전부 비슷해 보일 수 있다.
하지만 구분하는 가장 쉬운 방법은 질문을 바꿔보는 것이다.
- 이건 웹페이지에 무엇을 넣는 문제인가? → HTML
- 이건 웹페이지를 어떻게 보이게 할지의 문제인가? → CSS
- 이건 웹페이지가 어떻게 반응하게 할지의 문제인가? → JavaScript
예를 들어 “제목을 넣고 싶다”는 HTML 문제다. “제목 색을 파란색으로 바꾸고 싶다”는 CSS 문제다. “버튼을 눌렀을 때 제목이 바뀌게 하고 싶다”는 JavaScript 문제다.
이렇게 생각하면 훨씬 헷갈림이 줄어든다. 결국 셋은 경쟁하는 관계가 아니라, 서로 역할이 다른 협업 도구라고 볼 수 있다.
처음 배우는 사람은 무엇부터 시작하는 것이 좋을까
웹사이트를 처음 공부한다면 HTML부터 시작하는 것이 가장 좋다. 구조를 모르면 디자인도, 기능도 붙이기 어렵기 때문이다. 먼저 제목, 문단, 이미지, 링크 같은 기본 HTML 태그를 익히고, 그다음 CSS로 색과 배치를 바꾸고, 마지막에 JavaScript로 간단한 반응을 넣는 순서가 가장 자연스럽다.
예를 들어 아래 순서로 배우면 좋다.
- HTML로 제목과 문단 만들기
- CSS로 글자색과 배경 바꾸기
- JavaScript로 버튼 클릭 반응 넣기
이 흐름대로 한 번만 직접 만들어보면, 책으로 읽는 것보다 훨씬 빠르게 감이 잡힌다. 나도 처음에는 설명만 볼 때보다, 직접 index.html 파일을 만들고 브라우저에서 열어본 뒤에야 “아, HTML은 뼈대구나” 하고 실감이 났다.
웹사이트는 이 세 가지가 함께 만들어낸 결과다
정리하면 HTML은 웹페이지의 구조와 내용을 만들고, CSS는 그것을 보기 좋게 꾸미며, JavaScript는 웹페이지가 실제로 반응하고 동작하게 만든다. 셋 중 하나만으로는 우리가 평소 보는 완성된 웹사이트를 만들기 어렵다.
처음에는 이름도 낯설고, 역할도 비슷해 보여서 헷갈릴 수 있다. 하지만 “HTML은 뼈대, CSS는 디자인, JavaScript는 기능”이라는 기준만 기억해도 큰 틀은 충분히 이해할 수 있다.
그리고 가장 좋은 공부 방법은 직접 아주 간단한 웹페이지를 하나 만들어보는 것이다. 제목 한 줄, 문장 한 줄, 버튼 하나만 만들어도 세 가지 차이가 훨씬 선명하게 느껴질 것이다.