준비: VS Code와 작업 폴더

웹 페이지를 만들려면 코드를 쓰는 편집기와 파일을 모아 둘 작업 폴더가 있어야 합니다. 이 과목은 무료 편집기 VS Code(Visual Studio Code)로 작업 폴더 html-css-study를 열고, 그 안에 만든 .html 파일을 두 번 눌러 브라우저로 엽니다.

이 레슨은 Windows나 macOS 컴퓨터가 있어야 합니다. 폰·태블릿만 있어도 이 과목의 레슨은 결과를 먼저 맞혀 보며 끝까지 배울 수 있게 짰습니다. 레슨 끝의 '컴퓨터에서 해 보기'는 이 레슨에서 만드는 환경으로 하는 일이고, 모두 선택입니다. 설치가 막혀도 다음 레슨으로 넘어가도 됩니다.

1메모장 대신 편집기 — VS Code 설치하기

HTML 파일은 글자로 된 파일이라 Windows의 메모장으로도 쓸 수 있습니다. 하지만 메모장은 모든 글자가 한 색이라 태그와 글이 섞여 보이고, 닫는 태그를 빠뜨려도 아무 표시가 없습니다. 코드 편집기는 태그와 글을 다른 색으로 칠합니다. 여는 태그 <h1>의 끝 꺾쇠 >를 치면 닫는 태그 </h1>을 저절로 채우고, 폴더를 열면 그 안의 파일을 한쪽에 목록으로 보여 줍니다.

VS Code는 code.visualstudio.com/download에서 무료로 받습니다. 회원가입은 필요 없고, Microsoft가 지원하는 Windows와 Apple이 보안 업데이트를 내는 macOS(보통 최신 판과 그 앞 두 판)에서 돌아갑니다.

Windows

1. 내려받기 페이지에서 Windows용 단추를 눌러 설치 파일(.exe)을 받습니다.
2. 받은 파일을 두 번 누르고, 안내에 따라 사용권에 동의한 뒤 설치합니다.
3. 설치가 끝나면 시작 메뉴에서 Visual Studio Code를 엽니다.

macOS

1. 내려받기 페이지에서 macOS용 단추를 눌러 .dmg 파일을 받습니다.
2. 받은 .dmg 파일을 두 번 누르고, 창 안의 Visual Studio Code를 응용 프로그램(Applications) 폴더로 끌어다 놓습니다.
3. 응용 프로그램 폴더에서 Visual Studio Code를 두 번 눌러 엽니다. 인터넷에서 받은 앱을 열지 묻는 창이 뜨면 엽니다.

VS Code는 처음에 영어로 나옵니다. 운영체제가 한국어면 한국어 언어 팩을 설치할지 묻는 알림이 뜨기도 합니다. 설치는 선택입니다. 이 과목은 메뉴 이름을 File(파일)처럼 영어로 적고 괄호에 한국어 화면 이름을 붙입니다.

2작업 폴더를 만들어 VS Code로 열기

이 과목에서 만드는 파일은 모두 한 폴더에 모읍니다. 파일이 바탕화면·다운로드 폴더에 흩어져 있으면 어느 파일을 고쳤는지 헷갈립니다. 바탕화면의 빈 곳에서 마우스 오른쪽 단추를 눌러 새 폴더를 만들고, 이름을 html-css-study로 짓습니다.

폴더와 파일 이름은 영문 소문자·숫자·하이픈(-)으로 짓습니다. 이 이름은 나중에 링크와 그림 주소에 그대로 적게 됩니다. 빈칸이나 한글이 든 이름은 주소에서 다른 글자로 바뀌어 틀리기 쉽습니다.

이제 VS Code에서 그 폴더를 엽니다.

