고친다 → 저장한다 → 새로고침한다

브라우저는 편집기 창이 아니라 저장된 파일을 읽습니다. 그래서 코드를 고친 뒤에는 저장해서 파일을 바꾸고, 브라우저에서 새로고침해 그 파일을 다시 읽게 해야 화면이 바뀝니다.

고쳤는데 화면이 그대로일 때 가장 먼저 볼 곳이 이 차례입니다. 이 과목의 모든 실습이 고친다 → 저장한다 → 새로고침한다를 되풀이합니다. 이 레슨에서는 화면에 나오지 않는 메모인 주석도 함께 봅니다.

1브라우저는 저장된 파일을 읽는다

편집기에서 고친 글은 저장하기 전까지 편집기 창 안에만 있습니다. VS Code는 저장하지 않은 파일의 탭에 점(●)을 붙여 보입니다. 브라우저는 페이지를 열 때 파일을 한 번 읽고, 그 뒤로 파일이 바뀌는지 지켜보지 않습니다. 새로고침하면 그때 파일을 다시 읽어 화면을 처음부터 그립니다.

그래서 저장하지 않고 새로고침하면 옛 글자가 다시 그려집니다. 파일은 고치기 전 그대로이기 때문입니다(브라우저 규칙 1).

2저장하고 새로고침하기

고친 글이 화면에 나오기까지는 세 걸음입니다.

1. 고친다 — 편집기에서 코드를 바꿉니다.
2. 저장한다 — 바뀐 내용을 파일에 씁니다. 단축키는 Ctrl+S(macOS는 ⌘+S)입니다.
3. 새로고침한다 — 브라우저가 파일을 다시 읽어 그립니다. 주소창 옆의 새로고침 단추를 누르거나 F5·Ctrl+R(macOS는 ⌘+R)를 누릅니다.

저장하면 탭의 ●이 사라집니다. 고쳤는데 화면이 그대로라면 먼저 탭의 ●부터 봅니다.

VS Code에는 자동 저장 기능도 있습니다. 처음에는 꺼져 있어 직접 저장해야 하고, File → Auto Save(파일 → 자동 저장)를 누르면 켜집니다. 처음에는 꺼 둔 채로 저장 전과 뒤를 눈으로 확인해 봅니다. 고쳐도 탭에 ●이 생기지 않는다면 자동 저장이 켜져 있는 것입니다.

편집기 창과 브라우저 창을 화면 양쪽에 나란히 두면 고치고 확인하기가 편합니다.

3주석 — 화면에 그리지 않는 메모

<!--로 열고 -->로 닫은 사이는 주석(comment)입니다. 브라우저는 주석을 페이지에 그리지 않습니다.

<!-- 오늘 고칠 곳: 재료 -->
<h1>김치볶음밥</h1>
<p>밥 2공기</p>

주석은 구역 이름을 달 때와, 줄 하나를 지우지 않고 잠깐 빼 둘 때 씁니다. VS Code에서는 줄에 커서를 두고 Ctrl+/(macOS는 ⌘+/)를 누르면 그 줄이 주석이 되고, 한 번 더 누르면 풀립니다. 주석은 화면에만 나오지 않을 뿐 파일에는 그대로 있습니다. 다음 레슨의 페이지 소스 보기로 누구나 읽을 수 있으니, 남에게 보이면 안 되는 내용은 쓰지 않습니다.

주석은 <!--부터 다음 -->까지입니다. 닫는 -->를 빠뜨리면 그 아래가 모두 주석이 됩니다.

<h1>김치볶음밥</h1>
<!-- 재료는 내일 채우기
<p>밥 2공기</p>
<p>달걀 2개</p>

재료 두 줄이 화면에서 사라졌지만 오류 메시지는 없습니다. 뒤에 -->가 없으면 파일 끝까지가 주석입니다. 화면 아래쪽이 갑자기 사라졌다면 주석이 닫혔는지 봅니다.

예제

아래처럼 고치고 저장한 뒤 새로고침했습니다. 화면에 보이는 글을 줄마다 먼저 적어 본 뒤 펼쳐 보세요.

<h1>김치볶음밥</h1>
<!-- 재료 -->
<p>밥 2공기</p>
<!-- <p>김치 1컵</p> -->
<p>달걀 2개</p>

자주 틀리는 곳

틀린 생각: 고친 뒤 새로고침만 하면 화면이 바뀐다.

새로고침이 화면을 새로 그리니, 고친 글도 그때 들어갈 것처럼 여기게 됩니다. 편집기 탭에 ●이 붙은 채로 새로고침하면 옛 글자가 그대로 보입니다. 브라우저가 다시 읽은 파일은 아직 고치기 전 그대로입니다.

맞는 규칙: 고친다 → 저장한다 → 새로고침한다. 화면이 그대로면 먼저 편집기 탭의 ●을 봅니다(브라우저 규칙 1).

틀린 생각: 브라우저에 열린 파일과 편집기에서 고친 파일은 늘 같은 파일이다.

이름이 같으면 같은 파일이라고 여기게 됩니다. 바탕화면에 따로 둔 hello.html을 브라우저에 열어 두고 html-css-study 폴더의 hello.html을 고치면, 저장하고 새로고침해도 화면이 바뀌지 않습니다. 이름만 같은 다른 파일이기 때문입니다.

맞는 규칙: 주소창의 주소에서 파일이 든 폴더를 봅니다. …/html-css-study/hello.html⁠처럼, 편집기에서 고친 파일의 폴더와 같아야 합니다.

틀린 생각: 주석 안에 쓴 태그는 그려진다.

주석 안에도 <h1> 같은 태그가 보이니 태그만은 그려질 것처럼 보입니다.

<!-- <h1>임시 제목</h1> -->
<h1>김치볶음밥</h1>

'임시 제목'은 그려지지 않았습니다.

맞는 규칙: <!--와 --> 사이는 태그가 들어 있어도 모두 주석이라 그리지 않습니다.

확인 문제

1. 예제에서 4번 줄의 주석 표시를 풀어 <p>김치 1컵</p>만 남기고, 3번 줄을 주석으로 감쌌습니다. 저장하고 새로고침하면 화면에 보이는 글은 무엇일까요? 줄마다 쓰세요.

<h1>김치볶음밥</h1>
<!-- 재료 -->
<!-- <p>밥 2공기</p> -->
<p>김치 1컵</p>
<p>달걀 2개</p>

2. hello.html의 제목을 고쳐 화면에서 확인하기까지의 일입니다. 하는 차례대로 ㉠~㉢을 놓으세요.

• ㉠ 브라우저에서 새로고침한다
• ㉡ 편집기에서 제목 글을 고친다
• ㉢ Ctrl+S로 저장한다

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

3. 여행 일정 페이지입니다. 첫째 날 일정을 잠깐 빼 두려고 주석을 달았습니다. 저장하고 새로고침하면 화면에 보이는 글은 무엇일까요? 줄마다 쓰세요.

<h1>제주 여행 일정</h1>
<!-- 비가 오면 바꾸기
<p>첫째 날: 성산 일출봉</p>
-->
<p>둘째 날: 우도</p>

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. hello.html의 h1 글을 바꾸고, 저장하지 않은 채 새로고침해 봅니다. 화면이 그대로인지, 탭에 ●이 있는지 본 뒤 저장하고 다시 새로고침합니다. 그다음 <p> 줄에 커서를 두고 Ctrl+/(macOS는 ⌘+/)로 주석을 만들어 저장·새로고침해, 그 줄이 화면에서 빠지는지 봅니다.