웹 개발을 해보고 싶다면 HTML과 CSS, Javascript는 들어보셨을 겁니다.
오늘은 HTML의 기초를 공부하고, VS code에서 HTML 파일 생성까지 해봅시다.
웹 게임 개발하려니 돌아갈 산이 정말 많네요...
웹 개발이라는 거대한 성을 짓기 위해서는 가장 먼저 단단한 지반을 다지고 뼈대를 세워야 합니다.
그 뼈대가 바로 HTML입니다.
이번 포스팅에서는 HTML의 정의부터 실제 웹 게임 제작에 필수적인 태그들까지, 하나부터 열까지 체계적으로 정리해 보겠습니다.
1. HTML의 정의와 본질: 웹의 뼈대
HTML(HyperText Markup Language)은 웹 페이지의 구조(Structure)를 서술하는 마크업 언어입니다.
- 본질: HTML은 브라우저(크롬, 사파리 등)에게 "여기는 제목이야", "여기는 버튼이야"라고 알려주는 역할을 합니다.
- 비유: 건축에서의 '철골 구조'나 사람의 '골격(뼈)'과 같습니다. 뼈대가 없으면 살(CSS)을 붙일 수도, 움직임(JS)을 줄 수도 없습니다.
2. HTML 문서의 기본 아키텍처
모던 웹 표준을 따르는 모든 문서는 아래와 같은 필수 구조를 갖춰야 합니다.
| 구성 요소 | 정의 및 역할 |
| <!DOCTYPE html> | 이 문서가 HTML5 표준으로 작성되었음을 브라우저에 선언합니다. |
| <html> | 문서의 시작과 끝을 감싸는 최상위 요소입니다. |
| <head> | 메타 데이터(데이터에 대한 데이터)를 담는 곳입니다. 화면에는 보이지 않지만 검색 엔진 최적화(SEO)와 설정을 담당합니다. |
| <body> | 유저의 눈에 실제로 보이는 모든 콘텐츠(이미지, 글자, 버튼 등)가 들어가는 곳입니다. |
3. 게임 제작에 필수적인 핵심 태그 (Definitions)
① 레이아웃 및 그룹화 태그
요소들을 논리적으로 묶어주는 역할을 합니다.
- <div> (Division): 특별한 의미는 없지만, 구역을 나누어 묶을 때 사용하는 상자입니다.
- <section>: 문서 내의 독립적인 구획(예: 캐릭터 상태창, 설정창)을 나타낼 때 사용합니다.
- <header> / <footer>: 페이지나 구역의 윗부분(제목)과 아랫부분(정보)을 정의합니다.
② 텍스트 및 정보 전달 태그
데이터를 화면에 출력하는 역할을 합니다.
- <h1> ~ <h6> (Heading): 제목을 정의합니다. 숫자가 작을수록 중요도가 높고 글자가 큽니다.
- <p> (Paragraph): 일반적인 문장을 나타냅니다.
- <span>: 문장 안에서 특정 부분만 묶어줄 때 사용합니다. 나중에 자바스크립트가 특정 숫자만 쏙 바꿀 때 이 태그를 활용합니다.
③ 상호작용 및 상태 표시 태그
유저의 입력을 받거나 진행 상황을 보여줍니다.
- <button>: 클릭할 수 있는 버튼을 만듭니다.
- <progress>: 작업의 진행 상태(체력바, 경험치바 등)를 나타내는 게이지를 만듭니다.
- <ul> / <li>: 순서 없는 목록을 만듭니다. 전투 기록(로그)을 나열할 때 적합합니다.
4. 이름표 붙이기: 속성(Attribute)의 정의
태그에 부가적인 정보를 제공하는 것을 속성이라고 합니다. 특히 자바스크립트와 소통하기 위해서는 이름표가 필수입니다.
1. id (아이디): 페이지 내에서 유일해야 하는 고유한 이름입니다. (예: id="hero-hp")
2. class (클래스): 여러 요소가 공통으로 가질 수 있는 별명입니다. (예: class="blue-button")
5. [실습] VS code(Visual Studio Code)로 HTML 작성하기
VS code(Visual Studio Code)는 많은 웹 개발 유저들이 사용하는 코딩 프로그램입니다.
웬만한 언어(JS, HTML, CSS, C, C+, python 등)을 지원하니 하나쯤 깔아두면 유용한 코딩생활을 할 수 있습니다.
먼저 VS code를 다운로드 하신 후, 다음 내용을 따라오시면 HTML을 작성하실 수 있습니다!
아래 링크에서 다운 받으실 수 있습니다!
VS code(Visual Studio Code) 다운받는 링크 (공식 사이트)
다운받으신 후 다음과 같이 따라와주세요!
원하시는 경로에 앞으로 코딩할 때 사용할 폴더를 만드신 후, VS code를 켜서 File - open Folder를 누릅니다.
그리고 왼쪽 탭에서 New file을 클릭해서 새로운 파일을 만듭니다!
우리는 HTML을 작성할 예정이니, 원하시는 영어 파일명 작성 후 확장자를 ".html"로 작성해서 enter를 누르면 다음과 같이 HTML로 된 파일이 생성됩니다.
똑같이 앞으로 사용될 JS나 CSS도 확장자를 다음과 같이 작성하면 해당 언어의 파일로 생성됩니다.
이제 실전입니다.
tip으로는 HTML 처음 작성할 때, 느낌표 "!"를 쳐서 아래에 나오는 저 파란 명령어를 실행하면 2번째 사진처럼 기본 틀이 형성됩니다.
알아두면 시작할 때 편리합니다 ㅎㅎ (요즘은 AI가 다 해주지만요..)
아래는 위에서 배웠던 개념들을 적용하여 작성한 아주 기본적인 "RPG 게임의 캐릭터 정보창"입니다.
이 코드를 .html 파일로 저장해서 실행하면 이렇게 보일겁니다.
아직 버튼에 다른 기능을 넣지 않았지만, 다음에 진행될 내용에서 HP와 경험치, 골드를 변경하는 것까지 해봅시다!
아래는 사용 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>RPG 게임: HTML 뼈대 다지기</title>
</head>
<body>
<div id="game-world">
<header>
<h1>아르곤</h1>
<h3>현재 레벨: <span id="player-level">1</span></h3>
</header>
<hr>
<section id="status-window">
<div>
<label>체력(HP): </label>
<progress id="hp-bar" value="100" max="100"></progress>
<span id="hp-value">100/100</span>
</div>
<div>
<label>경험치: </label>
<progress id="exp-bar" value="0" max="100"></progress>
</div>
<p>보유 골드: <strong id="gold-amount">0</strong> GOLD</p>
</section>
<section id="controls">
<button id="btn-battle">⚔️ 숲으로 탐험 떠나기</button>
<button id="btn-rest">💤 여관에서 휴식하기</button>
</section>
<section id="game-log">
<h4>[ 전투 기록 ]</h4>
<ul id="log-list">
<li>게임에 접속하였습니다.</li>
<li>새로운 모험이 당신을 기다립니다!</li>
</ul>
</section>
</div>
</body>
</html>
결론 및 핵심 요약
- HTML은 웹의 뼈대를 만드는 언어이며, 약속된 구조가 존재한다.
- 태그는 각자의 정의(역할)가 있다.
- 자바스크립트로 요소를 제어하려면 id라는 이름표를 잘 붙여야 한다.
뼈대가 완성되었으니, 이제 이 밋밋한 뼈대에 예쁜 옷을 입히고 기능을 넣을 준비가 되었습니다.
다음 시간에는 더 발전된 캐릭터 창을 볼 수 있겠죠?
'Coding' 카테고리의 다른 글
| 자바스크립트 변수와 상수 가이드: 게임 데이터 설계 핵심 (게임 제작 #2) (0) | 2026.02.07 |
|---|---|
| 웹 개발, 플래시 게임 개발: HTML, CSS, 자바스크립트 역할 완벽 정리 (3) | 2026.02.07 |