1. 위쪽 메뉴에서 File → Open Folder...(파일 → 폴더 열기...)를 고릅니다.
2. 바탕화면의 html-css-study 폴더를 골라 엽니다. macOS에서 VS Code가 바탕화면의 파일에 접근해도 되는지 묻는 창이 뜨면 허용합니다. 허용하지 않았다면 시스템 설정 → 개인정보 보호 및 보안 → 파일 및 폴더에서 Visual Studio Code의 데스크탑을 켭니다.
3. 이 폴더 파일의 작성자를 믿는지 묻는 창이 뜨면, 믿는다는 쪽을 고릅니다. 직접 만든 빈 폴더라 믿어도 됩니다. 믿지 않는 쪽을 고르면 VS Code가 기능 일부를 끈 제한 모드로 엽니다.

왼쪽에 파일 목록인 탐색기(Explorer)가 열리고 맨 위에 폴더 이름이 보이면 됩니다. 이름은 대문자로 보이기도 하는데, 표시만 그렇고 실제 이름은 그대로입니다.

3파일 확장자 보이기

파일 이름 끝의 .html·.txt 같은 꼬리를 확장자(extension)라고 합니다. 컴퓨터는 확장자를 보고 그 파일을 어느 프로그램으로 열지 정합니다. .html은 브라우저가, .txt는 메모장(macOS는 텍스트 편집기)이 엽니다. .html 파일과 .txt 파일은 속이 모두 글자입니다. 확장자가 달라 여는 프로그램이 다를 뿐입니다.

Windows는 처음에 확장자를 숨겨 두고, macOS도 파일에 따라 숨깁니다. 숨어 있으면 위 흐름 그림과 같은 사고가 납니다. 새 텍스트 문서를 만들어 이름을 hello.html로 바꾸면 화면에는 hello.html로 보입니다. 하지만 숨은 .txt가 그대로 남아 진짜 이름은 hello.html.txt입니다. 두 번 누르면 브라우저 대신 메모장이 열립니다.

아래 차례로 확장자가 보이게 바꿉니다.

폴더의 파일 이름 끝에 .png·.txt·.pdf 같은 꼬리가 보이면 됩니다. 한 번만 해 두면 됩니다. VS Code 탐색기는 이 설정과 상관없이 확장자까지 보여 줍니다. 파일을 두 번 눌러 여는 곳이 파일 탐색기와 Finder라서, 거기서도 같은 이름이 보이게 해 둡니다.

4hello.html을 만들어 브라우저로 열기

코드를 치기 전에 들여쓰기 칸 수를 맞춥니다. VS Code는 처음에 Tab 키 한 번에 빈칸 네 칸을 넣는데, 이 과목의 코드는 두 칸씩 들여 씁니다. 설정은 Ctrl과 쉼표 키 ,를 함께 눌러 엽니다. macOS는 ⌘과 ,를 함께 누릅니다. 설정 맨 위 검색 칸에 Tab Size를 친 뒤, 그 값을 2로 바꿉니다.

그다음 첫 파일을 만듭니다.

1. 탐색기의 빈 곳에서 마우스 오른쪽 단추를 눌러 New File...(새 파일...)을 고르고, 이름 칸에 hello.html을 끝까지 쳐서 Enter를 누릅니다.
2. 오른쪽 편집 창에 <h1>안녕하세요</h1> 한 줄을 칩니다. <h1>까지 치면 </h1>이 저절로 생기니, 그 사이에 글만 칩니다.
3. File → Save(파일 → 저장)로 저장합니다. 단축키는 Ctrl+S, macOS는 ⌘+S입니다.
4. 파일 탐색기(macOS는 Finder)에서 바탕화면의 html-css-study 폴더를 열고 hello.html을 두 번 누릅니다.

기본 브라우저가 열리고 큰 글자로 '안녕하세요'가 보입니다. <h1>은 이 글이 제목이라는 표시이고, 태그는 다음 레슨부터 하나씩 배웁니다. 기본 브라우저가 크롬이 아니면, 크롬을 열고 Ctrl+O(macOS는 ⌘+O)를 눌러 hello.html을 고릅니다.

주소창을 누르면 주소가 file:///로 시작합니다. 서버가 아니라 내 컴퓨터의 파일을 바로 읽었다는 표시입니다(브라우저 규칙 1).

