HTML로 자기소개 페이지 만들기 — 첫 번째 실습 프로젝트

오늘의 목표

이론만 공부하면 지루합니다. 오늘은 직접 자기소개 웹페이지를 만들어보겠습니다. 이 실습을 통해 HTML의 핵심 태그 10가지를 자연스럽게 익힐 수 있습니다.

HTML 핵심 태그 10가지

자기소개 페이지를 만들면서 사용할 태그들입니다:

• <h1> ~ <h6> — 제목 (숫자가 작을수록 큰 제목)
• <p> — 문단 (paragraph)
• <img> — 이미지
• <a> — 링크
• <ul>, <li> — 목록
• <div> — 영역 묶기 (그룹핑)
• <strong> — 굵은 글씨 (강조)
• <br> — 줄바꿈
• <hr> — 수평선 (구분선)

실습: 자기소개 페이지 만들기

VS Code에서 index.html 파일을 열고 다음 구조로 만들어봅니다:

• 상단: 이름과 한 줄 소개 (h1 + p)
• 소개 섹션: 자기소개 문단 (h2 + p)
• 관심사 섹션: 취미/관심사 목록 (h2 + ul + li)
• 기술 섹션: 배우고 있는 기술 (h2 + ul)
• 연락처 섹션: 이메일이나 SNS 링크 (h2 + a)

각 섹션을 <div>로 감싸면 나중에 CSS로 스타일을 적용할 때 편리합니다.

코딩할 때 자주 하는 실수 3가지

• 닫는 태그를 빼먹는 것 — <p>안녕하세요가 아니라 <p>안녕하세요</p>여야 합니다. 단, <img>와 <br>은 닫는 태그가 없는 예외입니다.
• 태그 이름 오타 — <stong>이 아니라 <strong>입니다. VS Code의 자동 완성 기능을 활용하면 오타를 줄일 수 있습니다.
• 중첩 순서 틀리기 — <p><strong>텍스트</p></strong>이 아니라 <p><strong>텍스트</strong></p>여야 합니다. 먼저 연 태그를 나중에 닫아야 합니다.

완성된 페이지를 브라우저에서 확인하기

Live Server 확장 프로그램을 설치했다면, VS Code 하단의 "Go Live" 버튼을 클릭하면 브라우저에서 바로 결과를 확인할 수 있습니다. 코드를 수정하고 저장하면 브라우저가 자동으로 새로고침됩니다.

처음에는 밋밋하게 보일 겁니다. 하얀 배경에 검은 글씨, 기본 폰트. 하지만 괜찮습니다! HTML은 구조를 만드는 것이고, 예쁘게 꾸미는 건 다음 단계인 CSS의 역할입니다.

마치며

축하합니다! 여러분은 방금 첫 번째 실전 웹페이지를 만들었습니다. 비록 간단한 페이지이지만, 웹 개발의 기초를 직접 경험한 것입니다. HTML은 웹의 뼈대이고, 이것을 이해하면 나머지는 그 위에 쌓아올리는 것일 뿐입니다.

다음 글에서는 CSS로 이 페이지를 예쁘게 꾸미는 방법을 알려드리겠습니다. 색상, 폰트, 레이아웃의 마법을 경험해보세요!