HTML, CSS, 자바스크립트 소개
웹 개발을 처음 배울 때 가장 헷갈리는 질문은 결국 HTML, CSS, JavaScript 중 무엇이 가장 중요한가?입니다.
처음에는 셋을 따로 배우다 보니 역할이 겹쳐 보이고, 어느 순간부터는 전부 비슷한 것처럼 느껴지기도 합니다.
하지만 실제 프로젝트에서는 이 셋의 경계를 명확히 잡는 팀일수록 코드가 오래 버티고 협업도 수월합니다.
구조를 책임지는 코드와, 표현을 책임지는 코드와, 동작을 책임지는 코드를 섞어 쓰기 시작하면 수정 비용이 빠르게 늘어나기 때문입니다.
이 절에서는 세 언어를 건물 비유로만 가볍게 소개하는 데서 끝내지 않고, 실무에서 왜 경계를 지켜야 하는지까지 함께 설명합니다.
읽고 나면 이 변경은 어디에서 처리하는 것이 맞는가를 스스로 판단할 수 있는 기준을 얻게 됩니다.
HTML: 웹 페이지의 뼈대를 세우는 언어
HTML (HyperText Markup Language)은 웹 페이지의 구조와 내용을 담당하는 언어입니다. 마크업(Markup)이라는 말 그대로, 정보를 표시하고 구조화하는 데 쓰입니다.
여러분이 웹 페이지에서 보는 텍스트, 이미지, 버튼, 링크는 모두 HTML이라는 설계도에 따라 배치되고 정의됩니다.
건물을 짓는 과정에 비유하면 HTML은 골조와 벽을 세우는 역할입니다. 기둥을 어디에 둘지, 방을 어떻게 나눌지, 문을 어디에 낼지를 정하는 단계죠. 즉, HTML의 핵심은 화면의 모양보다 먼저 의미 있는 구조를 만드는 데 있습니다.
-
HTML의 주요 특징
- 태그(Tag) 기반: HTML은
<p>단락</p>,<h1>제목</h1>,<img>이미지</img>와 같이 꺾쇠 괄호(<>)로 둘러싸인 태그를 사용하여 문서의 구조와 의미를 정의합니다. 각 태그는 특정한 의미와 역할을 가집니다. - 의미론적 구조: 최신 HTML(HTML5)은 내용을 의미 단위로 구조화할 수 있도록 다양한 태그를 제공합니다. 예를 들어
<header>,<nav>,<article>,<footer>를 사용하면 각 영역의 역할이 분명해집니다. 이는 검색 엔진 최적화(SEO)에도 긍정적인 영향을 줍니다. - 웹 접근성: HTML은 웹 콘텐츠가 장애인이나 노약자 등 정보 취약 계층을 포함한 모든 사용자가 동등하게 접근하고 이용할 수 있도록 하는 웹 접근성의 기반이 됩니다. 올바른 HTML 구조는 스크린 리더와 같은 보조 기술이 웹 페이지의 내용을 정확하게 해석하고 전달할 수 있도록 돕습니다.
- 태그(Tag) 기반: HTML은
간단한 HTML 코드의 예시를 살펴보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나 혼자 웹 개발</title>
</head>
<body>
<h1>환영합니다!</h1>
<p>이것은 첫 번째 HTML 페이지입니다.</p>
<img src="logo.png" alt="로고 이미지">
<a href="https://www.google.com">구글로 이동</a>
</body>
</html>위 코드를 웹 브라우저에서 열면, 환영합니다!라는 큰 제목, 그 아래 문단, 그리고 로고 이미지와 구글로 이동 링크가 표시될 것입니다. 아직은 아무런 스타일도 적용되지 않은 매우 기본적인 모습일 것입니다. 이는 마치 건물의 뼈대만 완성된 상태와 같습니다.
이 단계에서 중요한 포인트는 보기에 단순해 보여도 의미 구조는 이미 완성되어야 한다는 점입니다.
처음부터 의미 없는 div만 남발하면 접근성, 검색 노출, 유지보수에서 비용을 나중에 크게 치르게 됩니다.
즉 HTML은 디자인 이전에 정보 구조를 설계하는 언어라는 관점을 반드시 잡아두는 것이 좋습니다.
CSS: 웹 페이지를 아름답게 꾸미는 언어
HTML이 웹 페이지의 뼈대를 세웠다면, CSS (Cascading Style Sheets)는 이 뼈대에 아름다운 옷을 입히고 디자인을 담당하는 언어입니다. HTML로 만들어진 내용들을 원하는 색상으로 칠하고, 적절한 위치에 배치하며, 시각적으로 매력적인 형태로 꾸미는 모든 작업이 CSS의 역할입니다.
건물에 비유하자면, CSS는 건물의 내외부를 디자인하고 장식하는 역할을 합니다. 벽지를 바르고, 페인트를 칠하며, 창문의 모양을 내고, 가구를 배치하는 모든 행위가 CSS에 해당합니다. 동일한 구조의 건물이라도 어떤 인테리어를 하느냐에 따라 전혀 다른 분위기를 연출할 수 있듯이, CSS는 웹 페이지의 인상을 결정하는 중요한 요소입니다.
-
CSS의 주요 특징
- 스타일 정의: 텍스트의 크기, 색상, 글꼴, 배경 이미지, 요소의 여백, 배치 등 웹 페이지의 시각적인 모든 요소를 정의합니다.
- 선택자와 속성: HTML의 특정 요소를 선택자(Selector)로 지정하고, 해당 요소에 적용할 속성(Property)과 값(Value)을 정의하는 방식으로 작동합니다. 예를 들어,
p { color: blue; font-size: 16px; }는 모든<p>태그의 글자색을 파란색으로, 글자 크기를 16px로 설정하라는 의미입니다. - 반응형 디자인: 다양한 기기(데스크톱, 태블릿, 스마트폰)의 화면 크기에 맞춰 웹 페이지의 레이아웃과 스타일을 자동으로 조절하는 반응형 웹 디자인 구현에 필수적인 언어입니다.
앞서 작성한 HTML 코드에 CSS를 적용해 보겠습니다. <head> 태그 안에 <style> 태그를 추가하여 CSS 코드를 작성할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나 혼자 웹 개발</title>
<style> /* 여기에 CSS 코드를 작성합니다 */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f4f4;
color: #333;
text-align: center;
padding-top: 50px;
}
h1 {
color: #0056b3;
font-size: 3em;
margin-bottom: 20px;
}
p {
font-size: 1.2em;
line-height: 1.6;
margin-bottom: 30px;
}
img {
max-width: 200px;
height: auto;
border-radius: 10px;
box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
margin-bottom: 20px;
}
a {
color: #28a745;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>환영합니다!</h1>
<p>이것은 첫 번째 HTML 페이지입니다.</p>
<img src="logo.png" alt="로고 이미지">
<a href="https://www.google.com">구글로 이동</a>
</body>
</html>이제 웹 페이지는 훨씬 더 보기 좋게 변했을 것입니다. 배경색이 바뀌고, 글꼴과 글자 크기가 달라지며, 이미지에는 그림자가 생겼습니다. 이처럼 CSS는 웹 페이지에 생기를 불어넣는 중요한 역할을 담당합니다.
JavaScript: 웹 페이지에 생명을 넣는 언어
HTML과 CSS가 각각 웹 페이지의 구조와 디자인을 담당했다면, 자바스크립트(JavaScript)는 웹 페이지에 동적인 기능과 상호작용성을 부여하는 언어입니다. 사용자의 행동에 반응하여 웹 페이지의 내용을 변경하거나, 애니메이션 효과를 주거나, 복잡한 계산을 수행하는 등 정적인 웹 페이지를 살아 움직이는 서비스로 만드는 핵심 역할을 합니다.
건물에 비유하자면, 자바스크립트는 건물에 움직이는 엘리베이터, 자동문, 불을 켜고 끄는 스위치, 그리고 온도 조절 장치와 같은 기능을 추가하는 것입니다. 사용자가 버튼을 누르면 문이 열리고, 특정 시간에 조명이 켜지는 등, 건물과 사용자가 상호작용할 수 있도록 만드는 것이죠.
-
자바스크립트의 주요 특징
- 상호작용: 사용자의 클릭, 마우스 움직임, 키보드 입력 등 다양한 이벤트에 반응하여 동적인 웹 페이지를 만듭니다.
- DOM 조작: 자바스크립트는 DOM(Document Object Model)이라는 개념을 통해 HTML 요소를 선택하고, 내용을 변경하거나, 새로운 요소를 추가/삭제하는 등 웹 페이지의 구조와 내용을 동적으로 조작할 수 있습니다.
- 비동기 통신: 서버와 데이터를 주고받아 웹 페이지를 새로고침하지 않고도 콘텐츠를 업데이트할 수 있는 AJAX(Asynchronous JavaScript and XML)와 같은 기술을 가능하게 합니다. 이를 통해 더욱 부드럽고 빠른 사용자 경험을 제공할 수 있습니다.
- 다양한 활용: 웹 브라우저뿐만 아니라 서버 개발(Node.js), 모바일 앱 개발(React Native), 데스크톱 앱 개발(Electron) 등 다양한 분야에서 활용되는 범용적인 언어입니다.
다시 앞서 작성한 HTML 코드에 자바스크립트를 추가하여 간단한 상호작용을 구현해 봅시다. 환영합니다! 제목을 클릭하면 문구가 바뀌도록 만들어 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나 혼자 웹 개발</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f4f4;
color: #333;
text-align: center;
padding-top: 50px;
}
h1 {
color: #0056b3;
font-size: 3em;
margin-bottom: 20px;
cursor: pointer; /* 클릭 가능하다는 시각적 힌트 제공 */
}
h1:hover {
opacity: 0.8; /* 마우스 오버 시 약간 투명하게 */
}
p {
font-size: 1.2em;
line-height: 1.6;
margin-bottom: 30px;
}
img {
max-width: 200px;
height: auto;
border-radius: 10px;
box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
margin-bottom: 20px;
}
a {
color: #28a745;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1 id="mainTitle">환영합니다!</h1> <p>이것은 첫 번째 HTML 페이지입니다.</p>
<img src="logo.png" alt="로고 이미지">
<a href="https://www.google.com">구글로 이동</a>
<script> /* 여기에 자바스크립트 코드를 작성합니다 */
// 'mainTitle'이라는 ID를 가진 요소를 선택합니다.
const titleElement = document.getElementById('mainTitle');
// 선택된 요소에 클릭 이벤트 리스너를 추가합니다.
titleElement.addEventListener('click', function() {
// 클릭될 때마다 텍스트를 변경합니다.
if (titleElement.textContent === '환영합니다!') {
titleElement.textContent = '클릭해 주셔서 감사합니다!';
} else {
titleElement.textContent = '다시 환영합니다!';
}
});
</script>
</body>
</html>이제 웹 페이지의 환영합니다! 제목을 클릭할 때마다 텍스트가 변경되는 것을 확인할 수 있습니다. 이것이 바로 자바스크립트가 웹 페이지에 부여하는 생명력의 아주 작은 예시입니다.
HTML, CSS, 자바스크립트 이 세 가지 언어는 웹 개발의 근간을 이룹니다.이들의 역할을 명확히 이해하고 각각의 강점을 활용하는 것이 효율적이고 멋진 웹 페이지를 만드는 첫걸음입니다. 앞으로 이 책을 통해 각 언어에 대해 더욱 깊이 파고들고, 실제 웹 페이지를 만들어보는 실습을 진행하며 여러분의 웹 개발 능력을 키워나갈 것입니다.
추가로 기억할 점은, 자바스크립트가 강력하다고 해서 모든 문제를 스크립트로 해결하려고 하면 오히려 구조가 흐려진다는 사실입니다.
표현은 CSS, 구조는 HTML, 상호작용은 JavaScript라는 기본 분리를 지키는 편이 테스트와 디버깅에 훨씬 유리합니다.
결국 좋은 웹 코드는 기술을 많이 쓰는 코드가 아니라, 책임이 명확하게 나뉜 코드입니다.