HTML CSS JavaScript role

웹을 짓는 세 가지 재료

하나의 웹페이지가 완성되는 과정은 건물을 올리고 인테리어를 한 뒤 전기 시스템을 갖추는 과정과 매우 흡사합니다.

• HTML: 건물의 구조와 뼈대
  • 집을 지을 때 가장 먼저 세우는 철골, 벽돌, 창문 틀과 같습니다.
  • "여기는 거실이야", "여기는 안방이야"라고 구역을 나누듯, 웹페이지에서 제목, 본문, 이미지의 위치를 지정합니다.
• CSS: 건물의 인테리어와 디자인
  • 벽지 색깔을 고르고, 조명을 달고, 가구의 위치를 예쁘게 조정하는 작업입니다.
  • HTML로 만든 뼈대에 색상을 입히고, 글자 크기를 조절하며, 세련된 레이아웃을 완성합니다.
• JavaScript: 건물의 설비와 기능
  • 스위치를 누르면 불이 켜지거나, 엘리베이터가 움직이고, 수도꼭지에서 물이 나오게 하는 동적인 시스템입니다.
  • 사용자가 버튼을 클릭했을 때 알림창이 뜨거나, 메뉴가 나타나고, 데이터를 실시간으로 업데이트하는 역할을 합니다.

---

한눈에 보는 역할 분담 리스트

이 기술들이 웹페이지 내에서 구체적으로 어떤 일을 담당하는지 리스트로 정리했습니다.

• HTML (Structure)
  • 텍스트의 의미 부여 (제목, 문단, 목록)
  • 이미지 및 비디오 삽입
  • 다른 페이지로 이동하는 링크 생성
• CSS (Presentation)
  • 배경색, 글꼴 스타일 설정
  • 요소들의 간격 및 배치 조정
  • 화면 크기에 따라 변하는 반응형 디자인
• JavaScript (Behavior)
  • 팝업창 및 모달창 제어
  • 입력 양식의 유효성 검사 (아이디 중복 체크 등)
  • 서버에서 데이터를 불러와 화면에 뿌려주기

---

실무자의 시선

실무에서는 이 세 가지를 명확히 분리하여 코드를 작성하는 것이 원칙입니다.

만약 HTML 코드 안에 디자인 요소(CSS)가 섞여 있거나, JavaScript 기능이 복잡하게 얽혀 있다면 나중에 집 전체를 수리(유지보수)하기가 매우 까다로워지기 때문입니다.

• 구조의 견고함: 인테리어(CSS)가 없어도 건물의 뼈대(HTML)만 보고 이것이 어떤 용도의 방인지 알 수 있어야 합니다.
• 성능의 최적화: 너무 화려한 장식(CSS)이나 복잡한 기계 장치(JavaScript)는 건물을 무겁게 만들어 사용자가 들어오는 속도를 늦출 수 있습니다.

좋은 개발자는 튼튼한 뼈대를 세우고(HTML), 보기 좋은 공간을 꾸미며(CSS), 사용자가 편리하게 이용할 수 있는 기능(JavaScript)을 조화롭게 배치하는 설계자와 같습니다.

---

웹의 기본 삼요소에 대해 비유를 통해 알아보았습니다.

---