문서 뼈대

문서 뼈대는 모든 HTML 파일이 똑같이 갖는 틀입니다. html 안에 head와 body가 들고, head에는 탭 제목 같은 문서 정보를, body에는 페이지에 그릴 내용을 담습니다.

준비 레슨의 hello.html은 <h1> 한 줄뿐이었습니다. 그래도 그려지지만, 뼈대가 없으면 브라우저는 옛 페이지를 흉내 내는 방식으로 그리고, 글자를 읽는 방식도 짐작해야 합니다. 뼈대를 갖추면 이 문서가 요즘 규칙의 HTML이라는 것, 글자를 읽는 방식, 탭에 보일 제목을 브라우저에 알릴 수 있습니다. 이 레슨에서는 뼈대의 글이 각각 어디에 보이는지 따라갑니다.

<!DOCTYPE html><html lang="ko"><head>  <meta charset="utf-8" />  <title>김치볶음밥</title></head><body>  <h1>김치볶음밥</h1></body></html>

1뼈대 열 줄 — 요소 안에 요소가 든다

위 화면 그림의 코드입니다. 줄 번호도 화면 그림과 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <title>김치볶음밥</title>
</head>
<body>
  <h1>김치볶음밥</h1>
</body>
</html>

코드 바로 아래 칸은 이 코드를 브라우저가 그린 모습입니다. 이 과목은 이 칸을 결과 화면이라고 부릅니다. 결과 화면 머리의 탭 모양에는 title의 글이 보입니다. 결과 화면만으로는 볼 수 없는 값은 그 아래 잰 값 칸에 둡니다. 개발자 도구에서 그 요소를 골라 본 값과 같습니다. 위 칸의 '나무'는 head와 body 안에 무엇이 들었는지를 한 줄로 적은 것입니다. 태그 사이의 줄바꿈과 들여쓰기는 빼고 적었고, 실제 나무에는 그대로 남아 있습니다(2단원).

<head>처럼 꺾쇠로 쓴 표시가 태그이고, 여는 태그 <head>부터 닫는 태그 </head>까지가 요소 하나입니다. 요소 안에는 다른 요소가 들 수 있습니다. html이 문서 전체를 감싸고, 그 안에 head와 body가, head 안에 meta와 title이 듭니다. 브라우저는 태그를 읽어 이렇게 요소 안에 요소가 든 차례를 짓습니다. 이것을 요소 나무라고 하고, 자료에 따라 DOM 트리라고도 부릅니다. 화면 그림의 요소 나무 판이 이 나무입니다.

브라우저 규칙 2. 브라우저는 태그를 읽어 요소 나무를 짓고, 화면은 그 나무로 그립니다.

잰 값의 나무에는 meta 끝의 /가 없습니다. /는 닫는 태그가 없는 요소라는 표시일 뿐 나무에는 남지 않습니다(2단원). 틀린 태그를 고쳐 짓는 일과 빈칸을 다루는 일 같은 이 규칙의 나머지도 2단원에서 넓힙니다.

1번 줄 <!DOCTYPE html>은 요소가 아니라 문서 맨 앞에 두는 선언입니다. 브라우저에 요즘 HTML 규칙으로 그리라고 알립니다. 이 줄을 빠뜨려도 겉은 비슷하게 그려집니다. 하지만 브라우저는 아주 옛날 페이지를 흉내 내는 호환 모드(quirks mode)로 그리고, CSS를 쓰기 시작하면 이 과목과 다르게 그려지는 곳이 생깁니다.

들여쓰기는 무엇이 무엇 안에 들었는지를 사람 눈에 보이게 한 것입니다. 이 과목은 모든 파일에 있는 head·body는 들이지 않고, 그 안부터 두 칸씩 들입니다. 들여쓰기의 빈칸을 브라우저가 어떻게 다루는지는 2단원의 공백 규칙과 특수 문자에서 봅니다.

2head — 페이지에 그리지 않는 문서 정보

head 안의 요소는 페이지에 그려지지 않습니다. 문서에 대한 정보를 브라우저에 알리는 자리입니다.

• <title>의 글은 브라우저 탭에 보입니다. 즐겨찾기 이름과 검색 결과의 제목으로도 쓰여, 페이지마다 그 페이지에 맞게 적습니다.
• <meta charset="utf-8" />⁠는 이 파일의 글자를 UTF-8 방식으로 읽으라고 알립니다. UTF-8은 한글을 포함해 세계의 거의 모든 글자를 담는 방식입니다. 이 줄이 없으면 브라우저가 방식을 짐작해야 해서 한글이 깨져 보일 수 있습니다. 브라우저가 파일의 앞부분에서 찾으므로 head를 연 바로 다음 줄에 둡니다.

head를 감싼 <html lang="ko">의 lang="ko"는 이 문서의 글이 한국어라는 표시입니다. 화면 읽기 프로그램(화면의 글을 소리로 읽어 주는 프로그램)은 이 값을 보고 한국어로 읽습니다.

3body — 페이지에 그리는 내용

body 안의 요소가 페이지에 그려집니다. h1은 가장 높은 단계의 제목이라, 브라우저가 페이지 맨 위에 큰 글자로 그립니다. 같은 '김치볶음밥'이라도 title 안이면 탭에, body 안의 h1이면 페이지에 보입니다. 글이 나오는 곳은 그 글이 어느 요소 안에 들었는지가 정합니다.

예제

이 과목에서 HTML 파일을 시작할 때 복사해 두는 뼈대입니다. 화면 그림의 열 줄에 휴대전화용 뷰포트 줄(5~8번 줄)과 문단 한 줄을 더했고, 탭 제목과 페이지 제목을 다르게 적었습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width"
  />
  <title>레시피 노트</title>
