강의 노트 · 2026년 8월 12일

첫 주에 문서 뼈대를 고정하는 이유

페이지의 색을 고르기 전에, 가게 이름이 제목이고 메뉴가 목록인지부터 정합니다. 2026년 봄 기수에서 쓴 실습지 순서를 공개합니다.

h1은 간판 하나

백수읍 교실의 첫 실습지는 빈 직사각형 네 장입니다. 맨 위 칸에만 가게 이름을 적게 합니다. 그 칸이 h1입니다. 메뉴 이름까지 같은 크기로 쓰면, 한 달 뒤에 영업시간만 고치려 해도 어디가 간판인지 다시 찾아야 합니다.

봄 기수에서 펜션 페이지를 만들던 수강생은 객실 이름 세 개를 모두 h1으로 두었습니다. 브라우저 제목 표시줄에는 마지막 객실만 남았습니다. 우리는 객실을 h2로 내리고, 펜션 이름만 h1으로 남겼습니다. 고친 뒤에는 목록 페이지로 링크를 걸 때도 같은 이름을 쓸 수 있었습니다.

문단과 목록을 섞지 않기

영업시간, 주차, 휴무는 문단으로 풀어 쓰면 한 줄이 길어집니다. 교실에서는 이 세 가지를 ul로 바꿉니다. 반대로 가게를 연 이유는 문단입니다. 항목이 아닌 이야기를 목록으로 쪼개면 읽는 리듬이 끊깁니다.

실습 마지막 10분은 본인 파일을 소리 내어 읽습니다. 제목 다음에 바로 가격이 나오면 소개 문단이 빠진 것입니다. 그 자리를 p로 비워 두고 집에 가서 두 문장만 채우게 합니다.

사진 자리에는 문장을 먼저

이미지 태그를 넣는 날, 대체 텍스트를 빈 칸으로 두면 실습지를 다시 가져오게 합니다. ‘반찬 사진’처럼 파일 이름을 옮긴 문장은 부족합니다. ‘배추김치 접시가 나무 테이블 위에 놓인 사진’처럼 화면에 글자가 없을 때도 장면을 알 수 있게 적습니다.

이 연습은 나중에 사진을 바꿔도 본문 구조가 남게 하는 순서입니다. 색과 글꼴은 3주 차에 갑니다.