이번 장에서 만들 것
지금까지 우리는 HTML을 조각조각 배웠습니다.
제목은 h1, h2로 만들었습니다. 문단은 p로 나누었습니다. 이미지는 img로 넣고, 링크는 a로 연결했습니다. 목록과 표도 만들었고, 페이지를 header, main, section, footer 같은 구역으로 나누는 방법도 익혔습니다. 마지막으로 아주 조금의 CSS로 여백과 색을 다듬었습니다.
이번 장에서는 이 조각들을 한곳에 모아 실제로 쓸 수 있는 한 페이지를 완성합니다.
완성할 예시는 작은 가게 안내 페이지입니다. 카페, 공방, 꽃집, 동네 서점, 1인 서비스 소개 페이지로 쉽게 바꿔 쓸 수 있는 형태입니다.
목표는 거창하지 않습니다.
"처음 보는 사람이 이 페이지를 보고 무엇을 하는 곳인지, 언제 열고, 어디로 문의하면 되는지 알게 하기"
이 정도면 충분합니다.
AI 생성 이미지
먼저 페이지의 목표를 정하기
HTML을 쓰기 전에 먼저 정할 것이 있습니다. 바로 이 페이지가 누구에게 무엇을 알려 줄지입니다.
처음부터 예쁜 디자인을 생각하면 손이 멈추기 쉽습니다. 대신 아래 셋 중 하나를 고르면 시작이 쉬워집니다.
개인 소개 페이지: 나는 누구이고, 무엇을 할 수 있는지 소개한다.
작은 가게 안내 페이지: 가게의 특징, 운영 시간, 위치, 문의 방법을 알려 준다.
행사 공지 페이지: 행사 일정, 준비물, 신청 방법을 안내한다.
이번 예제는 작은 가게 안내 페이지로 진행하겠습니다. 이름은 하루한잔 카페라고 하겠습니다.
이 페이지에 들어갈 내용은 다음과 같습니다.
가게 이름과 짧은 소개
대표 이미지
가게의 특징 목록
운영 시간 표
위치와 SNS 링크
문의 영역
이렇게 미리 정리하면 HTML을 쓸 때 덜 헤맵니다. 웹페이지는 빈 화면에 코드를 쓰는 일이 아니라, 전하고 싶은 정보를 알맞은 태그에 담는 일에 가깝습니다.
파일과 이미지 준비하기
실습 폴더를 하나 준비합니다. 예를 들어 폴더 이름을 my-page로 정합니다.
그 안에 다음처럼 파일을 둡니다.
my-page
├─ index.html
└─ images
└─ cafe.jpgindex.html은 우리가 작성할 HTML 파일입니다. images 폴더에는 페이지에 넣을 이미지를 둡니다.
이미지가 꼭 카페 사진일 필요는 없습니다. 지금은 직접 찍은 사진이나 무료로 사용할 수 있는 연습용 이미지를 넣어도 됩니다. 다만 파일 이름은 코드와 정확히 맞아야 합니다.
예를 들어 코드에 images/cafe.jpg라고 쓰면 실제 폴더 안에도 cafe.jpg라는 파일이 있어야 합니다. Cafe.jpg, cafe.jpeg, cafe.png는 다른 이름으로 취급될 수 있습니다.
완성 페이지 코드
아래 코드를 index.html에 그대로 복사해 넣어 보세요. 그런 다음 브라우저에서 열어 봅니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>하루한잔 카페 안내</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 24px;
color: #333333;
background-color: #faf7f2;
}
header,
section,
footer {
background-color: #ffffff;
padding: 20px;
margin-bottom: 20px;
border-radius: 12px;
}
h1 {
color: #6b3f2a;
}
h2 {
color: #8a5a3c;
border-bottom: 2px solid #ead8c8;
padding-bottom: 6px;
}
img {
max-width: 100%;
border-radius: 12px;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 1px solid #dddddd;
padding: 10px;
text-align: left;
}
th {
background-color: #f3e5d8;
}
.notice {
background-color: #fff4d6;
padding: 12px;
border-radius: 8px;
}
</style>
</head>
<body>
<header>
<h1>하루한잔 카페</h1>
<p>동네 골목 안쪽에 있는 작은 카페입니다. 조용히 쉬고 싶은 분들을 위해 따뜻한 커피와 직접 구운 디저트를 준비합니다.</p>
</header>
<main>
<section>
<h2>가게 소개</h2>
<img src="images/cafe.jpg" alt="나무 테이블 위에 커피와 디저트가 놓인 하루한잔 카페 내부">
<p>하루한잔 카페는 혼자 책을 읽거나 짧은 만남을 가지기 좋은 공간입니다. 매장 안에는 1인 좌석과 작은 모임 좌석이 함께 마련되어 있습니다.</p>
</section>
<section>
<h2>이런 분께 추천합니다</h2>
<ul>
<li>조용한 분위기에서 커피를 마시고 싶은 분</li>
<li>노트북으로 짧게 작업할 공간이 필요한 분</li>
<li>많이 달지 않은 디저트를 좋아하는 분</li>
</ul>
</section>
<section>
<h2>운영 시간</h2>
<table>
<tr>
<th>요일</th>
<th>운영 시간</th>
</tr>
<tr>
<td>월요일 ~ 금요일</td>
<td>오전 9시 ~ 오후 8시</td>
</tr>
<tr>
<td>토요일</td>
<td>오전 10시 ~ 오후 6시</td>
</tr>
<tr>
<td>일요일</td>
<td>휴무</td>
</tr>
</table>
<p class="notice"><strong>안내:</strong> 공휴일 운영 시간은 달라질 수 있습니다.</p>
</section>
<section>
<h2>위치와 링크</h2>
<p>주소: 서울시 어딘가구 골목길 12</p>
<p>
<a href="https://www.google.com/maps" target="_blank" rel="noopener nofollow ugc">지도에서 위치 보기</a>
</p>
<p>
<a href="https://www.instagram.com" target="_blank" rel="noopener nofollow ugc">인스타그램 소식 보기</a>
</p>
</section>
<section>
<h2>문의하기</h2>
<p>대관, 단체 주문, 디저트 예약은 이메일로 문의해 주세요.</p>
<p>
<a href="mailto:[email protected]">[email protected]으로 문의 보내기</a>
</p>
</section>
</main>
<footer>
<p>© 2026 하루한잔 카페. 모든 안내 내용은 예시입니다.</p>
</footer>
</body>
</html>코드가 길어 보여도 새로 나온 내용은 많지 않습니다. 앞에서 배운 것들을 한 문서 안에 차례대로 놓았을 뿐입니다.
코드가 어떤 순서로 놓였는지 보기
완성된 문서는 크게 네 부분으로 나눌 수 있습니다.
첫째, <head>에는 화면에 직접 보이지 않는 정보가 들어갑니다. 글자가 깨지지 않도록 meta charset="UTF-8"을 넣었고, 브라우저 탭에 보일 제목을 title에 적었습니다. CSS도 이곳의 style 안에 넣었습니다.
둘째, <header>에는 페이지의 첫인상을 넣었습니다. 가게 이름을 h1으로 쓰고, 짧은 소개 문장을 p로 적었습니다.
셋째, <main>에는 이 페이지의 핵심 내용을 담았습니다. 가게 소개, 추천 대상, 운영 시간, 위치, 문의 방법이 모두 여기에 있습니다. 각각의 주제는 section으로 나누고, 각 구역의 제목은 h2로 붙였습니다.
넷째, <footer>에는 페이지의 끝부분에 어울리는 정보를 넣었습니다. 저작권 문구나 사업자 정보, 연락처 같은 내용이 들어갈 수 있습니다.
이 구조를 보면 나중에 내용을 고치기도 쉽습니다. 운영 시간을 바꾸고 싶으면 운영 시간 섹션만 찾으면 됩니다. 링크를 수정하고 싶으면 위치와 링크 섹션만 보면 됩니다.
내 페이지로 바꿔 보기
이제 예제 문장을 나에게 맞게 바꿔 봅니다.
처음부터 전체를 바꾸려고 하지 않아도 됩니다. 아래 순서대로 하나씩 바꾸면 됩니다.
하루한잔 카페를 내 이름, 가게 이름, 행사 이름으로 바꿉니다.첫 소개 문단을 내가 전하고 싶은 말로 바꿉니다.
images/cafe.jpg를 내가 준비한 이미지 파일 경로로 바꿉니다.alt설명을 실제 이미지 내용에 맞게 바꿉니다.추천 목록의
li내용을 바꿉니다.표의 요일과 시간을 내 상황에 맞게 수정합니다.
지도, SNS, 이메일 링크를 실제 주소로 바꿉니다.
예를 들어 행사 공지 페이지로 바꾸고 싶다면 운영 시간 표를 행사 일정 표로 바꾸면 됩니다.
<table>
<tr>
<th>시간</th>
<th>내용</th>
</tr>
<tr>
<td>오후 2시</td>
<td>입장 및 안내</td>
</tr>
<tr>
<td>오후 3시</td>
<td>첫 번째 강연</td>
</tr>
</table>개인 소개 페이지라면 추천 목록을 "할 수 있는 일"로 바꿀 수 있습니다.
<ul>
<li>짧고 쉬운 글쓰기</li>
<li>온라인 콘텐츠 기획</li>
<li>소규모 워크숍 진행</li>
</ul>태그를 새로 많이 배울 필요는 없습니다. 이미 배운 태그 안의 내용을 바꾸는 것만으로도 전혀 다른 페이지가 됩니다.
완성 후 점검 체크리스트
페이지를 만들고 나면 브라우저에서 꼭 확인해야 합니다. HTML은 저장만 했다고 끝이 아닙니다. 실제 화면에서 잘 보이는지 확인해야 합니다.
아래 순서대로 점검해 보세요.
파일 이름이
index.html인가요?수정한 뒤 저장했나요?
브라우저에서 새로고침했나요?
브라우저 탭 제목이 알맞게 보이나요?
h1은 페이지 대표 제목으로 한 번만 사용했나요?h2제목들이 각 구역의 내용을 잘 설명하나요?이미지가 보이나요?
이미지가 보이지 않을 때
src경로와 파일 이름을 확인했나요?이미지의
alt가 파일명이 아니라 의미 있는 설명인가요?링크를 눌렀을 때 원하는 곳으로 이동하나요?
새 탭으로 여는 외부 링크에
target="_blank"와rel="noopener"를 함께 썼나요?표의 첫 줄에
th로 제목 칸을 넣었나요?이메일 주소나 연락처에 오타가 없나요?
모바일처럼 좁은 화면에서도 본문을 읽을 수 있나요?
문제가 보이면 실패가 아닙니다. 웹페이지 만들기는 대부분 "보고, 고치고, 다시 보는 일"입니다.
완벽한 페이지보다 완성된 페이지
처음 만든 페이지는 어딘가 어색할 수 있습니다. 색이 마음에 들지 않을 수도 있고, 문장이 길게 느껴질 수도 있습니다. 이미지 크기나 표 모양이 생각과 다를 수도 있습니다.
그래도 괜찮습니다.
HTML을 배우는 가장 좋은 방법은 작은 페이지를 끝까지 만들어 보는 것입니다. 완성된 페이지가 하나 있으면 그다음부터는 고치면서 배울 수 있습니다.
문장을 바꾸면 콘텐츠가 달라집니다. li를 추가하면 목록이 늘어납니다. 표의 tr을 하나 더 넣으면 일정이 추가됩니다. 링크의 href를 바꾸면 다른 곳으로 연결됩니다. CSS의 색상 값을 바꾸면 분위기가 바뀝니다.
이제 여러분은 빈 파일에서 시작해 제목, 문단, 이미지, 목록, 표, 링크, 문의 영역이 있는 웹문서를 만들 수 있습니다.
이 한 페이지가 출발점입니다. 다음 장에서는 이 파일을 내 컴퓨터 안에만 두지 않고, 다른 사람도 볼 수 있도록 웹에 올리는 방법을 알아보겠습니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.