이번 실습에서는 "오늘의 집밥" 이라는 가상의 레시피 소개 사이트를 만든다. 문제를 순서대로 풀면 페이지가 점점 완성되고, 마지막에는 여러 페이지가 링크로 이어진 작은 웹사이트가 된다.

#0. 실습 준비

1. 작업 폴더 하나를 새로 만든다. (예: recipe-site)

2. VS Code로 그 폴더를 연다.

3. 폴더 안에 아래 파일들을 미리 만들어 둔다. (내용은 차차 채운다)

   • index.html — 사이트 메인 페이지

   • kimchi-jjigae.html — 레시피 상세 ①

   • gyeran-bap.html — 레시피 상세 ②

4. index.html을 Live Server로 띄워 두고, 저장할 때마다 브라우저에서 결과를 확인하며 진행한다.

#1단계. 레시피 상세 페이지 뼈대 만들기

kimchi-jjigae.html 파일에 김치찌개 레시피 페이지의 기본 틀을 만든다.

#요구사항

• 완전한 HTML 문서 구조를 갖춘다. (<!DOCTYPE html>, <html lang="ko">, <head>, <body>)

• <head> 안에 <meta charset="UTF-8">과 <title>(브라우저 탭 제목)을 넣는다.

• <h1>으로 레시피 이름을 한 번만 쓴다.

• 요리를 한두 문장으로 소개하는 <p> 문단을 작성한다.

• 소개 문단 안에서 핵심 단어를 <strong>(중요)과 <em>(강조)으로 각각 한 번 이상 표시한다.

• <h2>로 "재료" 같은 소제목을 만들고, 그 아래 <hr> 구분선을 넣는다.

#완성 예시

#얼큰 김치찌개

돼지고기와 푹 익은 김치로 끓여내는 한국인의 소울 푸드입니다. 끓일수록 깊은 맛이 우러나니 충분히 끓여 주세요.

#재료

#2단계. 재료 목록과 조리 순서 추가

같은 kimchi-jjigae.html에 재료 목록과 조리 순서를 추가한다. 순서가 중요한지 아닌지에 따라 목록 종류를 골라야 한다.

#요구사항

• "재료" 소제목 아래에 순서 없는 목록(<ul>)으로 재료 5개 이상을 나열한다.

• 재료 목록 안에 중첩 목록을 한 군데 넣는다. (예: "양념" 항목 아래에 고춧가루·간장·다진 마늘을 하위 목록으로)

• <h2>로 "조리 순서" 소제목을 만든다.

• 조리 순서는 순서 있는 목록(<ol>)으로 4단계 이상 작성한다.

• 조리 순서 중 한 단계에서 주의할 점을 <mark>(형광펜 효과)로 강조한다.

#완성 예시

#재료

• 신김치 1/4포기

• 돼지고기(앞다리) 200g

• 두부 1/2모

• 대파 1대

• 양념

  • 고춧가루 1큰술

  • 국간장 1큰술

  • 다진 마늘 1/2큰술

#조리 순서

1. 냄비에 돼지고기를 넣고 중불에서 볶는다.

2. 김치를 넣고 함께 볶아 신맛을 날린다.

3. 물 3컵을 붓고 양념을 푼 뒤 끓인다.

4. 두부와 대파는 마지막에 넣어야 부서지지 않는다.

#3단계. 영양 정보 표 만들기

조리 순서 아래에 1인분 기준 영양 정보 표를 추가한다. 표의 제목과 셀 병합까지 활용한다.

#요구사항

• <table>로 표를 만들고 <caption>으로 표 제목을 붙인다.

• 첫 행은 열 제목이므로 <th scope="col">을 사용한다.

• 본문은 <tbody>, 제목 행은 <thead>로 구조를 구분한다.

• colspan 또는 rowspan을 한 번 이상 사용해 셀을 병합한다. (예: "탄수화물 / 단백질 / 지방"을 묶는 헤더)

• 데이터 행을 3개 이상 넣는다.

#완성 예시

#4단계. 이미지 넣기

레시피 페이지 상단(소개 문단 근처)에 완성 음식 사진을 넣는다.

#요구사항

• <img>로 음식 사진을 넣는다. src와 alt를 반드시 채운다.

• width 속성으로 적당한 크기(예: 400)를 지정한다. (높이는 자동으로 비율 유지)

