본문으로 건너뛰기

레시피 한 페이지 만들기

HTML·CSS 목차CSS 첫걸음레슨 24 / 93

목차

레시피 한 페이지 만들기는 1~4단원에서 배운 HTML과 CSS로 김치볶음밥 페이지 하나를 처음부터 끝까지 만드는 실습입니다. 뼈대 · 글과 목록 · 링크와 그림 · style.css 잇기 · 글꼴과 색 · 찾는 차례로 확인, 하위 목표 여섯을 차례로 따라갑니다.

걸리는 시간은 40분 안팎입니다. 하위 목표 하나를 마칠 때마다 저장하고 새로고침해 그 하위 목표의 확인 목록을 봅니다. 거기서 멈췄다가 다음 하위 목표부터 이어 해도 됩니다. 컴퓨터가 있다면 직접 쳐서 브라우저로 열어 보고, 폰으로만 보고 있다면 코드를 읽으며 확인 문제의 순서 맞추기로 따라옵니다.

2~3단원 연습 문제에서 레시피 노트를 만들어 두었다면 하위 목표 1~3은 끝났습니다. 2절 끝 '이 단계 시작 파일'과 견줘 보고 3절부터 하면 됩니다.

9단계 중 1단계. 하위 목표 2 글과 목록:. 페이지의 제목은 h1 하나입니다. 탭의 글은 title이 맡습니다.

1무엇을 만드나 — 하위 목표 여섯

이 레슨은 레시피 노트 폴더에 상세 페이지 kimchi.html을 만들고, style.css로 두 페이지를 함께 꾸밉니다.

recipe-note/
├── index.html
├── kimchi.html
├── style.css
└── images/
    └── kimchi.svg
하위 목표하는 일
1. 뼈대문서 뼈대를 쓰고 kimchi.html로 저장
2. 글과 목록제목 · 정보 줄 · 소개 · 재료 · 조리 순서
3. 링크와 그림목록 링크 · 그림과 캡션 · 조리 순서로 가는 링크
4. style.css 잇기style.css를 만들어 두 페이지에 link
5. 글꼴과 색body 글자 · 제목 크기 · 링크 색
6. 찾는 차례로 확인확인 목록 · 검사기

2뼈대 · 글과 목록 · 링크와 그림

하위 목표 1 — 뼈대

recipe-note 폴더에 새 파일 kimchi.html을 만들고 문서 뼈대를 씁니다(문서 뼈대).

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width"
  />
  <title>김치볶음밥</title>
</head>
<body>
</body>
</html>
결과 화면탭: 김치볶음밥

확인 목록: 탭에 '김치볶음밥'이 보인다. 아직 body가 비어 있어 페이지는 하얗습니다.

하위 목표 2 — 글과 목록

body 안에 제목 · 정보 줄 · 소개 · 재료를 씁니다. 재료는 차례가 없어 ul입니다(목록 ul·ol·li).

<h1>김치볶음밥</h1>
<p>한식 · 조리 15분 · 2인분</p>
<p>
  <strong>잘 익은 김치</strong>와
  찬밥만 있으면 십오 분 만에
  끝나는 한 그릇 요리입니다.
</p>
<h2>재료</h2>
<ul>
  <li>밥 2공기</li>
  <li>잘 익은 김치 1컵</li>
  <li>달걀 2개</li>
  <li>참기름 1큰술</li>
  <li>김가루 조금</li>
</ul>
결과 화면
잰 값개발자 도구에서 본 값
  • li의 font-size16px
  • ul의 list-style-typedisc

소개 문단은 빈칸 자리에서만 줄을 나눴습니다. </strong> 뒤의 '와'를 다음 줄로 넘기면 '김치 와'처럼 빈칸이 생깁니다.

이어서 조리 순서를 씁니다. 차례가 있어 ol이고, 긴 단계는 li의 내용을 다음 줄로 내렸습니다.

<h2>조리 순서</h2>
<ol>
  <li>
    김치를 한입 크기로 썹니다.
  </li>
  <li>
    달군 팬에 기름을 두르고
    김치를 3분간 볶습니다.
  </li>
  …
</ol>

나머지 세 단계도 같은 꼴입니다(전체는 아래 '이 단계 시작 파일'). 확인 목록: 재료는 점 목록, 조리 순서는 1~5 번호다.

