작은 페이지 만들기
동네 빵집의 한 페이지짜리 사이트는 HTML 약 50줄이면 되고, 그 안의 요소는 모두 지난 아홉 단원에서 배운 것입니다.
입력하기 전에 계획하기
HTML을 쓰기 전에 페이지가 말해야 할 내용을 평범한 말로 순서대로 적어 보세요. 작은 빵집이라면 이름, 짧은 링크 메뉴, 오늘 굽는 빵, 영업시간, 빵 사진, 소식 받기 신청, 주소 정도일 것입니다. 그러면 항목마다 요소가 떠오릅니다. 이름은 <header> 안의 <h1>, 링크는 <nav>, 영업시간은 표, 빵 목록은 <ul>, 신청은 입력 양식, 주소는 <footer>입니다. 내용을 먼저 정하는 것은 전문 팀도 똑같이 하는 일이고, HTML은 그 내용을 따라갑니다.
완성된 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Corner Bakery</title>
</head>
<body>
<header>
<h1>Corner Bakery</h1>
<nav>
<ul>
<li><a href="#today">Today</a></li>
<li><a href="#hours">Hours</a></li>
<li><a href="#news">News</a></li>
</ul>
</nav>
</header>
<main>
<section id="today">
<h2>Baked today</h2>
<ul>...</ul>
</section>
<section id="hours">
<h2>Opening hours</h2>
<table>...</table>
</section>
<section id="news">
<h2>Get our news</h2>
<form>...</form>
</section>
</main>
<footer>
<p>12 Mill Street, Springfield</p>
</footer>
</body>
</html>head에 새로운 줄이 두 개 있습니다. <meta name="viewport" content="width=device-width, initial-scale=1">는 휴대전화가 데스크톱 화면인 양 페이지를 줄여 보여 주지 말고 실제 화면 너비를 쓰라고 알려 줍니다. 자세한 내용은 CSS 과정의 반응형 디자인 단원에서 다룹니다. 메뉴는 <nav> 안의 링크 목록이어서 화면 낭독기가 「탐색, 목록, 항목 3개」라고 알려 줍니다. 메뉴 링크는 각각 section의 id를 가리키므로, 페이지 전체가 하나의 스크롤 문서처럼 작동합니다.
검토자처럼 확인하기
페이지를 다 썼다면 꼼꼼한 검토자처럼 훑어 보세요. 제목만 읽어 봅니다. 제목만으로 페이지 내용이 전해지나요? 맨 위에서부터 Tab을 눌러 봅니다. 모든 링크와 입력 칸에 자연스러운 순서로 닿고, 초점이 어디 있는지 보이나요? 그림을 하나씩 봅니다. alt가 그림이 없을 때 잃는 내용을 말해 주나요, 아니면 꾸밈용이라 비어 있나요? 이름표를 하나씩 눌러 봅니다. 자기 칸으로 초점이 가나요? 끝으로 validator.w3.org의 W3C 마크업 검사 서비스에 페이지를 붙여 넣으면, 닫지 않은 요소나 겹친 id 같은 실수를 목록으로 보여 줍니다.
페이지는 수수해 보일 것입니다. 흰 바탕에 검은 글자, 파란 링크, 브라우저 기본 글꼴이죠. 그래도 괜찮고 오히려 쓸모가 있습니다. HTML을 잘 쓴 페이지는 이미 어느 기기에서나 읽을 수 있고, 키보드와 화면 낭독기로 쓸 수 있으며, 인쇄도 됩니다. CSS 과정은 바로 이런 페이지에서 시작해, HTML은 한 줄도 바꾸지 않고 그 위에 색, 간격, 배치를 더합니다.
조금씩 만들기
페이지는 조금씩 쓰고, 한 단계가 끝날 때마다 결과를 봅니다. 뼈대를 먼저, 그다음 머리말과 메뉴, 그다음 단락을 하나씩 씁니다. 뭔가 이상해 보여도 새로 쓴 몇 줄만 다시 보면 됩니다. 내 컴퓨터에서는 파일을 index.html로 저장하고 두 번 눌러 열면, 브라우저가 디스크에서 바로 보여 줍니다. 공개하려면 같은 파일을 웹 호스팅에 올리면 됩니다. 그러면 첫 단원에서 본 것처럼, 주소를 요청하는 누구에게나 서버가 그 파일을 보내 줍니다.
| viewport meta | 휴대전화에 실제 화면 너비를 쓰라고 알림 |
| 검사기(validator) | validator.w3.org가 HTML 실수를 목록으로 보여 줌 |
| 초점 | 지금 키보드 입력을 받는 요소 |
| 내용 먼저 | 페이지가 할 말을 정한 뒤 요소를 고릅니다 |
| 한 페이지 사이트 | 메뉴 링크가 같은 페이지의 section id를 가리킴 |
- 빵집 영업시간에 맞는 요소는?
- a table
- a nav
- an aside
- 빵집 이름은 어디에 둔까요?
- header 안의 h1
- footer 안의 p
- 그림의 alt
- 메뉴 링크가 #hours를 가리킵니다. 페이지에 무엇이 있어야 할까요?
- id="hours"인 요소
- hours.html 파일
- hours라는 클래스
- viewport meta 태그가 하는 일은?
- 휴대전화가 실제 화면 너비를 쓰게 함
- 메뉴를 추가함
- 언어를 정함
- 키보드 접근성을 확인할 때 여러 번 누르는 키는?
- Tab
- Esc
- Delete
- 겹친 id 같은 HTML 실수를 목록으로 보여 주는 서비스는?
- validator.w3.org
- caniuse.com
- example.com
- 소식 받기 신청 칸은?
- 이름표가 붙은 이메일 칸이 있는 form
- 메일을 보내 달라는 문단
- 표
- 바깥에서 안쪽 순서로: body, main, section, h2
- CSS 없이 페이지가 수수해 보입니다. 문제일까요?
- 아닙니다. 읽을 수 있고 접근할 수 있으며, 모양은 CSS가 더합니다
- 그렇습니다. HTML이 틀렸습니다
- 그렇습니다. 브라우저는 CSS가 있어야 글을 보여 줍니다
- 내용을 순서대로 정한 뒤 부분마다 요소를 고릅니다.
- 뼈대, nav가 든 header, section이 든 main, footer.
- 제목, Tab, alt, 이름표, W3C 검사기로 확인합니다.