• 사진과 설명을 <figure>로 묶고, <figcaption>으로 사진 설명을 단다.

• 마우스를 올렸을 때 툴팁이 뜨도록 title 속성을 넣는다.

#완성 예시

▲ 두부와 대파를 올려 완성한 김치찌개

#5단계. 두 번째 레시피 + 메인 페이지 연결하기

이제 페이지를 서로 연결해 사이트의 모양을 갖춘다. 이 단계가 이번 실습의 핵심이다.

#5-1. 두 번째 레시피 페이지

• gyeran-bap.html(계란밥 등 간단한 요리)을 1~4단계와 같은 구성으로 직접 만든다. (제목 · 소개 · 이미지 · 재료 목록 · 조리 순서 — 표는 선택)

#5-2. 메인 페이지(index.html)

• <h1>으로 사이트 이름("오늘의 집밥")을 쓰고, 사이트를 소개하는 문단을 넣는다.

• "인기 레시피"를 목록으로 만들고, 각 항목의 글자를 클릭하면 해당 레시피 페이지로 이동하도록 <a href="...">로 연결한다. (상대 경로 사용: kimchi-jjigae.html)

• 음식 썸네일 이미지 자체를 링크로 만든다. (<a> 안에 <img>를 넣는 방식)

#5-3. 돌아가는 링크

• 두 레시피 페이지 맨 아래에 "← 목록으로 돌아가기" 링크를 넣어 index.html로 이동하게 한다.

#완성 예시 (메인 페이지)

#🍚 오늘의 집밥

집에서 쉽게 따라 할 수 있는 한 끼 레시피를 모았습니다. 먹고 싶은 메뉴를 골라 보세요.

#인기 레시피

• 얼큰 김치찌개 — 한국인의 소울 푸드

• 간단 계란밥 — 5분이면 완성

※ 위 제목과 사진을 클릭하면 각 레시피 페이지로 이동한다.

#6단계. 페이지 안에서 점프하는 링크

레시피 페이지가 길어졌으니, 위쪽에 간단한 목차를 만들어 클릭하면 해당 부분으로 바로 내려가게 한다. (앵커 링크)

#요구사항

• <h2> 소제목들(재료 / 조리 순서 / 영양 정보)에 각각 id 속성을 붙인다. (예: <h2 id="ingredients">)

• 페이지 상단에 목차 목록을 만들고, 각 항목을 <a href="#ingredients">처럼 연결한다.

• 페이지 맨 아래에 <a href="#"> 또는 맨 위 id로 가는 "맨 위로 ↑" 링크를 넣는다.

• 레시피 출처(아무 요리 블로그나 사이트)를 <a>로 연결하되, 새 탭에서 열리도록 target="_blank"와 rel="noopener noreferrer"를 함께 넣는다.

#완성 예시 (페이지 상단 목차)

바로 가기

• 재료

• 조리 순서

• 영양 정보

※ 항목을 클릭하면 페이지의 해당 위치로 스크롤된다. (같은 페이지 안 이동)

#도전 과제

아래를 추가해 본다. 모두 지금까지 배운 태그로 가능하다.

• 메인 페이지에 "문의" 영역을 만들고, mailto:로 이메일 링크와 tel:로 전화 링크를 넣는다.

• 레시피 난이도/조리시간/분량을 정리한 작은 정보 표를 추가한다.

• "추천 사이드 메뉴"를 중첩 목록(대분류 → 세부 메뉴)으로 만든다.

• 세 번째 레시피 페이지를 추가하고 메인 페이지 목록에도 연결한다.

• 분량 조절 안내에 <sub>/<sup>(예: 2배↑)나 <del>/<ins>(예: 4인분 → 2인분)를 활용한다.

#제출 / 점검 체크리스트

완성했다면 아래를 스스로 점검한다.

• 모든 페이지에 <!DOCTYPE html>, lang="ko", <meta charset="UTF-8">, <title>이 있다.

• <h1>은 각 페이지에 한 번씩만 쓰였다.

• 모든 <img>에 의미 있는 alt가 있다.

• 메인 ↔ 레시피 페이지 링크가 양방향으로 모두 동작한다.

• 페이지 안 앵커 링크(#id)가 동작한다.

• 외부 링크는 새 탭(target="_blank")으로 열린다.

• 표의 행·열 구조와 병합(colspan/rowspan)이 깨지지 않았다.