하위 목표 3 — 링크와 그림

맨 위, 제목 앞에 목록 페이지로 가는 링크를 넣습니다. index.html은 kimchi.html과 같은 폴더에 있습니다(링크 a).

<p>
  <a href="index.html">
    레시피 목록으로
  </a>
</p>
<h1>김치볶음밥</h1>
<p>한식 · 조리 15분 · 2인분</p>
결과 화면

정보 줄 아래에는 그림과 캡션을 figure로 묶어 넣습니다. 그림 파일 kimchi.svg는 그림 넣기 img의 해 보기에서 받습니다.

<figure>
  <img
    src="images/kimchi.svg"
    alt="김치볶음밥 한 그릇"
    width="200"
    height="150"
  />
  <figcaption>
    달걀은 반숙으로 올립니다.
  </figcaption>
</figure>
결과 화면
잰 값개발자 도구에서 본 값
  • img의 파일kimchi.svg
  • img의 너비200px

figure는 기본 스타일이 좌우에 바깥 여백 40px을 두어, 그림을 크게 적으면 좁은 화면에서 가로로 넘칩니다. 결과 화면에 들도록 200으로 적었습니다(화면 폭에 맞춰 줄이는 법은 15단원).

소개 문단 아래에는 조리 순서로 바로 가는 링크를 두고, 조리 순서 제목에 id를 붙입니다(같은 페이지 안에서 옮겨 가기).

<p>
  <a href="#steps">조리 순서</a>
</p>
…
<h2 id="steps">조리 순서</h2>

확인 목록: 그림이 보이고, '조리 순서'를 누르면 그 제목으로, '레시피 목록으로'를 누르면 목록 페이지로 옮겨 간다.

이 단계 시작 파일 — 하위 목표 1~3을 마친 kimchi.html
<!-- kimchi.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width"
  />
  <title>김치볶음밥</title>
</head>
<body>
  <p>
    <a href="index.html">
      레시피 목록으로
    </a>
  </p>
  <h1>김치볶음밥</h1>
  <p>한식 · 조리 15분 · 2인분</p>
  <figure>
    <img
      src="images/kimchi.svg"
      alt="김치볶음밥 한 그릇"
      width="200"
      height="150"
    />
    <figcaption>
      달걀은 반숙으로 올립니다.
    </figcaption>
  </figure>
  <p>
    <strong>잘 익은 김치</strong>와
    찬밥만 있으면 십오 분 만에
    끝나는 한 그릇 요리입니다.
  </p>
  <p>
    <a href="#steps">조리 순서</a>
  </p>
  <h2>재료</h2>
  <ul>
    <li>밥 2공기</li>
    <li>잘 익은 김치 1컵</li>
    <li>달걀 2개</li>
    <li>참기름 1큰술</li>
    <li>김가루 조금</li>
  </ul>
  <h2 id="steps">조리 순서</h2>
  <ol>
    <li>
      김치를 한입 크기로 썹니다.
    </li>
    <li>
      달군 팬에 기름을 두르고
      김치를 3분간 볶습니다.
    </li>
    <li>
      밥을 넣고 김치와 고루
      섞어 가며 볶습니다.
    </li>
    <li>
      참기름을 두르고 불을 끕니다.
    </li>
    <li>
      달걀 프라이와 김가루를
      올려 냅니다.
    </li>
  </ol>
</body>
</html>
결과 화면탭: 김치볶음밥
이 단계 시작 파일 — 목록 페이지 index.html
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width"
  />
  <title>레시피 노트</title>
</head>
<body>
  <h1>레시피 노트</h1>
  <ul>
    <li>
      <a href="kimchi.html">
        김치볶음밥 레시피
      </a>
    </li>
    <li>계란말이</li>
    <li>된장찌개</li>
    <li>떡볶이</li>
    <li>잡채</li>
    <li>미역국</li>
  </ul>
</body>
</html>
결과 화면탭: 레시피 노트

3style.css 잇기 · 글꼴과 색

하위 목표 4 — style.css 잇기

recipe-note 폴더에 style.css를 만들고, 이어졌는지 바로 보이게 배경색 규칙 하나만 씁니다.

