Learn HTML & CSS첫 HTML 페이지 만들기
모든 HTML 문서는 똑같이 작은 틀을 공유합니다. 문서 타입을 선언하는 줄, 모든 것을 감싸는 루트 요소, 페이지에 대한 정보를 담는 head, 그리고 사람들이 눈으로 보는 내용을 담는 body입니다. 이 장에서는 이 틀을 한 줄씩 뜯어본 다음, 브라우저로 열 수 있는 파일로 저장해봅니다.
문서 골격
모든 페이지가 시작하는 골격입니다. 그대로 복사한 다음 body 안쪽 내용만 바꾸면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My first page</title>
</head>
<body>
<h1>Hello</h1>
<p>This is my first web page.</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>My recipe notes</title>
</head>
<body>
<h1>Banana bread</h1>
<p>Mix, pour, bake for an hour.</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>My first page</title>
</head>첫 번째 줄은 브라우저에게 텍스트를 어떻게 읽어야 하는지 알려줍니다. 그래서 강세가 붙은 글자, 곡선형 인용 부호, 이모지가 이상한 기호로 바뀌지 않고 제대로 나옵니다. 두 번째 줄은 브라우저에게 페이지를 화면 너비에 맞추라고 알려주는데, 덕분에 데스크톱 페이지를 그대로 축소한 작은 화면이 아니라 스마트폰에서도 제대로 보이게 됩니다. 아직 단어 하나하나를 이해할 필요는 없습니다. 두 줄 모두 head 상단 근처에 넣어두면 페이지가 제대로 동작할 것입니다.
.html 파일 저장하고 열어보기
HTML 페이지는 평범한 텍스트 파일이므로 어떤 텍스트 편집기로도 만들 수 있습니다. 중요한 딱 한 가지는 이름입니다. .html로 끝나도록 저장하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My first page</title>
</head>
<body>
<h1>Hello</h1>
<p>This is my first web page.</p>
</body>
</html>이것을 index.html로 저장하세요. 그런 다음 컴퓨터에서 그 파일을 찾아서 더블클릭하면 브라우저에서 열리며 제목과 문단이 보입니다. 서버를 시작할 필요도, 뭔가를 설치할 필요도 없습니다. .html이라는 확장자는 컴퓨터에게 이 파일을 코드 더미가 아니라 웹 페이지로 열라고 알려주는 신호입니다. 단어를 바꾸고, 저장하고, 브라우저 탭을 새로고침하면 바로 업데이트된 결과를 볼 수 있습니다.
.html로 끝나는 텍스트 파일입니다. index.html로 저장하고 더블클릭하면 브라우저가 바로 열어줍니다. 별다른 설정이 필요 없습니다. 변경 사항을 확인하려면 파일을 저장하고 탭을 새로고침하면 됩니다. 이 저장하고 새로고침하는 흐름이 페이지를 만드는 작업의 전부입니다.