</head>
<body>
  <h1>김치볶음밥</h1>
  <p>잘 익은 김치로 만드는 볶음밥</p>
</body>
</html>

이 파일을 열면 탭과 페이지에는 각각 무엇이 보일까요?

이 뼈대는 세 걸음으로 씁니다. 파일마다 바뀌는 것은 title의 글과 body 안뿐입니다.

1. 뼈대 — <!DOCTYPE html>과 html·head·body를 여닫는 줄(1~3·10·11·14·15번 줄)
2. head 채우기 — meta와 title(4~9번 줄)
3. body 채우기 — 페이지에 그릴 내용(12·13번 줄)

복사해 두는 줄 넷은 외우지 않아도 됩니다. 한 줄씩 하는 일만 알아 둡니다.

자주 틀리는 곳

틀린 생각: title에 적은 글이 페이지의 제목으로 보인다.

이름이 '제목(title)'이니 페이지 맨 위에 보일 것처럼 여기게 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <title>김치볶음밥</title>
</head>
<body>
  <p>밥 2공기</p>
</body>
</html>

'김치볶음밥'은 결과 화면의 탭에만 있고, 페이지에는 문단 하나만 보입니다.

맞는 규칙: title의 글은 탭에 보이고, 페이지의 제목은 body 안에 h1으로 적습니다(브라우저 규칙 2).

틀린 생각: head와 header는 같은 것이다.

이름이 비슷해 둘 다 문서 머리를 뜻하는 같은 요소로 여기게 됩니다.

<header>
  <p>레시피 노트</p>
</header>
<h1>김치볶음밥</h1>

header 안의 '레시피 노트'는 페이지에 그려졌습니다. header는 body 안에서 페이지의 머리 부분을 묶는 요소입니다(5단원).

맞는 규칙: head는 뼈대의 문서 정보 자리라 페이지에 그려지지 않고, header는 body 안에서 페이지에 그려지는 요소입니다.

틀린 생각: 첫 줄에 파일 이름 주석을 두면 <!DOCTYPE html>이 먹지 않는다.

이 과목은 파일에 저장할 코드의 첫 줄에 <!-- hello.html -->처럼 파일 이름을 적습니다. 예제의 뼈대도 파일로 저장할 때는 맨 위에 이 줄을 더합니다. <!--와 --> 사이는 화면에 나오지 않는 메모(주석)이고, 자세한 것은 다음 레슨에서 봅니다. 맨 앞이 주석이니 선언이 맨 앞이 아니게 되어 걱정이 됩니다.

<!-- hello.html -->
<!DOCTYPE html>
<html lang="ko">
…

주석 다음에 와도 <!DOCTYPE html>은 그대로 먹습니다. 크롬은 이 문서를 요즘 규칙(표준 모드)으로 그립니다.

맞는 규칙: <!DOCTYPE html>의 앞에는 주석이나 빈 줄만 둡니다. 다른 글이나 태그가 앞에 오면 브라우저는 호환 모드로 그립니다.

틀린 생각: 뷰포트 줄은 필요 없어 보이니 지워도 된다.

컴퓨터에서 열면 뷰포트 줄이 있으나 없으나 똑같이 보여서 지워도 될 것처럼 보입니다. 이 줄을 지우면 휴대전화는 페이지를 넓은 화면 폭으로 그린 뒤 화면에 맞게 줄여 보여, 글자가 작게 보입니다.

맞는 규칙: 뷰포트 줄은 복사해 두는 줄입니다. 지우지 않고 뼈대와 함께 둡니다. 하는 일은 15단원에서 자세히 봅니다.

확인 문제

1. 예제에서 title의 글을 '김치볶음밥'으로, h1의 글을 '레시피 노트'로 서로 바꿨습니다. 탭과 페이지 맨 위에는 각각 무엇이 보일까요?

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width"
  />
  <title>김치볶음밥</title>
</head>
<body>
  <h1>레시피 노트</h1>
  <p>잘 익은 김치로 만드는 볶음밥</p>
</body>
</html>

2. 뼈대의 1번 줄 <!DOCTYPE html> 아래에 올 여섯 줄입니다. 바른 뼈대가 되게 ㉠~㉥을 차례대로 놓으세요.

• ㉠ </head>
• ㉡ <body>
• ㉢ </html>
• ㉣ <html lang="ko">
• ㉤ </body>
• ㉥ <head>

다 놓은 뒤에는 아래 '놓은 뒤 물음'을 펼쳐 하나 더 고르세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  …
</head>
<body>
  …
</body>
</html>

3. 여행 일정 페이지를 만들었는데, 페이지 맨 위에 '제주 여행'이라는 큰 제목이 보이지 않습니다. 결과 화면을 보고, 무엇을 어디에 더해야 할지 쓰세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <title>제주 여행</title>
</head>
<body>
  <p>첫째 날: 성산 일출봉</p>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <title>제주 여행</title>
</head>
<body>
  <h1>제주 여행</h1>
  <p>첫째 날: 성산 일출봉</p>
</body>
</html>

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 준비 레슨의 hello.html을 맨 위 <!-- hello.html --> 한 줄과 이 레슨의 열다섯 줄 뼈대로 다시 씁니다. title에는 내 이름을, h1에는 '안녕하세요'를, <p>에는 나를 소개하는 한 줄을 적고 저장해 브라우저로 엽니다. 그다음 title의 글만 바꿔 저장하고, 브라우저에서 새로고침해 탭 글자가 바뀌는지 봅니다. 저장과 새로고침은 다음 레슨 고친다 → 저장한다 → 새로고침한다에서 자세히 봅니다.