1-2 웹페이지를 구성하는 세 친구
라이프오브파이
VIBE CODING.
카테고리
- 바이브코딩
2장. 웹페이지를 구성하는 세 친구
HTML, CSS, JavaScript
웹페이지를 만드는 '세 친구들'
여러분이 PC나 모바일 웹 브라우저를 통해 자주 접속하는 웹서비스가 있을 겁니다. 뉴스 포털, 온라인 커뮤니티, 혹은 커피 주문 웹서비스일 수도 있죠. 그런데 그 화면 속 버튼, 사진, 글자 하나하나가 어떻게 만들어지는지 생각해본 적 있나요?
여러분이 보시는 웹페이지는 단순한 그림이 아닙니다. 그 안에는 수많은 명령어와 언어가 어우러져 살아 움직이고 있습니다. 그리고 그 중심에는 언제나 세 명의 친구가 있습니다.
웹의 세 친구 ― HTML, CSS, JavaScript.
이 셋은 브라우저 안에서 각자의 역할을 수행하며 우리 눈에 익숙한 웹페이지를 만들어냅니다. 각기 서로 다른 일을 하지만, 하나라도 빠지면 지금의 웹페이지는 제대로 동작하기 어렵습니다. 그렇기 때문에 이 요소를 이해하는 순간, '웹사이트'에서 표현되는 화면이 단순한 화면이 아니라 하나의 정교한 시스템으로 느껴질 겁니다. 이 세 요소는 각각의 고유한 문법을 가지고 있는 서로 다른 언어들이지만 같이 어우러져 하나의 완성된 웹페이지로 표현됩니다.
HTML ― 화면의 뼈대를 세우는 건축가
먼저, HTML(HyperText Markup Language) 은 웹페이지의 '뼈대'를 담당합니다. 이 언어는 웹페이지의 구조를 짜는 건축가와 같습니다. 건축가가 건물을 설계할 때 방의 위치, 문과 창문의 크기, 층의 구조를 도면에 그리듯, HTML은 화면의 각 부분이 어디에 있고, 어떤 역할을 하는지 정의합니다.
예를 들어,
예를 들어,
•
제목은 <h1>
•
단락은 <p>
•
이미지 영역은 <img>
•
버튼은 <button>
이렇게 HTML은 각 요소를 구분하는 태그(tag) 를 사용해 구조를 만듭니다. 이러한 태그들은 다음과 같이 하나의 구조화된 html 문서로 표현될 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>나의 첫 번째 웹페이지</title>
</head>
<body>
<!-- 제목: 건물의 간판 -->
<h1>안녕하세요! 이것은 나의 첫 웹페이지입니다.</h1>
<!-- 단락: 본문 내용 -->
<p>
HTML은 웹페이지의 구조를 만드는 언어입니다.
여기에서는 제목, 문단, 이미지, 버튼 같은 요소를 태그로 구분해 배치합니다.
</p>
<!-- 버튼: 사용자가 클릭할 수 있는 인터페이스 요소 -->
<button>클릭해보세요</button>
</body>
</html>index.html 을 텍스트 편집기에서 생성하신 뒤 위 코드를 붙여넣어 실습해보세요.
하지만 이 상태의 HTML 코드는 마치 콘크리트로만 만들어진 회색 건물 같아서 브라우저에서 실행하면 다음과 같이 나타납니다.
구조적인 형태는 있지만, 아직 색깔도, 스타일도 없습니다. 그래서 이 뼈대 위에 CSS라는 옷이 필요합니다.
CSS ― 웹페이지에 옷을 입히는 디자이너
CSS(Cascading Style Sheets) 는 웹페이지의 디자이너이자 스타일리스트입니다. HTML이 만든 구조 위에 색을 입히고, 글꼴을 정하고, 여백과 배치를 조정하죠.
예를 들어, 다음과 같은 명령이 있습니다.
예를 들어, 다음과 같은 명령이 있습니다.
h1 {
color: navy;
font-size: 28px;
text-align: center;
}이 짭은 CSS 코드로 h1 태그가 사용된 제목은 짙은 남색 글자에 크고 중앙 정렬된 모양을 갖게 됩니다. 이러한 스타일시트를 좀 더 추가하여 앞선 html 코드에 반영하면 다음과 같은 디자인으로 재탄생 됩니다.
이러한 디자인 변화는 앞서 소개되었던 html 소스는 변화하지 않고, 스타일 태그 <style></style> 내부에 추가된 CSS 코드가 동작하며 만든 결과입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>나의 첫 번째 웹페이지</title>
<!-- 추가된 CSS 코드 영역 -->
<style>
/* CSS - 웹페이지에 옷을 입히는 디자이너 */
/* 전체 페이지 스타일 */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
line-height: 1.6;
}
/* 제목 스타일 - 짙은 남색 글자에 크고 중앙 정렬 */
h1 {
color: navy;
font-size: 28px;
text-align: center;
margin-bottom: 30px;
padding: 20px;
background-color: #e8f4f8;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* 단락 스타일 */
p {
color: #333;
font-size: 16px;
max-width: 800px;
margin: 20px auto;
padding: 15px;
background-color: white;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* 이미지 스타일 */
img {
display: block;
margin: 30px auto;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.05);
}
/* 버튼 스타일 - 웹의 패션 디자이너 */
button {
display: block;
margin: 30px auto;
padding: 12px 30px;
font-size: 16px;
font-weight: bold;
color: white;
background-color: navy;
border: none;
border-radius: 25px;
cursor: pointer;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
button:hover {
background-color: #001a66;
transform: translateY(-2px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
button:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<!-- 제목: 건물의 간판 -->
<h1>안녕하세요! 이것은 나의 첫 웹페이지입니다.</h1>
<!-- 단락: 본문 내용 -->
<p>
HTML은 웹페이지의 구조를 만드는 언어입니다.
여기에서는 제목, 문단, 이미지, 버튼 같은 요소를 태그로 구분해 배치합니다.
</p>
<!-- 버튼: 사용자가 클릭할 수 있는 인터페이스 요소 -->
<button>클릭해보세요</button>
</body>
</html>이렇듯 CSS는 웹의 감각을 책임집니다. 웹사이트의 개성이 느껴지는 이유, 어떤 곳은 미니멀하고, 어떤 곳은 화려한 이유, 그 모든 것은 CSS의 결과입니다. 그래서 CSS는 종종 '웹의 패션 디자이너'라고 불리기도 하죠.
HTML이 "무엇을 보여줄지"를 정한다면, CSS는 "어떻게 보여줄지"를 결정합니다. 이러한 CSS 코드는 html 파일 내부에 존재할수도 있으며, 자바스크립트와 연동되어 사용되거나 별도 CSS 파일로 생성되어 사용될 수도 있습니다. 하지만 화면이 보기 좋다고 해서 사용자와의 상호작용이 완성된 건 아닙니다. 버튼을 눌렀을 때 반응이 있어야 진짜 동작하는 프로그램 처럼 느껴집니다. 그 움직임을 담당하는 친구가 바로 다음 주인공입니다.
JavaScript ― 웹에 생명을 불어넣는 마술사
JavaScript(JS) 는 웹페이지의 행동을 담당하는 언어입니다. 이 언어가 들어오면 웹페이지는 단순한 '정보의 벽보'에서
'움직이는 인터랙티브 공간'으로 바뀝니다. 버튼을 누르면 팝업이 뜨고, 스크롤하면 이미지가 부드럽게 나타나며, 입력창에 글자를 적으면 바로 결과가 뜨는 등의 효과는 거의 대부분 JavaScript의 작품입니다.
'움직이는 인터랙티브 공간'으로 바뀝니다. 버튼을 누르면 팝업이 뜨고, 스크롤하면 이미지가 부드럽게 나타나며, 입력창에 글자를 적으면 바로 결과가 뜨는 등의 효과는 거의 대부분 JavaScript의 작품입니다.
JavaScript는 HTML과 CSS 위에서 작동합니다. 예를 들어, HTML이 <button>을 만들고 CSS가 그 버튼을 예쁘게 꾸몄다면, JavaScript는 그 버튼이 "눌렸을 때 무엇을 할지" 결정하죠.
document.querySelector("button").addEventListener("click", function() {
alert("버튼이 눌렸습니다!");
});이러한 자바스크립트 코드는 다음과 같이 html에 삽입이 되어 사용될 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>나의 첫 번째 웹페이지</title>
<!-- 추가된 CSS 코드 영역 -->
<style>
/* CSS - 웹페이지에 옷을 입히는 디자이너 */
/* 전체 페이지 스타일 */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
line-height: 1.6;
}
/* 제목 스타일 - 짙은 남색 글자에 크고 중앙 정렬 */
h1 {
color: navy;
font-size: 28px;
text-align: center;
margin-bottom: 30px;
padding: 20px;
background-color: #e8f4f8;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* 단락 스타일 */
p {
color: #333;
font-size: 16px;
max-width: 800px;
margin: 20px auto;
padding: 15px;
background-color: white;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* 이미지 스타일 */
img {
display: block;
margin: 30px auto;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.05);
}
/* 버튼 스타일 - 웹의 패션 디자이너 */
button {
display: block;
margin: 30px auto;
padding: 12px 30px;
font-size: 16px;
font-weight: bold;
color: white;
background-color: navy;
border: none;
border-radius: 25px;
cursor: pointer;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
button:hover {
background-color: #001a66;
transform: translateY(-2px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
button:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<!-- 제목: 건물의 간판 -->
<h1>안녕하세요! 이것은 나의 첫 웹페이지입니다.</h1>
<!-- 단락: 본문 내용 -->
<p>
HTML은 웹페이지의 구조를 만드는 언어입니다.
여기에서는 제목, 문단, 이미지, 버튼 같은 요소를 태그로 구분해 배치합니다.
</p>
<!-- 버튼: 사용자가 클릭할 수 있는 인터페이스 요소 -->
<button>클릭해보세요</button>
<!-- 추가된 JavaScript 코드 영역 -->
<script>
// JavaScript - 웹페이지에 동작을 부여하는 프로그래머
// 버튼 요소를 찾아서 클릭 이벤트 리스너를 추가합니다
document.querySelector("button").addEventListener("click", function() {
alert("버튼이 눌렸습니다!");
});
</script>
</body>
</html>이렇게 추가된 자바스크립트 코드 덕분에 웹페이지의 버튼 요소를 클릭하면, 다음과 같은 버튼 액션이 동작하게 됩니다.
이처럼 JS는 사용자와 웹이 대화할 수 있도록 만들어줍니다. 그래서 사람들은 종종 JavaScript를 "웹에 생명을 불어넣는 언어"라고 부릅니다.
웹 브라우저 ― 세 친구의 오케스트라 지휘자
이제 웹페이지를 표현하는 요소 중 가장 중요한 마지막 퍼즐이 남았습니다. 이 세 언어를 실제로 해석하고 실행하는 주체, 바로 브라우저입니다.
웹 브라우저(크롬, 사파리, 엣지 등)는 HTML, CSS, JavaScript 세 언어를 차례로 읽고, 그 결과를 눈앞의 화면으로 그려냅니다. 우리가 사용하는 웹 브라우저가 앞서 설명한 다양한 코드들을 해석하고 표현해내는 동시에 구동을 시키는 하나의 플랫폼 역할을 하죠. 따라서 웹 브라우저 내부에서는 이런 일이 벌어집니다.
•
HTML 파일을 읽고, 문서 구조를 분석(*DOM 트리 생성)
•
CSS를 해석해서 각 요소의 모양과 스타일 결정
•
JavaScript를 실행하여 화면의 변화를 실시간으로 반영
이 과정은 눈 깜짝할 사이에 일어납니다. 사용자는 단지 '웹페이지가 열렸다'고 느끼지만, 사실 그 짧은 순간 동안 브라우저는 수천 줄의 코드를 읽고 세 언어를 모두 브라우저의 화면에 표시하기 위한 노력을 다합니다.
비유하자면 웹은 하나의 거대한 오케스트라이고, 브라우저는 그 지휘자입니다. HTML은 악보를, CSS는 악기의 음색을 JavaScript는 리듬과 움직임을 담당하며 이 세 요소가 함께 어우러질 때 비로소 우리가 아는 '웹페이지'가 완성됩니다.
*DOM 트리란? - 브라우저가 HTML을 이해하는 방법
웹 브라우저는 HTML 파일을 읽을 때, 그냥 텍스트로 보지 않습니다. 대신 화면에 표시되는 요소들을 "가계도"처럼 정리된 구조로 변환합니다. 이것이 바로 DOM 트리(Document Object Model Tree)입니다. 예를 들어, 다음과 같은 HTML 코드가 있다고 해봅시다.
<body>
<h1>안녕하세요! 이것은 나의 첫 웹페이지입니다.</h1>
<p>HTML은 웹페이지의 구조를 만드는 언어입니다...</p>
<button>클릭해보세요</button>
</body>브라우저는 이것을 다음과 같은 나무 구조로 이해합니다.
body (부모)
├─ h1 (첫째 자식) → "안녕하세요! 이것은 나의 첫 웹페이지입니다."
├─ p (둘째 자식) → "HTML은 웹페이지의 구조를 만드는 언어입니다..."
└─ button (셋째 자식) → "클릭해보세요"그리고 우리가 앞서 작성한 JavaScript가 document.querySelector("button") 명령으로 버튼을 찾을 수 있는 이유가 바로 이 DOM 트리 덕분입니다.
document.querySelector("button").addEventListener("click", function() {
alert("버튼이 눌렸습니다!");
});브라우저는 HTML을 불러오며 DOM 트리 구조로 만들어두었기 때문에 다음과 같은 순서로 빠르게 기능을 실행할 수 있습니다.
HTML 파일 로드
↓
브라우저가 DOM 트리 생성 (body → h1, p, button)
↓
JavaScript 실행: "button 찾기" → DOM 트리 검색 → 발견!
↓
클릭 이벤트 리스너 등록
↓
사용자 클릭 → 알림창 표시!
↓
브라우저가 DOM 트리 생성 (body → h1, p, button)
↓
JavaScript 실행: "button 찾기" → DOM 트리 검색 → 발견!
↓
클릭 이벤트 리스너 등록
↓
사용자 클릭 → 알림창 표시!
이러한 구조 덕에 이 모든 작업이 가능해집니다. 설명이 다소 어렵더라도, 너무 어려워하실 필요는 없습니다. 각 웹페이지는 이렇듯 html, CSS, Javascript의 협업으로 표시된다는 정도만 이해해도 충분합니다.
웹페이지 표시 방식
정리하자면 '웹페이지'가 표시되는 것은 결국 앞서 언급한 세 요소의 협력으로 이뤄집니다. 건축으로 비유하자면,
•
HTML은 기본적인 집의 뼈대를 구축하고,
•
CSS는 인테리어를 담당하며,
•
JavaScript는 전기와 수도
등의 실제 기능을 담당합니다.
그리고 실제로도 브라우저는 위 나열된 순서대로 각각의 요소를 읽고 화면에 표시하도록 동작합니다. 집을 지을 때 뼈대와 인테리어를 먼저 완성하고, 마지막에 전기와 수도를 연결하듯이, 웹페이지도 구조와 디자인을 먼저 보여주고 동작을 나중에 추가하는 것이 자연스러운 순서이기 때문입니다.
그리고 실제로도 브라우저는 위 나열된 순서대로 각각의 요소를 읽고 화면에 표시하도록 동작합니다. 집을 지을 때 뼈대와 인테리어를 먼저 완성하고, 마지막에 전기와 수도를 연결하듯이, 웹페이지도 구조와 디자인을 먼저 보여주고 동작을 나중에 추가하는 것이 자연스러운 순서이기 때문입니다.
결과적으로 웹 브라우저는 앞에서 간략히 설명한대로 각 요소들을 엮어내어 화면에 그리며, 시각화된 실체로서의 서비스를 제공합니다. 즉, 프론트엔드를 이해한다는 것은 브라우저에서 표시되는 웹페이지의 동작 원리를 이해한다는 것을 의미합니다. 이러한 기본적인 이해가 바탕이 된다면 보다 효과적인 프론트엔드 바이브 코딩이 가능해집니다.
다음 장에서는 이 세 요소 중에서도 특히 '움직임과 변화'를 담당하는 자바스크립트라는 언어에 대해 알아볼 예정입니다. 이 언어가 어떻게 웹을 '살아 움직이게' 만드는지, 그리고 리액트(React) 같은 현대적인 도구가 그 원리를 어떻게 확장해나가는지를 함께 살펴보겠습니다.
라이프오브파이
Subscribe to 'LIFEOFPI'
Subscribe to my site to be the first to receive notifications and emails about the latest updates, including new posts.
Join Slashpage and subscribe to 'LIFEOFPI'!
Join Slashpage and subscribe to 'LIFEOFPI'!
