당신의 첫 HTML 페이지
모든 HTML 문서는 동일한 구조를 공유합니다: 문서 유형을 선언하는 한 줄, 모든 것을 감싸는 루트 요소, 페이지 정보를 담는 head, 그리고 사람들이 보는 콘텐츠를 담는 body입니다. 이 장에서는 이 구조를 한 줄씩 분해하고 브라우저에서 열 수 있는 파일로 저장합니다.
문서 스켈레톤
모든 페이지가 시작하는 스켈레톤입니다. 정확히 복사하고 body 안의 부분만 변경하면 됩니다:
<!DOCTYPE html>
<html lang="en">
<head>
<title>내 첫 페이지</title>
</head>
<body>
<h1>안녕하세요</h1>
<p>이것이 내 첫 웹 페이지입니다.</p>
</body>
</html>첫 줄인 <!DOCTYPE html>은 브라우저에 이것이 최신 HTML 페이지라고 알립니다. 그 다음에는 페이지의 다른 모든 것을 감싸는 루트 요소 <html>이 옵니다. 그 안에는 두 개의 상자가 있습니다: <head>는 뒤에서 숨겨진 정보용이고, <body>는 방문자가 보는 단어와 그림용입니다. 당신의 제목과 단락은 body에 들어가야 합니다. 왜냐하면 그것이 보여지는 부분이기 때문입니다.
전체를 라벨이 붙은 소포로 생각하세요. doctype은 어떤 배송 시스템을 사용할지 말해주는 우표이고, <html>은 상자이며, head는 바깥쪽 라벨이고, body는 안에 들어있는 것입니다.
<!DOCTYPE html>, 그 다음 <html>이 <head>와 <body>를 감싸는 것입니다. 그대로 복사하고 body에 당신의 말을 넣으세요. 아직 이것을 암기해야 할 필요는 없습니다. 당신이 충분히 여러 번 입력하면 자연스럽게 기억됩니다. head와 body에 무엇이 들어가는가
<html> 안의 두 상자는 다른 역할을 합니다. <head>는 브라우저가 알아야 하지만 방문자가 페이지에서 읽지 않는 것들을 담습니다. <body>는 방문자가 보는 모든 것을 담습니다.
<head>
<title>내 레시피 노트</title>
</head>
<body>
<h1>바나나 브레드</h1>
<p>섞고, 붓고, 한 시간 동안 구우세요.</p>
</body><title>은 head에 있으며, 이것이 페이지의 이름입니다: 페이지 중간이 아니라 브라우저 탭에 나타납니다. 제목과 단락은 body에 있으므로 페이지 자체에 나타납니다. 시작할 때의 간단한 규칙: 방문자가 읽어야 하면 body에 들어갑니다.
<title>은 head에 있고 브라우저 탭의 이름입니다. 당신의 제목과 단락은 사람들이 읽는 body에 있습니다. 방문자가 봐야 하면 body에 들어갑니다. 이 한 가지 질문으로 거의 모든 것이 분류됩니다. 문자 집합과 뷰포트
거의 모든 페이지의 head에 두 줄 더 들어갑니다. 그대로 복사하면 됩니다:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>내 첫 페이지</title>
</head>첫 번째 줄은 브라우저에 당신의 텍스트를 읽는 방법을 알려서 악센트가 있는 글자, 구부러진 따옴표, 그리고 이모지가 이상한 기호로 바뀌지 않고 올바르게 표시되도록 합니다. 두 번째 줄은 브라우저에 페이지를 화면의 너비에 맞추도록 알려서, 데스크톱 페이지의 작은 축소 버전이 아닌 휴대폰에서 이해하기 쉽게 보이도록 합니다. 아직 모든 단어를 이해할 필요는 없습니다. 둘 다 head의 상단 근처에 넣으면 당신의 페이지가 제대로 동작합니다.
.html 파일 저장 및 열기
HTML 페이지는 평문 파일이므로 모든 텍스트 편집기에서 만들 수 있습니다. 중요한 한 가지는 이름입니다: .html로 끝나도록 저장하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>내 첫 페이지</title>
</head>
<body>
<h1>안녕하세요</h1>
<p>이것이 내 첫 웹 페이지입니다.</p>
</body>
</html>이것을 index.html로 저장하세요. 그 다음 당신의 컴퓨터에서 파일을 찾아 더블 클릭하세요: 브라우저에서 열리고 당신의 제목과 단락을 표시합니다. 시작할 서버가 없고 설치할 것도 없습니다. .html 끝은 당신의 컴퓨터에 이것을 코드의 벽이 아닌 웹 페이지로 열도록 알려주는 신호입니다. 단어를 변경하고 저장한 다음 브라우저 탭을 새로 고쳐서 업데이트를 보세요.
.html로 끝나는 텍스트 파일입니다. 당신의 것을 index.html로 저장하고, 더블 클릭하면, 브라우저가 즉시 열어줍니다. 셋업이 전혀 없습니다. 변경을 보려면 파일을 저장하고 탭을 새로 고치세요. 그 저장-그리고-새로-고침 루프는 페이지를 구축하는 전체 리듬입니다.