다 됐는지는 아래 확인 목록으로 봅니다.

• VS Code 탐색기 맨 위에 html-css-study가 보인다
• 파일 탐색기·Finder에서 hello.html의 끝 .html이 보인다
• hello.html을 두 번 누르면 브라우저가 열리고 '안녕하세요'가 크게 보인다
• 주소창의 주소가 file:///로 시작한다

예제

확장자를 보이게 한 폴더에 아래 세 파일이 있습니다. 저마다 두 번 누르면 무엇이 열릴지 먼저 정해 본 뒤 펼쳐 보세요.

1. hello.html
2. menu.html.txt
3. recipe.txt.html

자주 틀리는 곳

틀린 생각: 확장자를 숨긴 채로 이름 칸에 hello.html을 치면 HTML 파일이 된다.

이름 칸에 .html까지 쳤으니 HTML 파일이 되었다고 여기게 됩니다. 확장자가 숨어 있으면 바꾼 것은 보이는 부분뿐입니다. 숨은 .txt가 남아 진짜 이름은 hello.html.txt이고, 두 번 누르면 메모장이 열립니다.

맞는 규칙: 확장자를 먼저 보이게 한 뒤 이름을 짓습니다. 파일은 VS Code 탐색기의 New File...(새 파일...)로 만들면 친 이름 그대로 생깁니다.

틀린 생각: VS Code에서는 파일 하나만 열어도 된다.

고칠 파일이 하나뿐이면 그 파일만 열면 될 것처럼 보입니다. 파일 하나만 열면 탐색기에 그 폴더의 다른 파일이 보이지 않습니다. 3단원부터는 그림·CSS 파일이 늘고, HTML 파일에 그 파일들의 주소를 적어야 합니다.

맞는 규칙: File → Open Folder...(파일 → 폴더 열기...)로 작업 폴더를 엽니다. 탐색기에 폴더 안의 파일이 모두 보여야 파일끼리 잇는 주소를 쓸 수 있습니다.

틀린 생각: 폴더·파일 이름에 빈칸이나 한글을 써도 상관없다.

내 컴퓨터에서는 my page.html도 잘 열리니 상관없어 보입니다. 브라우저가 쓰는 주소에서는 빈칸이 %20이라는 글자로 바뀝니다. 링크 주소에 빈칸을 그대로 적으면 검사기(2단원의 마지막 레슨)가 Error로 잡습니다.

맞는 규칙: 폴더·파일 이름은 영문 소문자·숫자·하이픈(-)으로 짓습니다(html-css-study·hello.html). 주소에 그대로 적을 수 있습니다.

확인 문제

1. Windows에서 예제 폴더의 확장자 보이기를 다시 껐습니다. 이때 menu.html.txt는 파일 탐색기에 어떤 이름으로 보일까요?

• ① menu.html
• ② menu
• ③ menu.html.txt

2. 처음부터 hello.html을 브라우저로 열기까지의 일입니다. 하는 차례대로 ㉠~㉣을 놓으세요.

• ㉠ VS Code 탐색기에서 New File...로 hello.html을 만든다
• ㉡ 바탕화면에 html-css-study 폴더를 만든다
• ㉢ 저장한 hello.html을 두 번 눌러 브라우저로 연다
• ㉣ VS Code에서 File → Open Folder...로 그 폴더를 연다

다 놓은 뒤에는 아래 '놓은 뒤 물음'을 펼쳐 하나 더 고르세요.

3. 친구가 동아리 공지 페이지 파일을 만들었는데, 두 번 누르니 브라우저가 아니라 메모장이 열리고 코드가 글자 그대로 보인다고 합니다. 파일 탐색기에는 notice.html로 보입니다. 무엇부터 하면 좋을까요?

• ① 확장자를 보이게 해서 파일의 진짜 이름을 본다
• ② 코드의 태그를 하나씩 고친다
• ③ 브라우저를 지우고 다시 설치한다