🔍 웹 개발의 기초는 ‘세 친구’로부터 시작된다

웹 개발을 배우기 시작할 때 가장 먼저 접하는 것이 HTML, CSS, JavaScript(JS)입니다. 이 세 가지는 웹 페이지의 구조, 디자인, 동작을 각각 담당하는 핵심 기술입니다.

흔히 “HTML이 뼈대, CSS가 피부, JS가 근육”이라고 표현합니다. 단순한 비유지만 이 세 기술의 역할을 명확하게 보여줍니다.

🧱 HTML – 웹의 뼈대

HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 언어입니다. 텍스트, 이미지, 버튼, 입력창 등 모든 요소는 HTML 태그로 작성됩니다.

예시:

<h1>나의 첫 번째 웹 페이지</h1>
<p>안녕하세요. HTML을 배우고 있어요.</p>

여기서 <h1>은 제목, <p>는 문단입니다. 이렇게 태그(Tag)들을 조합해서 웹 페이지의 구조를 만듭니다.

🎨 CSS – 웹의 디자인

CSS(Cascading Style Sheets)는 HTML로 만든 구조에 스타일을 입히는 역할을 합니다. 글자 색, 배경, 간격, 위치, 반응형 레이아웃 등을 모두 CSS로 설정합니다.

예시:

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

위 코드는 모든 <h1> 요소에 파란색 텍스트와 큰 글씨를 적용합니다. CSS를 통해 시각적으로 매력적인 웹 페이지를 만들 수 있습니다.

⚙️ JavaScript – 웹의 동작

HTML과 CSS가 정적인 구조와 디자인이라면, JS는 동적인 동작을 담당합니다. 버튼 클릭, 스크롤 애니메이션, 비동기 요청 등 사용자와의 상호작용은 JS 없이는 불가능합니다.

예시:

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

사용자가 버튼을 클릭했을 때, 알림창을 띄우는 코드입니다. 이처럼 JS는 웹 페이지를 살아 움직이게 합니다.

🌐 이 셋은 어떻게 함께 작동할까?

아래는 HTML, CSS, JS가 함께 작동하는 간단한 예제입니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        background-color: green;
        color: white;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <button>클릭하세요</button>

    <script>
      document.querySelector("button").addEventListener("click", function() {
        alert("안녕하세요!");
      });
    </script>
  </body>
</html>

이 예제는 하나의 HTML 문서 안에 CSS와 JS를 함께 사용하여 디자인 + 동작 + 구조를 모두 구현합니다.

📚 배우는 순서가 중요하다

HTML 먼저: 태그 구조 이해
CSS 다음: 스타일 적용 연습
JS 마지막: 동작 추가

순서를 지켜야 자연스럽게 학습 곡선을 그릴 수 있습니다. 초반부터 JS로 바로 뛰어들면 개념 혼동과 좌절을 겪게 됩니다.

✅ 초보자가 자주 하는 실수들

HTML 태그 닫기 누락: 오류 발생 원인 1위
CSS 우선순위 이해 부족: 원하는 스타일이 안 먹히는 이유
JS에서 DOM 접근 실패: querySelector가 null 반환

이런 실수들은 실습을 통해 자연스럽게 해결됩니다. 복잡한 프레임워크보다 순수 HTML/CSS/JS를 익히는 것이 먼저입니다.

🎯 결론: 웹 개발의 뿌리를 다져라

많은 사람들이 React, Vue, Angular 같은 프레임워크부터 배우려 합니다. 하지만 기초가 약하면 아무리 좋은 도구도 제대로 사용할 수 없습니다.

HTML/CSS/JS는 웹 개발의 뿌리입니다. 단단한 기초는 빠른 성장을 위한 토대입니다. 지금 당장은 느리더라도, 결국 가장 빠른 길이 됩니다.

준생's Extension

웹 개발자로 성장하기 위한 HTML, CSS, JS 기초 개념 다지기