HTML, CSS, 자바스크립트 소개
첫 번째 장에서 웹이 어떻게 작동하는지, 그리고 웹이 어떤 과정을 거쳐 오늘날에 이르렀는지 살펴보았습니다. 이제 우리는 웹 개발의 가장 기본적인 재료이자 도구라고 할 수 있는 세 가지 핵심 언어, 바로 HTML, CSS, 그리고 자바스크립트에 대해 깊이 있는 이야기를 나누어 볼 차례입니다. 이 세 가지 언어는 마치 하나의 팀처럼 협력하여 우리가 매일 만나는 웹 페이지를 만들어냅니다.
웹 페이지를 하나의 '건물'에 비유하여 설명한다면, 각 언어가 어떤 역할을 하는지 더욱 쉽게 이해하실 수 있을 것입니다.
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>위 코드를 웹 브라우저에서 열면, '환영합니다!'라는 큰 제목, 그 아래 문단, 그리고 '로고 이미지'와 '구글로 이동' 링크가 표시될 것입니다. 아직은 아무런 스타일도 적용되지 않은 매우 기본적인 모습일 것입니다. 이는 마치 건물의 뼈대만 완성된 상태와 같습니다.
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, 자바스크립트 이 세 가지 언어는 웹 개발의 근간을 이룹니다. 이들의 역할을 명확히 이해하고 각각의 강점을 활용하는 것이 효율적이고 멋진 웹 페이지를 만드는 첫걸음입니다. 앞으로 이 책을 통해 각 언어에 대해 더욱 깊이 파고들고, 실제 웹 페이지를 만들어보는 실습을 진행하며 여러분의 웹 개발 능력을 키워나갈 것입니다.