/* style.css */
body {
  background-color: #f5f5f7;
}

두 HTML 파일의 head 안, title 바로 아래에 같은 link 줄을 넣습니다(CSS 연결하기).

<head>
  …
  <title>김치볶음밥</title>
  <link
    rel="stylesheet"
    href="style.css"
  />
</head>

확인 목록: 두 페이지의 바탕이 연회색이다. 흰색과 차이가 작아 잘 안 보이면 개발자 도구에서 body를 골라 Styles 창에 style.css의 규칙이 보이는지 봅니다.

하위 목표 5 — 글꼴과 색

body 규칙에 글자 선언을 더합니다. 글꼴 · 글자색 · 줄 높이는 body에 한 번 적으면 안쪽 요소가 물려받습니다(글자 꾸미기).

<p>
  <a href="index.html">
    레시피 목록으로
  </a>
</p>
<h1>김치볶음밥</h1>
<p>한식 · 조리 15분 · 2인분</p>
<h2>재료</h2>
/* style.css */
body {
  background-color: #f5f5f7;
  color: #1d1d1f;
  font-family:
    system-ui,
    sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
결과 화면
잰 값개발자 도구에서 본 값
  • body의 background-colorrgb(245, 245, 247)
  • p의 글자색rgb(29, 29, 31)
  • p의 line-height25.6px

이어서 제목 크기와 링크 색 규칙을 붙입니다.

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

a {
  color: #005bb5;
}
결과 화면
잰 값개발자 도구에서 본 값
  • h2의 font-size22px
  • h2의 line-height35.2px
  • a의 글자색rgb(0, 91, 181)
  • a의 text-decoration-lineunderline

링크는 body의 글자색을 물려받지 않아 a 규칙으로 따로 칠했습니다. 밑줄은 링크라는 표시라 그대로 둡니다. 확인 목록: 링크가 진한 파랑이고 밑줄이 있다.

4찾는 차례로 확인

두 파일을 저장하고 새로고침한 뒤 확인 목록을 하나씩 봅니다.

  • 탭에 '김치볶음밥'이 보인다 — 화면
  • 재료는 점 목록, 조리 순서는 1~5 번호다 — 화면
  • 그림이 보이고, '조리 순서'와 '레시피 목록으로' 링크가 옮겨 간다 — 화면
  • 두 페이지의 바탕이 같은 연회색이다 — 화면 · Styles 창
  • 링크가 진한 파랑이고 밑줄이 있다 — 화면 · Styles 창
  • 모든 그림에 alt가 있다 — Elements 패널
  • 검사기 Error가 0이다 — 검사기(Info는 접어 둠)

맞지 않는 줄이 있으면 안 먹을 때 찾는 차례대로 찾습니다. 그림이 깨져 나오면 1번(파일이 닿았나 — src 주소와 images 폴더)부터 봅니다. 검사기는 HTML의 문법을 볼 뿐 그 주소에 파일이 있는지는 모릅니다.

검사기는 검사기로 틀린 HTML 찾기에서처럼 kimchi.html 전체를 W3C 검사기에 붙여 넣어 봅니다. Error만 먼저 봅니다. 빈 요소의 />에 붙는 Info는 고치지 않아도 됩니다.

예제

완성한 세 파일

하위 목표 여섯을 마친 kimchi.html과 style.css입니다. 검사기 칸은 kimchi.html을 W3C 검사기에 넣은 결과입니다.

kimchi.html · style.css 전체 보기
<!-- kimchi.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width"
  />
  <title>김치볶음밥</title>
  <link
    rel="stylesheet"
    href="style.css"
  />
</head>
<body>
  <p>
    <a href="index.html">
      레시피 목록으로
    </a>
  </p>
  <h1>김치볶음밥</h1>
  <p>한식 · 조리 15분 · 2인분</p>
  <figure>
    <img
      src="images/kimchi.svg"
      alt="김치볶음밥 한 그릇"
      width="200"
      height="150"
    />
    <figcaption>
      달걀은 반숙으로 올립니다.
    </figcaption>
  </figure>
  <p>
    <strong>잘 익은 김치</strong>와
    찬밥만 있으면 십오 분 만에
    끝나는 한 그릇 요리입니다.
  </p>
  <p>
    <a href="#steps">조리 순서</a>
  </p>
  <h2>재료</h2>
  <ul>
    <li>밥 2공기</li>
    <li>잘 익은 김치 1컵</li>
    <li>달걀 2개</li>
    <li>참기름 1큰술</li>
    <li>김가루 조금</li>
  </ul>
  <h2 id="steps">조리 순서</h2>
  <ol>
    <li>
      김치를 한입 크기로 썹니다.
    </li>
    <li>
      달군 팬에 기름을 두르고
      김치를 3분간 볶습니다.
    </li>
    <li>
      밥을 넣고 김치와 고루
      섞어 가며 볶습니다.
    </li>
    <li>
      참기름을 두르고 불을 끕니다.
    </li>
    <li>
      달걀 프라이와 김가루를
      올려 냅니다.
    </li>
  </ol>
</body>
</html>
/* style.css */
body {
  background-color: #f5f5f7;
  color: #1d1d1f;
  font-family:
    system-ui,
    sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

a {
  color: #005bb5;
}
결과 화면탭: 김치볶음밥
검사기Error · Warning 0

Document checking completed. No errors or warnings to show.

목록 페이지 index.html은 '이 단계 시작 파일'의 head에 link 줄 넷만 더한 것입니다.

자주 틀리는 곳

틀린 생각: 끝까지 다 쳐 놓고 한 번에 열어 보면 된다.

하위 목표 여섯을 한꺼번에 쳐서 열면 틀린 곳이 생겼을 때 어느 하위 목표에서 생겼는지 모릅니다. 화면에는 오류 메시지도 없습니다.

맞는 규칙: 하위 목표 하나를 마칠 때마다 저장하고 새로고침해 그 하위 목표의 확인 목록을 봅니다. 틀린 곳은 방금 친 몇 줄 안에 있습니다.

틀린 생각: 화면이 대충 맞아 보이면 확인 목록은 건너뛰어도 된다.

alt가 빠져도 그림은 보이고, 링크의 href가 틀려도 글자는 파랗게 보입니다. 화면만 봐서는 드러나지 않는 틀림이 있습니다.

맞는 규칙: 확인 목록을 한 줄씩, 적힌 볼 곳(화면 · Elements 패널 · Styles 창 · 검사기)에서 봅니다.

틀린 생각: style.css를 상세 페이지에 이었으면 목록 페이지도 꾸며진다.

link 줄은 그 줄을 쓴 페이지에만 style.css를 잇습니다. 목록 페이지에 줄을 빠뜨리면 상세 페이지만 연회색 바탕이고 목록 페이지는 흰 바탕 그대로입니다.

맞는 규칙: style.css를 쓸 페이지마다 head에 link 줄을 넣습니다.

확인 문제

1. 완성한 style.css에서 맨 아래 a 규칙을 지우면 '레시피 목록으로'와 '조리 순서' 링크의 글자색은 어떻게 될까요?

  • ① 본문과 같은 짙은 회색(#1d1d1f)
  • ② 브라우저 기본 링크 파랑
  • ③ 진한 파랑(#005bb5) 그대로
힌트

a 규칙을 지운 뒤에도 링크에 글자색을 줄 수 있는 곳을 모두 떠올려 보세요.

힌트 둘

body에 준 글자색을 링크가 물려받는지 보세요. 링크에는 기본 스타일이 주는 글자색이 있습니다.

정답

② — 기본 스타일의 링크 파랑으로 돌아갑니다.

<p>
  <a href="index.html">
    레시피 목록으로
  </a>
</p>
<p>한식 · 조리 15분 · 2인분</p>
body {
  color: #1d1d1f;
}
결과 화면
잰 값개발자 도구에서 본 값
  • a의 글자색rgb(0, 0, 238)
  • p의 글자색rgb(29, 29, 31)
  • 링크는 기본 스타일이 글자색을 따로 줘서 body의 색을 물려받지 않습니다. a 규칙을 지우면 기본 스타일의 파랑이 남습니다(크롬 기준).
  • ①은 body의 글자색을 모든 요소가 물려받는다고 본 것입니다(다 물려받는다는 생각). 제 값이 있는 링크는 물려받지 않습니다.
  • ③은 한 번 칠한 색이 남는다고 본 것입니다. 규칙을 지우면 그 선언도 사라집니다.

2. 하위 목표로 다시 조립합니다.

(가) 하위 목표 여섯의 차례가 섞였습니다. 처음부터 차례로 기호를 늘어놓으세요.

  • ㉠ 글꼴과 색
  • ㉡ 뼈대
  • ㉢ 찾는 차례로 확인
  • ㉣ style.css 잇기
  • ㉤ 링크와 그림
  • ㉥ 글과 목록

(나) 하위 목표 4의 link 줄 넷을 통째로 비웠습니다. ____ 자리에 쓰세요.

<head>
  <meta charset="utf-8" />
  <title>김치볶음밥</title>
  ____
</head>
힌트

(가)는 1절의 표를 떠올립니다. (나)는 CSS 연결하기의 link 한 줄 읽기 표 — 관계와 주소 — 를 보세요.

정답

(가) ㉡ ㉥ ㉤ ㉣ ㉠ ㉢ — 뼈대 · 글과 목록 · 링크와 그림 · style.css 잇기 · 글꼴과 색 · 찾는 차례로 확인입니다. 4(잇기)가 5(글꼴과 색)보다 앞이라, 색이 안 바뀌면 규칙보다 먼저 파일이 닿았는지를 의심할 수 있습니다.

(나) title 아래 넷째 줄 자리에 이 네 줄을 씁니다.

<head>
  …
  <link
    rel="stylesheet"
    href="style.css"
  />
</head>

다르게 써도 되는 곳: 네 줄을 한 줄로 이어 써도 같은 요소입니다. rel과 href의 차례를 바꿔도 같습니다.

  • 흔한 오답은 rel="stylesheet"를 빠뜨린 것입니다. 브라우저가 그 파일을 모양을 적은 파일로 쓰지 않아 CSS가 하나도 닿지 않습니다.

3. 동아리 공지 페이지에 떡볶이 그림을 넣었는데 깨진 표시와 '떡볶이' 글만 보입니다. 폴더는 아래와 같습니다. 몇 번 줄을 어떻게 고쳐야 할까요? 고친 줄을 쓰세요.

club/
├── notice.html
└── images/
    └── tteokbokki.svg

<h1>금요일 분식 모임</h1>
<img
  src="image/tteokbokki.svg"
  alt="떡볶이"
  width="200"
  height="150"
/>
결과 화면일부러 틀린 코드
힌트

깨진 표시가 찾는 차례 몇 번에 걸리는지부터 정하고, 폴더 나무와 코드를 나란히 보세요.

힌트 둘

찾는 차례 1번 — 파일이 닿았나. src의 폴더 이름을 폴더 나무와 한 글자씩 견줘 보세요.

정답

3번 줄을 src="images/tteokbokki.svg"⁠로 고칩니다.

<h1>금요일 분식 모임</h1>
<img
  src="images/tteokbokki.svg"
  alt="떡볶이"
  width="200"
  height="150"
/>
결과 화면
잰 값개발자 도구에서 본 값
  • img의 파일tteokbokki.svg

찾는 차례 1번에서 찾습니다. 폴더 이름이 images인데 주소에는 image(s 빠짐)라고 적어 브라우저가 없는 폴더에서 그림을 찾았습니다(브라우저 규칙 1). 그림을 받지 못해 깨진 표시와 alt 글이 그 자리에 그려졌습니다.

  • 흔한 오답은 검사기부터 돌리는 것입니다. 이 코드는 검사기 Error가 0입니다 — 검사기는 그 주소에 파일이 있는지 보지 않습니다.
  • 그림 파일을 club 폴더로 옮기고 src="tteokbokki.svg"로 바꿔도 그림은 보이지만, 그림을 images 폴더에 모으는 약속이 깨집니다.

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 완성한 kimchi.html과 style.css를 저장해 엽니다. style.css의 #005bb5를 #d70015로 바꾸면 두 페이지의 링크가 어떻게 될지 먼저 적고, 저장하고 두 페이지를 새로고침해 맞춰 봅니다. 확인했으면 되돌립니다.

끝까지 내려오면 저절로 표시됩니다. 이 기기에만 저장합니다.

HTML·CSS 목차로