# 웹 개발 소설: 4단계
"자, 오늘은 실제로 간단한 웹페이지를 만들어볼 거예요," 선생님이 말했습니다. "마법사가 되기 위해서는 직접 주문을 외워보는 것이 중요하니까요."
선생님은 빈 양피지를 꺼냈습니다. 이것은 우리가 코드를 작성할 캔버스였습니다.
"가장 먼저 해야 할 일은 HTML 문서의 기본 구조를 만드는 거예요. 이건 마치 성의 기초와 뼈대를 세우는 것과 같아요."
선생님은 양피지에 첫 번째 주문을 작성했습니다:
```html
<!DOCTYPE html>
<html>
<head>
<title>나의 첫 웹페이지</title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
```
"이 코드를 한 줄씩 살펴볼게요," 선생님이 설명했습니다.
"<!DOCTYPE html> (이것은 HTML5 문서라고 선언)
<html> (HTML 문서의 시작)
<head> (머리말 부분 시작, 여기에는 웹페이지에 대한 정보가 들어가요)
<title>나의 첫 웹페이지</title> (브라우저 탭에 표시될 제목)
<meta charset="UTF-8"> (한글 같은 특수 문자를 제대로 표시하기 위한 설정)
</head> (머리말 부분 끝)
<body> (본문 시작, 실제로 화면에 보이는 내용이 여기에 들어가요)
</body> (본문 끝)
</html> (HTML 문서의 끝)"
선생님은 계속해서 body 태그 안에 내용을 추가했습니다:
```html
<body>
<header>
<h1>마법의 웹 세계에 오신 것을 환영합니다</h1>
<nav>
<ul>
<li><a href="#소개">소개</a></li>
<li><a href="#마법주문">마법 주문</a></li>
<li><a href="#연락처">연락처</a></li>
</ul>
</nav>
</header>
<section id="소개">
<h2>소개</h2>
<p>이 페이지는 웹 마법을 배우는 초보 마법사를 위한 곳입니다.</p>
<img src="wizard.jpg" alt="마법사 이미지">
</section>
<section id="마법주문">
<h2>유용한 마법 주문</h2>
<ol>
<li>HTML - 구조를 만드는 주문</li>
<li>CSS - 스타일을 입히는 주문</li>
<li>JavaScript - 동작을 부여하는 주문</li>
</ol>
</section>
<section id="연락처">
<h2>연락처</h2>
<form>
<label for="name">이름:</label>
<input type="text" id="name" name="name"><br>
<label for="email">이메일:</label>
<input type="email" id="email" name="email"><br>
<label for="message">메시지:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br>
<button type="submit">전송</button>
</form>
</section>
<footer>
<p>© 2025 웹 마법 학교. 모든 권리 보유.</p>
</footer>
</body>
```
"와, 엄청 많이 추가했네요! 이게 다 무슨 의미인지 하나씩 알아볼게요," 선생님이 미소지었습니다.
"<header> (페이지의 머리글 부분)에는 <h1> (가장 큰 제목)과 <nav> (탐색 메뉴)가 있어요. <nav> 안에는 <ul> (순서 없는 목록)과 <li> (목록 항목)들이 있고, 각 항목에는 <a href="#소개"> (페이지 내 특정 부분으로 이동하는 링크)가 있답니다.
그 다음으로는 세 개의 <section> (내용 구역)이 있어요. 각 section에는 id 속성이 있어서 링크가 이 부분으로 이동할 수 있게 해줘요. 각 section에는 <h2> (두 번째로 큰 제목)와 다양한 내용이 있어요.
'소개' section에는 <p> (문단)과 <img> (이미지)가 있고, '마법주문' section에는 <ol> (순서 있는 목록)이 있어요.
'연락처' section에는 <form> (양식)이 있는데, 이건 사용자가 정보를 입력할 수 있는 부분이에요. <label> (라벨)은 각 입력 필드의 이름을 표시하고, <input> (입력 필드)에는 type 속성이 있어 텍스트나 이메일 같은 다양한 종류의 입력을 받을 수 있어요. <textarea>는 여러 줄의 텍스트를 입력받는 큰 상자고, <button>은 양식을 제출하는 버튼이에요.
마지막으로 <footer> (페이지의 바닥글 부분)에는 저작권 정보가 들어 있어요."
선생님은 잠시 숨을 고른 후, "이제 이 페이지에 스타일을 입혀봅시다. CSS 주문을 추가할 차례예요"라고 말했습니다.
"다음 시간에는 이 HTML에 CSS를 추가해서 예쁘게 꾸미고, JavaScript로 동작도 추가해볼 거예요. 어때요, 흥미진진하지 않나요?"
