웹 페이지는 파일 여럿으로 되어 있습니다. 브라우저는 주소의 HTML 파일을 먼저 받아 읽고, 그 안에 적힌 CSS 파일과 그림 파일의 주소를 만나면 그 파일들을 따로 받아 화면을 그립니다.
브라우저(browser)는 크롬·엣지·사파리처럼 웹 페이지를 받아 화면에 그리는 프로그램입니다. 이 과목에서 만드는 것은 브라우저가 읽을 파일입니다. 화면에 무엇이 어떤 차례로 오는지 알아 두면, 그림 하나가 늦게 뜨거나 깨졌을 때 페이지 전체가 고장 난 것인지 파일 하나의 일인지 가를 수 있습니다. 이 과목의 결과는 크롬으로 그려 확인했습니다. 다른 브라우저에서는 글꼴이나 입력 칸 모양 같은 세부가 조금 다를 수 있습니다.
1주소를 치면 HTML 파일이 먼저 온다
주소창에 주소를 치면 브라우저는 그 주소의 서버에 파일을 달라고 요청합니다. 서버(server)는 웹 페이지의 파일을 보관하고 있다가 요청이 오면 보내 주는 컴퓨터입니다.
먼저 오는 것은 HTML 파일 하나입니다. 주소에 파일 이름이 없으면 많은 서버가 index.html을 보냅니다. 그래서 사이트의 첫 페이지 파일은 흔히 index.html이라고 짓습니다.
HTML 파일은 글자로 된 문서입니다. 제목·문단·그림 자리 같은 내용이 꺾쇠(<·>)로 쓴 표시와 함께 적혀 있습니다. 이 표시를 태그라고 하고, 쓰는 법은 2단원에서 배웁니다.
브라우저는 받은 HTML 파일을 위에서부터 읽습니다.
2CSS와 그림은 따로 받는다
index.html을 읽다 보면 이런 줄을 만납니다. 지금은 태그를 몰라도 됩니다. 따옴표 안의 주소만 봅니다.
<link
rel="stylesheet"
href="style.css"
/>
…
<img
src="photo.jpg"
alt="김치볶음밥"
/>style.css는 CSS 파일, photo.jpg는 그림 파일의 주소입니다. HTML 파일 안에 CSS나 그림이 통째로 든 것이 아니라, 그 파일이 어디 있는지만 적혀 있습니다.
브라우저는 주소를 만날 때마다 그 파일을 따로 요청해 받습니다. 그래서 이 페이지를 그리려고 받는 파일은 index.html·style.css·photo.jpg 셋입니다.
브라우저 규칙 1. 페이지는 파일 여럿입니다. 브라우저는 HTML을 먼저 받아 읽다가 CSS·그림 주소를 만나면 그 파일을 따로 받습니다.
따로 받은 파일은 쓰이는 때가 다릅니다.
- CSS 파일은 페이지의 모양을 정하고, 보통 HTML의 앞부분에 적습니다. 브라우저는 그 CSS 파일이 올 때까지 화면 그리기를 미룹니다. 꾸미지 않은 글이 잠깐 보였다가 모양이 바뀌지 않게 하려는 것입니다.
- 그림은 기다리지 않습니다. 브라우저는 글을 먼저 그리고, 그림 파일은 오는 대로 그 자리에 채웁니다. 인터넷이 느릴 때 그림이 늦게 뜨는 까닭입니다.
파일마다 따로 받으니 하나가 없어도 나머지는 그려집니다. photo.jpg가 없으면 그 그림 자리만 깨진 그림으로 남고, 글과 꾸밈은 그대로입니다.
3내 컴퓨터의 파일은 바로 읽는다
이 과목에서는 서버 없이, 내 컴퓨터에 저장한 HTML 파일을 브라우저로 엽니다. 여는 법은 준비: VS Code와 작업 폴더에서 익힙니다.
이렇게 열면 주소창의 주소가 file://로 시작합니다. file는 서버가 아니라 내 컴퓨터의 파일을 열었다는 표시입니다.
이때 브라우저는 요청을 보내지 않고 내 컴퓨터의 파일을 바로 읽습니다. HTML을 먼저 읽고 CSS·그림 파일을 따로 읽는 것은 같습니다. 브라우저가 읽는 것은 저장된 파일입니다. 편집기에서 고친 글이 화면에 나오려면 먼저 파일에 저장해야 합니다. 이 차례는 고친다 → 저장한다 → 새로고침한다에서 익힙니다.
4받은 파일로 하는 네 일 — 이 과목의 지도
파일을 받은 브라우저는 네 가지 일을 차례로 해서 화면을 만듭니다. 자료에 따라 이 과정을 렌더링(rendering)이라고도 부릅니다. 이 과목은 브라우저가 하는 일을 '브라우저 규칙 N'이라는 이름으로 하나씩 세웁니다. 위의 브라우저 규칙 1이 그 첫째입니다.
아래 규칙 번호와 단원은 앞으로 배울 곳을 미리 보인 것입니다.
- 읽기 — 받은 HTML을 읽어 요소 나무를 짓습니다. 태그로 표시한 내용 한 덩어리를 요소라고 하고, 요소 안에 요소가 든 차례가 요소 나무입니다. 브라우저 규칙 1·2·3, 주로 1~3·5~7단원.
- 값 정하기 — CSS를 읽어 요소마다 글자색·크기 같은 값을 하나로 정합니다. 브라우저 규칙 4·5, 주로 4·8·9·11단원.
- 배치 — 요소마다 차지할 상자의 크기와 자리를 정합니다. 브라우저 규칙 6·7·8, 주로 10·12~15단원.
- 그리기 — 정한 대로 화면에 칠합니다. 브라우저 규칙 8, 주로 16단원.
화면이 생각과 다를 때는 이 네 일 가운데 어디서 어긋났는지 차례로 찾습니다. 찾는 차례는 4단원에서 표로 세웁니다.
예제
레시피 노트의 첫 페이지 index.html에 아래 줄들이 있습니다. images/kimchi.svg는 images 폴더 안의 kimchi.svg 파일이라는 주소입니다.
<link
rel="stylesheet"
href="style.css"
/>
…
<h1>레시피 노트</h1>
<img
src="images/kimchi.svg"
alt="김치볶음밥"
/>이 페이지를 열면 브라우저는 어떤 파일을 어떤 차례로 받을까요? 먼저 적어 본 뒤 펼쳐 보세요.
정답
모두 세 파일입니다.
index.html— 주소의 HTML 파일이 먼저 옵니다.style.css—index.html을 읽다가 처음 만난 주소입니다.images/kimchi.svg— 그다음에 만난 주소입니다.
style.css가 온 뒤 꾸민 제목이 그려지고, 그림은 오는 대로 그 자리에 채워집니다.
images 폴더에 kimchi.svg가 없으면 그 그림 자리만 깨진 그림으로 남습니다. 제목과 꾸밈은 그대로 그려집니다.
자주 틀리는 곳
틀린 생각: 웹 페이지는 HTML 파일 하나에 다 들어 있다.
화면에서는 글과 그림이 한 장으로 보여서 파일도 하나일 것처럼 여기게 됩니다.
위 예제의 index.html 하나만 친구에게 보내면, 친구 컴퓨터에서는 꾸밈이 빠지고 그림 자리가 깨집니다. style.css와 kimchi.svg는 따로 있는 파일이라 함께 보내야 합니다.
맞는 규칙: 페이지는 파일 여럿입니다. HTML 파일은 CSS·그림 파일의 주소를 적을 뿐이고, 브라우저가 그 파일을 따로 받습니다(브라우저 규칙 1).
틀린 생각: 그림이 늦게 뜨면 페이지가 고장 난 것이다.
글은 다 보이는데 그림 자리만 비어 있으면 무엇이 망가진 것처럼 보입니다. 그림 파일은 따로 오기 때문에 글보다 늦게 채워질 수 있습니다. 잠시 뒤 채워지면 정상입니다.
맞는 규칙: 브라우저는 글을 먼저 그리고 그림은 오는 대로 채웁니다. 끝까지 깨진 채로 남으면 그 그림 파일 하나를 받지 못한 것이니, 그 주소와 파일을 봅니다(브라우저 규칙 1).
틀린 생각: 브라우저는 편집기 창에 보이는 글을 읽는다.
편집기에서 글을 고쳤는데 브라우저 화면이 그대로면, 브라우저가 고장 난 것처럼 보입니다. 브라우저는 편집기 창을 보지 않습니다. 파일에 저장된 글을 읽습니다.
맞는 규칙: 브라우저는 저장된 파일을 읽습니다. 고친 것은 저장해야 파일에 들어가고, 새로고침해야 브라우저가 다시 읽습니다. 이 차례는 고친다 → 저장한다 → 새로고침한다에서 익힙니다.
확인 문제
1. 예제의 index.html에 그림 줄을 하나 더 넣었습니다. 이 페이지를 그리려고 브라우저가 받는 파일은 모두 몇 개일까요?
<link
rel="stylesheet"
href="style.css"
/>
…
<img
src="images/kimchi.svg"
alt="김치볶음밥"
/>
<img
src="images/doenjang.svg"
alt="된장찌개"
/>힌트
따옴표 안에 파일 주소가 적힌 줄을 셉니다. 그 줄들이 적힌 파일도 빠뜨리지 않습니다.
정답
4개입니다. index.html·style.css·kimchi.svg·doenjang.svg입니다.
index.html을 먼저 받고, 그 안에서 만난 주소 셋을 하나씩 따로 받습니다(브라우저 규칙 1).
흔한 오답은 3개입니다. 처음 받은 index.html을 세지 않은 것입니다.
1개라고 답했다면 페이지가 파일 하나라고 본 것입니다. HTML 파일에는 다른 파일의 주소만 적혀 있습니다.
2. 브라우저가 위 흐름 그림 속 페이지를 화면에 내기까지의 일입니다. 일어나는 차례대로 ㉠~㉣을 놓으세요.
- ㉠
style.css와photo.jpg를 따로 요청한다 - ㉡ 주소창에 주소를 친다
- ㉢ 꾸민 글을 그린다
- ㉣
index.html을 받아 읽는다
다 놓은 뒤에는 아래 '놓은 뒤 물음'을 펼쳐 하나 더 고르세요.
힌트
㉠~㉣마다 그 일을 하려면 무엇이 먼저 있어야 하는지 따져 봅니다.
놓은 뒤 물음
㉣이 ㉠보다 앞에 와야 하는 까닭은 무엇일까요?
- ①
style.css와photo.jpg의 주소가index.html안에 적혀 있기 때문 - ② HTML 파일이 다른 파일보다 작아 먼저 오기 때문
- ③ 브라우저가 파일 이름의 알파벳 차례로 받기 때문
정답
㉡ ㉣ ㉠ ㉢ 차례이고, 까닭은 ①입니다.
브라우저는 index.html을 읽어야 다른 두 파일의 주소를 압니다. 꾸민 글은 style.css가 온 뒤에 그립니다.
- ② 파일 크기와 상관없습니다. 다른 파일의 주소를 알려 주는 것이 HTML이라 먼저 받습니다.
- ③ 이름 차례와 상관없습니다.
index.html을 읽다가 주소를 만난 차례로 요청합니다.
3. 플로우 카페의 메뉴 페이지 menu.html에는 style.css와 그림 둘(coffee.jpg·latte.jpg)의 주소가 적혀 있습니다. 그런데 폴더에 latte.jpg가 없습니다. 이 페이지를 열면 화면은 어떻게 될까요?
- ① 페이지가 열리지 않고 오류 메시지가 뜬다
- ② 라테 그림 자리만 깨지고 나머지는 그려진다
- ③ 그림 두 장이 모두 보이지 않는다
힌트
브라우저가 그림 두 장을 한꺼번에 받는지, 하나씩 따로 받는지 떠올립니다.
정답
②입니다. 브라우저는 파일마다 따로 받으므로, 받지 못한 latte.jpg 자리만 깨진 그림으로 남습니다. 메뉴 글과 style.css의 꾸밈, 커피 그림은 그대로 그려집니다(브라우저 규칙 1).
- ① 파일 하나가 없다고 페이지 전체가 멈추지는 않습니다. 브라우저는 오류 메시지 없이 받은 것으로 그립니다.
- ③ 그림 둘은 따로 받는 파일 둘입니다. 있는
coffee.jpg는 그려집니다.
이 과목의 짧은 길(선택) — 꾸미기보다 동작이 먼저 궁금하다면 이 길도 있습니다. 1~9단원과 17단원의 앞 두 레슨(완성 화면을 영역으로 나누기·이름표를 맞춘 HTML)만 하고 자바스크립트 과목으로 넘어가도 됩니다. 그 과목이 12단원에서 이 과목의 할 일 화면을 다시 쓸 때 필요한 것이 모두 들어 있습니다. 남은 10~16단원은 뒤에 와도 됩니다.