웹 개발 강의 1편 - 첫 번째 웹 페이지 만들기

오늘부터 웹 개발 강의를 시작하겠습니다. 기본적으로 웹은 설치할 것이 거의 없다는 점에서, 프로그래밍을 처음 접하시는 분들께 권해드리기 좋은 분야입니다. 브라우저와 편집기만 있으면 바로 첫 결과물을 보실 수 있습니다.

앞으로 15강에 걸쳐 자기소개 페이지 한 장을 함께 만들게 됩니다. 이름과 사진, 링크 몇 개가 들어간 페이지입니다. 1강부터 4강까지는 HTML, 5강부터 9강까지는 CSS, 10강부터는 자바스크립트(JavaScript)를 다루고 마지막에 전체를 다듬어 완성합니다.

오늘은 페이지가 존재하게 만드는 것까지만 합니다.

웹 페이지는 무엇으로 만들어지는가

웹 페이지는 세 가지 언어로 만들어집니다.

세 가지가 전부 있어야 페이지가 뜨는 것은 아닙니다. HTML 만으로도 읽을 수 있는 페이지 하나는 충분히 만들어집니다. 그래서 4강까지는 HTML 만 사용합니다.

웹 페이지는 텍스트 파일입니다

여기서 한 번 놀라게 되실 겁니다. 웹 페이지는 그냥 텍스트 파일 하나입니다.

설치할 것도 없고 컴파일할 것도 없습니다. 우리가 글자를 입력해서 파일로 저장하면, 브라우저가 그 파일을 첫 줄부터 마지막 줄까지 읽어서 화면에 그려줍니다. 글자 하나를 바꾸고 새로고침하면 화면이 그만큼 달라집니다.

결과적으로 전체 과정은 이렇게 세 단계입니다.

1. 파일을 작성합니다
2. 브라우저가 그 파일을 읽습니다
3. 화면에 결과가 그려집니다

앞으로 이 과정을 수백 번 반복하게 되실 텐데, 중간에 어려운 단계는 들어 있지 않습니다.

준비물

VS Code 는 code.visualstudio.com 에서 받으실 수 있습니다. 파이썬은 이미 설치되어 있는 경우가 많으니, 터미널에서 python --version 을 입력해서 확인해보시면 됩니다.

원하는 위치에 폴더를 하나 만들고, VS Code 에서 그 폴더를 열어주시면 됩니다.

첫 번째 파일 작성하기

폴더 안에 index.html 이라는 파일을 만들어주세요. 파일 이름이 중요한데, 서버가 폴더를 열 때 정확히 이 이름을 찾기 때문입니다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dongbin Na</title>
</head>
<body>
</body>
</html>

거의 모든 웹 페이지가 이 9줄에서 출발합니다. 한 줄씩 보겠습니다.

태그(Tag)는 짝으로 쓰입니다. <head> 로 열고 </head> 로 닫습니다. 닫는 쪽에는 슬래시가 들어간다는 점만 기억해주시면 됩니다.

이 강의에서는 코드 안의 글자를 전부 영어로 작성합니다. 한글을 넣어도 동작하지만, 동영상 강의와 글의 코드를 똑같이 맞추기 위해서입니다. 이름 부분은 본인 이름으로 바꾸셔도 좋습니다.

화면에 보이는 부분 추가하기

지금 상태로 브라우저에서 열면 빈 화면이 나옵니다. <body> 안이 비어 있기 때문입니다. 아래 두 줄을 <body> 바로 다음에 넣어주세요.

index.html 의 <body> 안쪽

  <h1>Dongbin Na</h1>
  <p>I build things on the web.</p>

h1 은 페이지의 대표 제목입니다. 한 페이지에 한 번만 사용해주시면 됩니다. p 는 문단(Paragraph) 하나를 뜻합니다.

앞에 넣은 공백 두 칸은 브라우저가 신경 쓰지 않습니다. 사람이 읽기 편하라고 넣는 것입니다. 다만 7강쯤 가면 이렇게 정리해 두신 것이 큰 도움이 된다는 점에서, 지금부터 습관을 들여두시는 쪽을 추천드립니다.

여기까지 하면 파일 전체가 이렇게 됩니다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dongbin Na</title>
</head>
<body>
  <h1>Dongbin Na</h1>
  <p>I build things on the web.</p>
</body>
</html>

작성하셨으면 저장해주세요. 윈도우에서는 Ctrl + S, 맥에서는 Cmd + S 입니다.

로컬 서버 띄우기

파일을 더블클릭해서 바로 열 수도 있습니다. 그렇게 하면 주소가 file:// 로 시작하는데, HTML 만 있을 때는 잘 동작하다가 다른 파일을 불러오기 시작하면 막히는 경우가 생깁니다.

