시작 …
오늘은 빈 폴더에서 웹 페이지를 하나 만들어 브라우저로 열어보겠습니다. 시작하기 전에 따로 설치하셔야 하는 것은 없습니다.
오늘은 빈 폴더에서 웹 페이지를 하나 만들어 브라우저로 열어보겠습니다. 시작하기 전에 따로 설치하셔야 하는 것은 없습니다.
앞으로 15강에 걸쳐 페이지 하나를 함께 만들어 나가게 됩니다. 이름과 사진, 링크 몇 개가 들어간 자기소개 페이지입니다. 마지막에는 화면에 보이는 모습이 됩니다. 오늘은 일단 페이지가 존재하게 만드는 것까지만 하겠습니다. 오늘 다룰 내용은 세 가지입니다. 먼저 웹 페이지가 무엇으로 만들어지는지 살펴봅니다. 그다음 거의 모든 웹 페이지가 시작하는 9줄을 직접 입력합니다. 마지막으로 우리가 만든 페이지를 크롬으로 열어보겠습니다.
웹 페이지는 기본적으로 세 가지 언어로 만들어집니다. HTML은 제목, 글, 사진처럼 페이지에 무엇이 있는지를 정합니다. CSS는 어떻게 보일지를, 자바스크립트는 건드렸을 때 무슨 일이 일어날지를 정합니다. 4강까지는 HTML만 사용하는데, 그것만으로도 페이지 하나는 충분히 만들 수 있습니다.
여기서 많은 분들이 한 번 놀라게 됩니다. 웹 페이지는 그냥 텍스트 파일 하나입니다. 설치할 것도 없고 컴파일할 것도 없습니다. 브라우저가 우리가 입력한 글자를 읽어서 화면에 그려주는 것뿐입니다.
전체 과정은 세 단계입니다. 먼저 index.html 이라는 파일을 작성합니다. 브라우저는 그 파일을 첫 줄부터 마지막 줄까지 읽습니다. 우리가 쓴 태그 하나하나가 눈에 보이는 무언가로 바뀝니다. 글자 하나만 바꾸고 새로고침해도 화면이 바로 달라진다는 점이 중요합니다.
오늘 사용할 것은 세 가지입니다. VS Code 는 글을 쓰는 곳이고, 텍스트를 저장할 수 있는 편집기면 무엇이든 괜찮습니다. 크롬은 그 파일을 읽어서 페이지를 그려줍니다. 그 사이에 아주 작은 서버가 하나 들어가는데, 이건 조금 뒤에 다시 설명드리겠습니다. 먼저 작업할 폴더를 열어보겠습니다. 지금 보이는 것이 VS Code 이고, 아래쪽에 터미널이 붙어 있는 편집기입니다. 지금은 폴더가 비어 있어서 왼쪽에 아무것도 없습니다. 뜨는 데 몇 초 정도 걸립니다.
이제 입력할 9줄입니다. 첫 줄은 브라우저에게 이 파일이 최신 HTML 문서라는 사실을 알려줍니다. 나머지는 전부 html 태그 안에 들어갑니다. head 에는 읽는 사람에게 보이지 않는 정보들이 들어갑니다. body 에는 실제로 화면에 보이는 것들이 들어갑니다. 직접 입력해보겠습니다.
index.html 이라는 새 파일을 만들겠습니다. 파일 이름이 중요한데, 서버가 정확히 이 이름을 찾기 때문입니다. 태그는 짝으로 쓰이고, 닫는 태그에는 슬래시가 들어갑니다. head 와 body 는 둘 다 html 태그 안에 들어가 있습니다. 아직 body 가 비어 있어서 화면에는 아무것도 나오지 않습니다.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Dongbin Na</title> </head> <body> </body> </html>
이제 실제로 눈에 보이는 부분입니다. h1 은 페이지의 대표 제목이고, 한 번만 사용해주시면 됩니다. p 는 문단 하나를 뜻합니다. 두 줄만 추가해도 페이지가 할 말이 생깁니다.
두 줄 모두 body 안에 넣어줍니다. 앞의 공백은 우리가 보기 편하라고 넣는 것이고, 브라우저는 신경 쓰지 않습니다. 다만 7강쯤 가면 이렇게 정리해 두신 것이 큰 도움이 됩니다. Ctrl + S 로 저장해주시면 되고, 맥에서는 Cmd + S 입니다.
index.html
<h1>Dongbin Na</h1> <p>I build things on the web.</p>
파일을 더블클릭해서 열 수도 있습니다. HTML만 있을 때는 동작하지만, 다른 파일을 불러오기 시작하면 막히게 됩니다. 그래서 실제 웹 사이트와 같은 방식으로, 작은 서버를 띄워서 열어보겠습니다. 명령어 한 줄이면 되고, 앞으로 14강 동안 같은 명령어를 계속 사용합니다.
이 한 줄이 폴더를 브라우저에게 넘겨주는 역할을 합니다. 파이썬은 이미 설치되어 있어서 따로 준비할 것은 없습니다. 뒤에 붙은 숫자는 포트 번호이고, 5500 은 비어 있는 번호라서 골랐습니다. 멈추기 전까지 계속 돌아가니까 이 터미널은 그대로 두시면 됩니다.
터미널
python -m http.server 5500
이제 크롬에서 그 주소를 열어보겠습니다. localhost 는 이 컴퓨터를 뜻하고, 뒤의 숫자는 방금 연 포트 번호입니다. 방금 작성한 페이지가 그대로 나왔습니다. 크고 굵은 글자가 h1 이고, 그 아래 줄이 문단입니다. 위쪽 탭을 보시면 title 태그에 적은 글자가 그대로 올라와 있습니다. 글꼴이나 크기를 지정한 적이 없어서, 브라우저가 기본값을 그대로 사용한 것입니다.
지금 이런 화면이 보이고 계셔야 합니다. 큰 이름 하나, 글 두 줄, 그리고 흰 배경입니다. 밋밋하지만 오늘은 이게 정상입니다. 지금 보이는 모양은 전부 태그에서 나온 것이고, 디자인을 한 것이 아닙니다.
이번에는 내용을 바꿔보고 페이지가 따라오는지 확인해보겠습니다. 첫 번째 문단 아래에 문단을 하나 더 추가합니다. 다시 Ctrl + S 로 저장해주시면 됩니다. 아직 브라우저는 그대로인데, 예전 파일을 그대로 들고 있기 때문입니다.
index.html
<p>This is the first page I made by hand.</p>
새로고침만 하면 되고, 맥에서는 Cmd + R 입니다. 윈도우에서는 F5 또는 Ctrl + R 을 눌러주시면 됩니다. 추가한 줄이 페이지에 그대로 나타났습니다. 입력하고, 저장하고, 새로고침하고, 결과를 확인합니다. 15강까지 가는 동안 이 과정을 수백 번 반복하게 되실 겁니다.
첫날에는 보통 세 가지에서 막히게 됩니다. 첫째, 닫는 태그에 슬래시를 빠뜨리는 경우입니다. 그러면 브라우저가 나머지 내용을 통째로 먹어버립니다. 둘째, 파일 이름이 index.html 이 아닌 경우입니다. 셋째, 저장하지 않고 새로고침하는 경우인데, 저도 아직 이 실수를 합니다. 마치기 전에 서버를 멈춰두겠습니다. 이것이 파일 전체이고, 12줄입니다. 지금까지 열어보신 모든 페이지가 이런 모습에서 출발했습니다. 다음 시간에 여기에 계속 추가할 예정이니 폴더는 그대로 두시면 됩니다.
오늘 기억하실 것 세 가지입니다. 페이지는 텍스트 파일이고, 브라우저가 그것을 읽을 뿐입니다. 태그는 짝으로 쓰이고, 닫는 쪽에 슬래시가 들어갑니다. 그리고 저장을 먼저 하고 새로고침을 해주셔야 합니다. 다음 시간에는 제목과 목록을 추가해서 페이지에 구역을 만들어보겠습니다.
글로 정리한 같은 내용은 하루글에서도 보실 수 있습니다.
로그인하시면 댓글을 쓰실 수 있습니다.
아직 댓글이 없습니다. 첫 댓글을 남겨 주시면 됩니다.