개발자 도구로 요소 나무 보기

개발자 도구의 Elements 패널은 브라우저가 지은 요소 나무를 보여 줍니다. 파일 글자가 아니라 브라우저가 읽고 지은 사본이라, 여기서 고친 것은 화면에만 보이고 새로고침하면 파일대로 돌아옵니다.

화면이 생각과 다를 때, 브라우저가 내 코드를 어떻게 읽었는지 보는 첫 도구입니다. 화면의 한 곳을 눌러 그 요소의 줄을 바로 찾을 수도 있습니다. 개발자 도구는 컴퓨터의 브라우저에 들어 있습니다. 폰으로 보고 있다면 이 레슨은 읽고 확인 문제로 따라오면 됩니다.

<h1>안녕하세요</h1>

1개발자 도구를 열고 Elements 보기

개발자 도구(DevTools)는 브라우저에 처음부터 들어 있어 따로 설치하지 않습니다. 열어도 사이트에는 아무 일도 생기지 않습니다. 크롬에서는 이렇게 엽니다.

• 화면의 한 곳에서 마우스 오른쪽 단추 → 검사(Inspect). 누른 곳의 줄이 켜진 채로 열립니다.
• Ctrl+Shift+C(macOS는 ⌘+Option+C). 요소 고르기를 켠 채로 Elements를 엽니다.
• F12나 Ctrl+Shift+I(macOS는 ⌘+Option+I). 마지막으로 쓴 패널을 엽니다.
• 주소창 오른쪽 ⋮ 단추 → 도구 더보기 → 개발자 도구.

개발자 도구는 큰 칸 여럿으로 되어 있고, 이 큰 칸을 패널이라고 합니다. 위쪽의 패널 이름을 눌러 바꿉니다. 개발자 도구의 글자는 처음에 영어입니다. 이 과목은 영어 이름으로 적고, 이 단원에서는 Elements 패널(한국어 화면에서는 '요소') 하나만 씁니다.

2Elements는 브라우저가 지은 요소 나무다

Elements 패널의 줄은 들여쓰기로 요소 안의 요소를 보입니다. 줄을 고르고 → 키를 누르면 안에 든 요소가 펼쳐지고, ← 키를 누르면 접힙니다. 줄 앞의 세모를 눌러도 됩니다. 이 줄들은 파일 글자를 그대로 옮긴 것이 아닙니다. 브라우저가 태그를 읽고 지은 요소 나무입니다(브라우저 규칙 2). 그래서 파일과 다를 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<h1>안녕하세요</h1>
</html>

이 파일에는 head와 body가 없는데, 나무에는 둘이 있고 h1은 body 안에 들었습니다. 브라우저가 뼈대에 맞게 지어 넣은 것입니다. Elements 패널에도 이 나무가 보입니다. 이 파일은 title도 빠진 일부러 틀린 코드라, 실제 파일은 문서 뼈대대로 씁니다.

Elements 패널은 빈칸이나 줄바꿈만 있는 글 조각을 줄로 보이지 않습니다. 그런 조각도 나무에는 들어 있습니다. 빈칸이 나무에 어떻게 남는지는 2단원의 공백 규칙과 특수 문자에서 봅니다.

3요소 고르기 — 화면에서 나무 찾기

실제 사이트의 나무는 줄이 아주 많습니다. 위에서부터 하나씩 펼쳐 찾으면 오래 걸리니, 거꾸로 화면에서 출발합니다.

요소 고르기는 화면의 한 곳을 눌러 그 요소의 줄을 Elements에서 켜는 도구입니다. Ctrl+Shift+C(macOS는 ⌘+Option+C)를 누르고 마우스를 움직이면 가리키는 요소마다 그 이름이 작게 뜨고, 누르면 그 줄이 켜집니다. 화면에서 마우스 오른쪽 단추 → 검사로 열어도 누른 곳의 줄이 켜집니다.

켜진 줄은 꺾쇠 안의 첫 낱말부터 읽습니다. 그 요소의 이름입니다. h1은 가장 높은 단계의 제목, p는 문단, img는 그림입니다. 나머지 글자는 2단원에서 배웁니다.

4Elements에서 고친 것은 새로고침하면 돌아온다

