HTML 개념노트 20편
HTML 전체 복습 + 미니 프로젝트 만들기
지금까지 HTML의 기본 구조, 텍스트, 링크, 이미지, 목록, 표, 폼, 시맨틱 태그, 접근성까지 정리했습니다. 마지막 편에서는 전체 내용을 복습하고, 배운 태그를 활용해서 간단한 개인 소개 페이지를 만들어 보겠습니다.
1. HTML 시리즈에서 배운 내용
HTML은 웹페이지의 구조를 만드는 언어입니다. 처음에는 태그가 많아 보여서 어렵게 느껴질 수 있지만, 결국 핵심은 문서의 내용을 의미에 맞게 구조화하는 것입니다.
| 분류 | 배운 태그 / 개념 | 역할 |
|---|---|---|
| 문서 구조 | <html>, <head>, <body> |
HTML 문서의 기본 뼈대를 만듭니다. |
| 텍스트 | <h1>~<h6>, <p>, <br> |
제목, 문단, 줄바꿈을 표현합니다. |
| 이동 | <a> |
다른 페이지나 특정 위치로 이동합니다. |
| 이미지 | <img>, src, alt |
이미지를 표시하고 대체 텍스트를 제공합니다. |
| 목록 | <ul>, <ol>, <li> |
항목을 순서 있게 또는 순서 없이 정리합니다. |
| 표 | <table>, <tr>, <th>, <td> |
데이터를 행과 열로 정리합니다. |
| 폼 | <form>, <input>, <label>, <button> |
사용자의 입력값을 받고 전송합니다. |
| 시맨틱 구조 | <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> |
문서의 의미 있는 영역을 나눕니다. |
2. HTML 작성 핵심 원칙
HTML을 작성할 때 가장 중요한 것은 단순히 화면에 보이게 만드는 것이 아닙니다. 문서의 의미를 정확하게 표현하는 것이 중요합니다.
- 제목은 제목 태그로 작성합니다.
- 문단은 문단 태그로 작성합니다.
- 목록은 목록 태그로 작성합니다.
- 데이터 표는 table 태그로 작성합니다.
- 이동은 a 태그로 작성합니다.
- 클릭 동작은 button 태그로 작성합니다.
- 이미지에는 의미 있는 alt를 작성합니다.
- 입력창은 label과 연결합니다.
- 상단, 본문, 하단처럼 의미 있는 영역은 시맨틱 태그를 사용합니다.
3. 미니 프로젝트 목표
이번 미니 프로젝트에서는 HTML만 사용해서 간단한 개인 소개 페이지를 만들어 보겠습니다. CSS를 조금 넣으면 더 보기 좋아지지만, 핵심은 HTML 구조를 올바르게 잡는 것입니다.
나를 소개하는 개인 프로필 페이지 만들기
4. 페이지에 들어갈 내용
개인 소개 페이지에는 아래와 같은 요소를 넣어 보겠습니다.
- 상단 제목 영역
- 메뉴 영역
- 프로필 소개 영역
- 기술 스택 목록
- 학습 기록 표
- 문의 폼
- 관련 링크 영역
- 하단 저작권 영역
이 구성만 만들어도 HTML의 핵심 태그를 거의 한 번씩 복습할 수 있습니다.
5. 미니 프로젝트 전체 코드
아래 코드는 지금까지 배운 HTML 태그를 활용한 개인 소개 페이지 예시입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML로 만든 개인 소개 페이지입니다.">
<title>나의 프로필 페이지</title>
</head>
<body>
<header>
<h1>안녕하세요, 웹 개발을 공부하고 있습니다</h1>
<p>HTML, CSS, JavaScript를 차근차근 배우는 중입니다.</p>
</header>
<nav>
<ul>
<li><a href="#profile">프로필</a></li>
<li><a href="#skills">기술 스택</a></li>
<li><a href="#study">학습 기록</a></li>
<li><a href="#contact">문의</a></li>
</ul>
</nav>
<main>
<section id="profile">
<h2>프로필</h2>
<img src="profile.jpg" alt="프로필 이미지" width="200">
<p>
저는 웹 개발을 공부하며 HTML 문서 구조와 시맨틱 태그의 중요성을 배우고 있습니다.
</p>
</section>
<section id="skills">
<h2>기술 스택</h2>
<ul>
<li>HTML - 웹페이지 구조 작성</li>
<li>CSS - 웹페이지 디자인</li>
<li>JavaScript - 웹페이지 동작 구현</li>
</ul>
</section>
<section id="study">
<h2>학습 기록</h2>
<table border="1">
<thead>
<tr>
<th>주제</th>
<th>학습 내용</th>
<th>상태</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>문서 구조와 기본 태그</td>
<td>완료</td>
</tr>
<tr>
<td>CSS</td>
<td>선택자와 레이아웃</td>
<td>학습 중</td>
</tr>
</tbody>
</table>
</section>
<section id="contact">
<h2>문의하기</h2>
<form action="/contact" method="post">
<div>
<label for="name">이름</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="email">이메일</label>
<input type="email" id="email" name="email">
</div>
<div>
<label for="message">메시지</label>
<textarea id="message" name="message"></textarea>
</div>
<button type="submit">문의 보내기</button>
</form>
</section>
<aside>
<h2>관련 링크</h2>
<ul>
<li><a href="https://developer.mozilla.org/" target="_blank" rel="noopener noreferrer">MDN Web Docs</a></li>
<li><a href="https://www.w3.org/" target="_blank" rel="noopener noreferrer">W3C</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 나의 프로필 페이지</p>
</footer>
</body>
</html>6. 코드 구조 분석
위 코드는 단순해 보이지만, 지금까지 배운 HTML 핵심 개념이 대부분 들어가 있습니다.
| 영역 | 사용 태그 | 역할 |
|---|---|---|
| 상단 | <header>, <h1>, <p> |
페이지 소개와 대표 제목을 보여줍니다. |
| 메뉴 | <nav>, <ul>, <li>, <a> |
페이지 안의 특정 위치로 이동합니다. |
| 본문 | <main>, <section> |
핵심 콘텐츠를 주제별로 나눕니다. |
| 이미지 | <img>, src, alt |
프로필 이미지를 표시하고 대체 텍스트를 제공합니다. |
| 표 | <table>, <thead>, <tbody> |
학습 기록을 데이터 형태로 정리합니다. |
| 폼 | <form>, <label>, <input>, <textarea>, <button> |
사용자 입력을 받을 수 있게 합니다. |
7. textarea 태그 추가로 알아보기
이번 미니 프로젝트 코드에는 처음 등장한 태그가 하나 있습니다. 바로 <textarea>입니다.
<textarea>는 여러 줄의 긴 텍스트를 입력받을 때 사용합니다. 문의 내용, 게시글 내용, 댓글, 자기소개 같은 긴 문장을 입력받을 때 적합합니다.
<label for="message">메시지</label>
<textarea id="message" name="message"></textarea>한 줄 입력은 <input>, 여러 줄 입력은 <textarea>를 사용하면 됩니다.
8. 이 프로젝트를 더 발전시키는 방법
HTML 구조를 만든 뒤에는 CSS와 JavaScript를 추가해서 더 완성도 있는 페이지로 발전시킬 수 있습니다.
- CSS로 색상, 여백, 글꼴, 카드 디자인을 적용합니다.
- Flex 또는 Grid로 레이아웃을 정리합니다.
- JavaScript로 메뉴 열기, 폼 검증, 버튼 동작을 추가합니다.
- 이미지 크기를 반응형으로 조절합니다.
- 접근성을 위해 alt, label, button 문구를 다시 점검합니다.
- SEO를 위해 title, description, heading 구조를 정리합니다.
9. HTML 최종 체크리스트
HTML 문서를 작성한 뒤에는 아래 항목을 확인해 보세요.
- 문서에
<!DOCTYPE html>이 작성되어 있나요? <html lang="ko">처럼 문서 언어가 설정되어 있나요?<meta charset="UTF-8">가 작성되어 있나요?viewportmeta 태그가 작성되어 있나요?- 페이지 대표 제목은
<h1>으로 작성했나요? - 제목 단계가 자연스럽게 내려가나요?
- 이미지에 적절한
alt가 있나요? - 폼 입력창에
label이 연결되어 있나요? - 이동은
<a>, 동작은<button>으로 구분했나요? - 의미 있는 영역은 시맨틱 태그로 나누었나요?
10. 초보자가 마지막까지 자주 하는 실수
실수 1. 화면에 보이는 것만 맞추고 의미를 무시함
HTML은 단순한 화면 배치 도구가 아니라 문서 구조를 표현하는 언어입니다. 제목, 문단, 목록, 표, 폼을 의미에 맞게 사용해야 합니다.
실수 2. div만 반복해서 구조를 만듦
단순 박스는 <div>가 맞지만, 상단, 메뉴, 본문, 하단처럼 의미가 분명한 영역은 시맨틱 태그를 사용하는 것이 좋습니다.
실수 3. form에서 name을 빼먹음
서버로 데이터를 보내는 폼에서는 name이 중요합니다. 입력창이 화면에 보이는 것과 서버로 값이 전달되는 것은 다른 문제입니다.
실수 4. 접근성을 나중 문제로 미룸
접근성은 나중에 붙이는 장식이 아닙니다. 처음 HTML 구조를 작성할 때부터 alt, label, button, heading 구조를 함께 고려하는 것이 좋습니다.
11. 오늘의 핵심 정리
- HTML은 웹페이지의 구조를 만드는 언어입니다.
- 태그는 화면 모양보다 의미에 맞게 선택하는 것이 중요합니다.
- 시맨틱 태그를 사용하면 문서 구조가 명확해집니다.
- 이미지에는 의미 있는 alt를 작성해야 합니다.
- 폼 입력창에는 label과 name을 확인해야 합니다.
- table은 데이터 표에 사용하고, 레이아웃 용도로 남용하지 않는 것이 좋습니다.
- HTML 구조가 탄탄해야 CSS와 JavaScript를 얹었을 때도 유지보수가 쉬워집니다.
- 좋은 웹페이지는 예쁘기 전에 먼저 구조가 명확해야 합니다.
12. 마무리
HTML은 처음 배울 때는 태그 암기처럼 느껴질 수 있습니다. 하지만 실제로는 웹페이지의 내용을 어떤 구조로 정리할지 결정하는 중요한 기초입니다.
HTML 구조를 제대로 잡으면 CSS로 디자인하기도 쉬워지고, JavaScript로 기능을 붙일 때도 훨씬 안정적입니다. 웹 개발을 오래 공부할수록 기본 HTML 구조의 중요성을 더 많이 느끼게 됩니다.
HTML 시리즈 마무리
HTML 개념노트는 여기서 마무리합니다. 다음 단계에서는 CSS를 함께 배우면서 이 HTML 구조를 실제 웹페이지처럼 꾸며 볼 수 있습니다.
GWDEVELBlog HTML 개념노트
'Computer Science > HTML' 카테고리의 다른 글
| [HTML] 개념노트 19편 HTML 실전 레이아웃 구조 만들기 (0) | 2026.06.12 |
|---|---|
| [HTML] 개념노트 18편 접근성 기초 이해하기 (0) | 2026.06.12 |
| [HTML] 개념노트 17편 meta 태그와 SEO 기본 이해하기 (0) | 2026.06.11 |
| [HTML] 개념노트 16편 iframe, video, audio 태그 이해하기 (0) | 2026.06.11 |
| [HTML] 개념노트15편 HTML 엔티티 문자 이해하기 (0) | 2026.06.11 |