웹 작동 방식 및 첫 번째 페이지

브라우저에 주소를 입력하면 어떤 일이 일어나는지 알아보고 웹사이트의 기반을 구축해.

웹사이트를 열면 어떻게 되나요?

다음과 같은 것을 입력하면www.myschool.com브라우저에 들어가면 다음과 같은 일이 발생해.

브라우저는 인터넷을 통해 웹사이트가 있는 컴퓨터인 서버에 “이봐, 페이지를 보내줘!”라는 메시지를 보냅니다.
서버는 텍스트, 이미지, 코드 등 파일을 응답하고 다시 보냅니다.
브라우저는 해당 파일을 사용하여 화면에 페이지를 그립니다.

서버가 보내는 파일은 HTML이라는 언어로 작성돼. 그리고 그것이 바로 너이 배우려고 하는 것야. 지금은 네 웹사이트가 서버에 있지 않어. 네 컴퓨터에 위치하게 되며 마지막 강의에서 온라인에 게시할 것야.

프로젝트를 선택해

한 줄을 작성하기 전에 실제로 빌드할 무엇을 결정해. 전체 수준에 대해 다음 프로젝트 중 하나를 수행하게 돼.

🏫 우리 학교 홈페이지 – 일정, 점심메뉴, 행사, 선생님
🙋 나의 개인 웹사이트 – 나에 대한 정보, 내가 좋아하는 것, 내가 만든 작품
🌍 여행 일기 – 여행, 사진, 추억
⚽ 스포츠 클럽 웹사이트 – 팀, 경기, 훈련

하나를 골랐나요? 엄청난. 모든 수업의 과제는 네 가지 프로젝트를 모두 다루게 돼. 자신에게 맞는 프로젝트를 찾으세요.

보여줄게: 지구상의 모든 페이지가 시작되는 뼈대

네 웹페이지부터 YouTube 웹페이지까지 모든 웹페이지는 정확히 동일한 골격으로 시작돼.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Page name</title>
  </head>
  <body>
    <h1>A big heading</h1>
    <p>Some text.</p>
  </body>
</html>

이를 일반 영어로 번역해 보겠어.

코드	브라우저에 알려주는 내용
`<!doctype html>`	”주의해. HTML 페이지가 시작돼!”
`<html lang="en">`	”안에 있는 모든 내용은 한 페이지로 구성되어 있으며 영어로 되어 있어.”
`<head>`…`</head>`	”페이지에 대한 *정보는 다음과 같어.” 방문객들은 그것을 볼 수 없어.
`<meta charset="UTF-8">`	”여기에는 특수 문자가 있을 수 있어. 그에 대비해.”
`<title>`…`</title>`	페이지 이름 – 브라우저 탭에 표시돼.
`<body>`…`</body>`	”방문자가 실제로 보는 모든 것은 여기에서 시작돼.” 모든 콘텐츠가 여기에 들어갑니다.

태그 작동 방식을 확인해.<h1>뭔가를 열고 그리고</h1>(슬래시 포함) 다시 닫어. 그들 사이에 있는 것은 무엇이든 그 태그에 속해. 괄호와 같어.

네 차례 💪

네`my-website`VS Code의 폴더(준비 수준)를 열고`index.html`그 안에 파일이 있어. 거기에 있는 것을 모두 삭제하고 위 예의 페이지 뼈대를 입력해.

변경``그리고`<h1>`프로젝트에 맞게 추가하고`<p>`네 웹사이트가 무엇인지에 대한 한 문장으로 제목 아래 단락을 작성해.</li> <li>저장(Ctrl+S)하고 열기`index.html`브라우저에서(또는 F5를 눌러 페이지를 새로 고침)</li> </ol>방법을 모르시나요? 각 프로젝트에 대한 솔루션은 다음과 같어.<details> <summary>🏫 해결 방법: 우리 학교 웹사이트</summary> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Riverside Elementary</title> </head> <body> <h1>Riverside Elementary School</h1> <p>Welcome to our school's website. You'll find the schedule, lunch menu, and photos from events here.</p> </body> </html>

🙋 해결 방법: 내 개인 웹사이트

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jake Miller</title>
  </head>
  <body>
    <h1>Hi, I'm Jake</h1>
    <p>This is my website. I love soccer, Minecraft, and building websites.</p>
  </body>
</html>

🌍 솔루션: 여행 일지

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Where We've Been</title>
  </head>
  <body>
    <h1>Where We've Been 🌍</h1>
    <p>A journal of our trips and adventures. A new story gets added every holiday.</p>
  </body>
</html>

⚽ 해결 방법: 스포츠 클럽 웹사이트

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Eagles FC</title>
  </head>
  <body>
    <h1>Riverside Eagles FC</h1>
    <p>The official website of our soccer club. Results, roster, and training schedule.</p>
  </body>
</html>

✅

**직접 확인해:** 브라우저 탭에는 웹사이트 이름이 표시되고, 페이지에는 제목과 문장이 표시돼. 그렇다면 기초석이 놓여졌어!

이번 수업에서 배울 점

웹사이트 = 서버가 브라우저에 보내는 파일야. 브라우저는 그로부터 페이지를 그립니다.
모든 페이지에는 동일한 골격이 있어.<head>(페이지에 대한 정보) 및<body>(표시되는 콘텐츠).
태그는 다음과 같이 열어.<this>그리고 가까운</this>.