Elements에서는 고칠 수도 있습니다. 켜진 줄에서 글 부분을 두 번 누르고, 글을 바꾼 뒤 Enter를 누르면 화면이 바로 바뀝니다. 새로고침하면 원래 글로 돌아옵니다. Elements가 고친 것은 내 브라우저 안의 사본(요소 나무)이고, 파일은 그대로이기 때문입니다. 새로고침하면 브라우저가 파일을 다시 읽어 나무를 새로 짓습니다.

그래서 Elements는 실험하는 곳입니다. 고쳐 보고 마음에 들면, 같은 고침을 편집기에서 파일에 옮겨 적고 저장합니다.

받은 파일의 글자를 그대로 보려면 페이지 소스를 엽니다. 화면에서 마우스 오른쪽 단추 → 페이지 소스 보기, 단축키는 Ctrl+U(macOS는 ⌘+Option+U)입니다. Elements에서 고친 뒤에 열어도 원래 글자 그대로입니다.

둘을 견주면 이렇습니다.

예제

레시피 페이지의 세 부분을 요소 고르기로 누르려 합니다.

<h1>김치볶음밥</h1>
<p>잘 익은 김치로 만드는 볶음밥</p>
<img
  src="images/kimchi.svg"
  alt="김치볶음밥"
  width="280"
  height="210"
/>

제목, 소개 글, 그림을 차례로 누르면 Elements에서 켜지는 줄의 첫 낱말은 각각 무엇일까요? 먼저 적어 본 뒤 펼쳐 보세요.

자주 틀리는 곳

틀린 생각: Elements에서 고치면 파일도 바뀐다.

고치자마자 화면이 바뀌니 파일을 고친 것처럼 보입니다. Elements에서 제목을 바꾼 뒤 편집기에서 파일을 보면 원래 글 그대로입니다. 새로고침하면 화면도 원래대로 돌아옵니다.

맞는 규칙: Elements가 고치는 것은 브라우저 안의 사본입니다. 고친 것을 남기려면 편집기에서 파일을 고쳐 저장합니다.

틀린 생각: Elements에 보이는 줄은 파일 글자 그대로다.

파일을 열어 보는 창처럼 보여서, 파일에 쓴 글자가 그대로 나올 것 같습니다. 파일에 <p>밥 2공기</p> 한 줄만 있어도 Elements에는 html·head·body 줄이 함께 보입니다. 틀린 태그를 브라우저가 고쳐 지은 나무도 Elements에는 고친 모양으로 보입니다(2단원).

맞는 규칙: Elements는 브라우저가 지은 요소 나무를 보입니다(브라우저 규칙 2). 받은 글자 그대로는 페이지 소스에서 봅니다.

틀린 생각: 휴대전화 브라우저에서도 개발자 도구를 열 수 있다.

컴퓨터 크롬에 있으니 휴대전화의 크롬에도 있을 것처럼 여기게 됩니다. 휴대전화의 브라우저 앱에는 이 레슨의 개발자 도구가 들어 있지 않습니다.

맞는 규칙: 개발자 도구는 컴퓨터의 브라우저에서 엽니다. 폰으로만 보고 있다면 이 레슨은 읽고, 확인 문제로 따라옵니다.

확인 문제

1. 예제 페이지를 열고 Elements에서 h1의 글을 '된장찌개'로 바꿨습니다. 새로고침하기 전, ㉠ 화면의 제목과 ㉡ 편집기에 열린 파일의 h1 글은 각각 무엇일까요?

2. Elements에서 먼저 고쳐 본 뒤, 그 고침을 파일에 남기는 차례대로 ㉠~㉣을 놓으세요.

• ㉠ 편집기에서 파일의 같은 곳을 고친다
• ㉡ Elements에서 글을 바꿔 화면을 미리 본다
• ㉢ 파일을 저장한다
• ㉣ 새로고침해 바꾼 글이 그대로 보이는지 본다

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

3. 카페 메뉴판 파일 menu.html에는 아래 한 줄만 있습니다. 크롬으로 열어 Elements 패널을 보면 나무는 어떻게 보일까요?

<p>커피 4000</p>

• ① p 한 줄만 보인다
• ② html 안에 head와 body가 있고, body 안에 p가 보인다
• ③ 뼈대가 없어 아무 줄도 보이지 않는다

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. hello.html을 브라우저로 열고 요소 고르기로 제목을 누릅니다. Elements에서 제목 글을 바꿔 화면이 바뀌는지 본 뒤 새로고침합니다. 편집기의 파일이 그대로인지도 봅니다. 그다음 페이지 소스 보기를 열어 Elements 패널과 견줘 봅니다.