[[HTML]] 파일 하나로 제목, 날짜, 장소를 읽을 수 있는 초대장을 만든다. 서버를 마련하기 전에 내 컴퓨터에서 열어볼 수 있다. 아래 내용은 실제 행사가 아닌 연습용 전시다.

## 한 파일로 시작하기

1. 서식이 없는 일반 텍스트 편집기에서 아래 코드를 복사한다.
2. UTF-8 형식으로 `invitation.html`이라는 이름으로 저장한다. 파일 이름 뒤에 `.txt`가 더 붙지 않았는지 확인한다.
3. 파일을 웹 브라우저로 연다. 제목, 두 개의 정보 항목, 관람 메모가 보이면 첫 단계가 끝난다.
4. 제목을 자신의 말로 바꾸고 저장한 뒤 브라우저를 새로 고친다. 편집기의 저장과 브라우저의 새로 고침은 별개의 동작이다.
5. 실제 초대장으로 쓸 때는 예시의 미정 항목과 가상 행사 표기를 실제 정보에 맞게 고친다.

```html
<!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로 만들기]]로 확장하고, 참가 정보를 받아야 한다면 [[신청 폼은 질문의 순서다]]에서 입력과 실제 접수를 구분한다.

## 참고

- [MDN의 HTML 기본 문법](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax)

#웹 #만들기 #전시 #HTML