웹사이트는 어떻게 만들어질까? — HTML, CSS, JS 쉬운 설명

웹사이트 = 집짓기

인터넷에서 매일 수십 개의 웹사이트를 방문하지만, "이게 어떻게 만들어진 걸까?" 하고 궁금해하신 적 있으신가요? 저도 코딩을 배우기 전에는 전혀 몰랐습니다. 마법 같았죠.

사실 웹사이트는 딱 3가지 기술로 만들어집니다. 집을 짓는 것에 비유해서 설명해볼게요.

HTML — 집의 구조 (뼈대)

HTML은 Hyper Text Markup Language의 약자입니다. 이름은 어려워 보이지만 하는 일은 간단합니다. 웹페이지의 구조와 내용을 담당합니다.

집으로 치면 기둥, 벽, 지붕, 방, 문 같은 구조물입니다. "여기는 제목이야", "여기는 문단이야", "여기에 이미지를 넣어" 하고 알려주는 역할을 합니다.

예를 들어, 이 글의 제목도 HTML로 이렇게 표현됩니다:

<h2>HTML — 집의 구조 (뼈대)</h2>

보시다시피 꺽쇠 괄호(< >)로 감싸는 게 HTML의 특징입니다. 이런 것을 "태그"라고 부릅니다.

CSS — 인테리어 (디자인)

CSS는 Cascading Style Sheets의 약자입니다. 웹페이지의 디자인과 레이아웃을 담당합니다.

집으로 치면 벽지 색깔, 바닥재, 조명, 가구 배치 같은 것이죠. 같은 구조의 집이라도 인테리어에 따라 완전히 다른 느낌을 줄 수 있는 것처럼, CSS로 웹사이트의 분위기를 완전히 바꿀 수 있습니다.

예를 들면:

• 글자 색깔을 파란색으로 바꾸기
• 배경에 그라데이션 넣기
• 버튼을 동그랗게 만들기
• 모바일에서는 한 줄, PC에서는 세 줄로 배치하기

지금 보고 계신 이 블로그의 색상, 폰트, 레이아웃 모두 CSS로 만든 것입니다.

JavaScript — 기능과 동작 (전기/수도)

JavaScript는 웹페이지에 동작과 기능을 추가합니다. 집으로 치면 전기, 수도, 가스 같은 것입니다. 스위치를 누르면 불이 켜지고, 수도꼭지를 틀면 물이 나오는 것처럼요.

웹사이트에서 JavaScript가 하는 일의 예시:

• 버튼을 클릭하면 메뉴가 열리고 닫히기
• 스크롤을 내리면 새로운 글이 자동으로 로딩되기
• 검색어를 입력하면 실시간으로 결과가 바뀌기
• 다크 모드와 라이트 모드 전환하기

JavaScript 없이도 웹페이지는 존재할 수 있지만, 움직임이 없는 정적인 페이지만 가능합니다. 요즘 웹사이트들의 부드러운 애니메이션과 인터랙션은 대부분 JavaScript 덕분입니다.

세 가지가 합쳐지면?

정리하면 이렇습니다:

• HTML = 무엇을 보여줄지 (구조)
• CSS = 어떻게 보여줄지 (디자인)
• JavaScript = 어떻게 동작할지 (기능)

이 세 가지만 알면 기본적인 웹사이트를 만들 수 있습니다. 실제로 전 세계 모든 웹사이트는 이 세 가지 기술을 기반으로 하고 있습니다. 네이버도, 구글도, 유튜브도 마찬가지입니다.

그럼 어디서부터 시작할까?

웹 개발에 관심이 생기셨다면, 이 순서로 시작하시는 것을 추천합니다:

• 1단계: HTML로 간단한 자기소개 페이지 만들기
• 2단계: CSS로 예쁘게 꾸며보기
• 3단계: JavaScript로 간단한 기능 추가하기

다음 글에서는 실제로 VS Code를 설치하고 첫 번째 코드를 실행하는 방법을 단계별로 알려드리겠습니다.