그래서 처음부터 실제 웹 사이트와 같은 방식으로 열어보겠습니다. VS Code 에서 터미널을 열고(`Ctrl + ``) 다음 명령을 입력해주세요.

터미널

python -m http.server 5500

처음 실행하면 윈도우에서 방화벽 경고창이 뜰 수 있습니다. 개인 네트워크만 체크된 상태로 액세스 허용을 눌러주시면 됩니다. 이 서버는 본인 컴퓨터에서만 쓰는 것이라 공용 네트워크는 체크하지 않으셔도 됩니다.

실행 결과

Serving HTTP on :: port 5500 (http://[::]:5500/) ...

이 한 줄이 지금 폴더를 브라우저에게 넘겨주는 역할을 합니다. 뒤에 붙은 5500 은 포트(Port) 번호이고, 비어 있는 번호라서 골랐을 뿐입니다.

맥이나 리눅스에서는 python3 -m http.server 5500 으로 입력해주셔야 하는 경우가 있습니다. python 이 없다는 메시지가 나오면 python3 으로 바꿔서 시도해보시면 됩니다.

서버는 멈추기 전까지 계속 돌아갑니다. 이 터미널은 그대로 두시고, 명령을 더 입력하셔야 하면 터미널을 하나 더 열어주시면 됩니다. 끝낼 때는 Ctrl + C 를 눌러주시면 됩니다.

브라우저로 열어보기

크롬 주소창에 다음 주소를 입력해주세요.

http://localhost:5500

localhost 는 이 컴퓨터를 뜻하고, 뒤의 숫자는 방금 연 포트 번호입니다.

큰 글씨로 이름이 나오고, 그 아래에 한 줄이 보이면 성공입니다. 위쪽 탭을 보시면 <title> 에 적은 글자가 그대로 올라와 있는 것도 확인하실 수 있습니다.

글꼴이나 크기를 지정한 적이 없는데도 제목이 크고 굵게 나왔습니다. 브라우저가 가지고 있는 기본값이 적용된 것입니다. 이 기본 모양을 우리가 직접 정하기 시작하는 것이 5강부터 다룰 CSS 입니다.

수정하고 새로고침하기

이번에는 내용을 바꿔보겠습니다. 첫 번째 문단 아래에 한 줄을 더 넣어주세요.

index.html

  <p>This is the first page I made by hand.</p>

저장한 다음 브라우저로 돌아가서 새로고침을 해주시면 됩니다. 윈도우에서는 F5 또는 Ctrl + R, 맥에서는 Cmd + R 입니다.

추가한 줄이 화면에 나타났다면, 오늘 할 일은 끝난 것입니다. 입력하고, 저장하고, 새로고침하고, 결과를 확인합니다. 15강까지 가는 동안 이 과정을 계속 반복하게 됩니다.

완성된 파일은 다음과 같습니다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dongbin Na</title>
</head>
<body>
  <h1>Dongbin Na</h1>
  <p>I build things on the web.</p>
  <p>This is the first page I made by hand.</p>
</body>
</html>

자주 발생하는 오류

첫째, 닫는 태그에 슬래시를 빠뜨리는 경우

<title>Dongbin Na<title>

브라우저가 태그의 끝을 계속 찾다가 나머지 내용을 통째로 먹어버립니다. 화면에 아무것도 안 나오거나 이상한 부분부터 나온다면 이것부터 확인해보시면 됩니다.

<title>Dongbin Na</title>

둘째, 파일 이름이 index.html 이 아닌 경우

index.htm 이나 Index.html 로 저장하시면 주소창에 http://localhost:5500 만 입력했을 때 페이지 대신 파일 목록이 나옵니다. 서버가 폴더를 열 때 index.html 이라는 이름을 찾기 때문입니다.

셋째, 저장하지 않고 새로고침하는 경우

브라우저는 화면에 떠 있는 편집기 내용이 아니라 디스크에 저장된 파일을 읽습니다. 저장을 먼저 하고 새로고침을 해주셔야 합니다. 저는 아직도 이 실수를 합니다.

연습 문제

1. <title> 의 내용을 본인 이름으로 바꾸고, 탭에 표시되는 글자가 달라지는지 확인해보기
2. <p> 를 하나 더 추가해서 문단을 세 개로 만들어보기
3. <h1> 을 <h2> 로 바꾸어보고, 글자 크기가 어떻게 달라지는지 비교해보기

3번을 해보시면 태그가 모양까지 함께 결정한다는 점을 확인하실 수 있습니다. 왜 그런지는 다음 시간에 다룹니다.

이 강의는 무료로 공개됩니다. 더 깊은 내용을 다루는 유료 강의는 링바이트에서 보실 수 있습니다.

다음 시간에는 제목과 목록을 추가해서 페이지에 구역을 만들어보겠습니다.