HTML 파일 하나로 제목, 날짜, 장소를 읽을 수 있는 초대장을 만든다. 서버를 마련하기 전에 내 컴퓨터에서 열어볼 수 있다. 아래 내용은 실제 행사가 아닌 연습용 전시다.
한 파일로 시작하기
- 서식이 없는 일반 텍스트 편집기에서 아래 코드를 복사한다.
- UTF-8 형식으로
invitation.html이라는 이름으로 저장한다. 파일 이름 뒤에.txt가 더 붙지 않았는지 확인한다. - 파일을 웹 브라우저로 연다. 제목, 두 개의 정보 항목, 관람 메모가 보이면 첫 단계가 끝난다.
- 제목을 자신의 말로 바꾸고 저장한 뒤 브라우저를 새로 고친다. 편집기의 저장과 브라우저의 새로 고침은 별개의 동작이다.
- 실제 초대장으로 쓸 때는 예시의 미정 항목과 가상 행사 표기를 실제 정보에 맞게 고친다.
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>연습용 초대장 — 아직 없는 전시</title>
<style>
body { max-width: 36rem; margin: 2rem auto; padding: 0 1rem;
font-family: sans-serif; line-height: 1.7; }
a { color: #0645ad; }
</style>
<main>
<p>가상의 전시를 위한 제작 연습입니다.</p>
<h1>아직 없는 전시</h1>
<p>빈 의자 한 개가 다음 작품을 기다립니다.</p>
<dl>
<dt>언제</dt><dd>날짜 미정</dd>
<dt>어디서</dt><dd>장소 미정</dd>
</dl>
<p><a href="#note">관람 전에 읽을 메모</a></p>
<section id="note">
<h2>관람 메모</h2>
<p>이 초대장은 실제 행사나 예약을 안내하지 않습니다.</p>
</section>
</main>
</html>어디를 고쳤는지 살피기
h1은 전시 제목이고h2는 그 안의 작은 제목이다. 크기만 보고 고르기보다 내용의 순서를 정한다.href="#note"는 같은 문서의id="note"로 이동한다. 외부 주소를 지정하지 않는 문서 내부 하이퍼링크다.- 파일이 컴퓨터에서 열렸다고 다른 사람에게 공개된 것은 아니다. 파일 전달과 웹 배포는 다음 단계에서 선택한다.
- 같은 문서의 메모로 가는 링크는 짧은 화면에서는 눌러도 큰 변화가 없어 보일 수 있다. 주소 끝에
#note가 붙었는지 확인하면 이동 대상을 구분할 수 있다. - 인쇄해서 건넬 판본도 필요하다면 CSS로 인쇄용 원고 만들기를 참고한다. 종이에서는 링크를 누를 수 없으니 메모 자체를 읽을 수 있게 남긴다. 이 차이는 눌리지 않는 초대장으로 이어진다.
이 파일을 전시 기획의 출발점으로 쓰고 싶다면 아직 없는 전시의 초대장으로 이어갈 수 있다. 실제 행사의 주소를 바꾸는 문제는 초대장의 유효기간에 남겨둔다. 일정이 여러 개라면 전시 일정표를 HTML로 만들기로 확장하고, 참가 정보를 받아야 한다면 신청 폼은 질문의 순서다에서 입력과 실제 접수를 구분한다.