그림 넣기 img

img는 그림 파일을 페이지의 그 자리에 그리는 요소입니다. src에 그림 파일의 주소를, alt에 그림 대신 쓸 글을, width · height에 그릴 크기를 적습니다.

김치볶음밥이 어떤 모습인지는 글보다 그림 한 장이 잘 전합니다. 그런데 그림은 HTML 파일 안에 들지 않고 따로 있는 파일이라, 브라우저가 그 파일을 따로 받아 와야 보입니다. 그래서 img에는 그림 파일의 주소뿐 아니라, 받는 동안 비워 둘 자리와 받지 못했을 때 대신 보일 글까지 함께 적습니다.

1브라우저는 src의 그림을 따로 받는다

<img
  src="images/kimchi.svg"
  alt="김치볶음밥 한 그릇"
  width="280"
  height="210"
/>

브라우저는 HTML을 읽다가 img의 src를 만나면 그 주소의 그림 파일을 따로 받습니다(브라우저 규칙 1). 글은 그림을 기다리지 않고 먼저 그려지고, 그림은 받은 뒤에 그 자리에 채워집니다. src의 주소는 앞 레슨의 규칙대로 이 HTML 파일이 있는 폴더에서 출발합니다. 잰 값 칸의 파일은 브라우저가 받아 그린 그림 파일의 이름입니다.

img는 안에 글을 담지 않는 빈 요소라 닫는 태그가 없습니다. 이 과목은 빈 요소를 />로 끝냅니다. 여는 태그가 한 줄에 들지 않아 속성을 한 줄에 하나씩 적었습니다.

2alt는 그림 대신 쓰는 글

alt의 글은 그림을 볼 수 없을 때 그림 대신 쓰입니다. 그림 파일을 받지 못하면 그 자리에 보이고, 화면 읽기 프로그램은 이 글을 그림의 이름으로 읽습니다(브라우저 규칙 3).

<img
  src="images/kimch.svg"
  alt="김치볶음밥 한 그릇"
  width="280"
  height="210"
/>

kimchi.svg에서 i 한 글자가 빠져 그림 파일을 받지 못했습니다. 크롬은 그 자리에 깨진 그림 표시와 alt 글을 그리고, width · height를 적었어도 자리를 alt 글 크기로 줄입니다. 잰 값 칸의 읽는 이름은 화면 읽기 프로그램이 그 요소를 부르는 이름입니다. 그림을 받았든 못 받았든 alt 글 그대로입니다.

그래서 alt에는 그림이 전하는 것을 씁니다. 그림을 볼 수 없는 사람도 그 글만으로 무엇이 있었는지 알 수 있어야 합니다.

3width · height는 단위 없이 적는 그릴 크기

width와 height에는 그림을 그릴 너비와 높이를 px 수로, 단위 없이 적습니다(width="280").

• 둘 다 적으면 브라우저는 그림이 오기 전부터 그 크기의 자리를 비워 둡니다. 그림이 늦게 와도 읽던 글이 밀려 내려가지 않습니다.
• 그림 파일의 원래 크기와 달라도 적은 크기로 그립니다. 이 과목의 예제는 휴대전화 화면에 들도록 280 × 210 이하로 적습니다.
• loading="lazy"를 함께 적으면, 화면에서 먼 그림은 가까이 왔을 때 받습니다.

예제

김치볶음밥 페이지 kimchi.html에 김치볶음밥 그림을 넣습니다. 하위 목표 셋을 차례로 밟습니다.

recipe-note/
  kimchi.html
  images/
    kimchi.svg

1. 폴더 나무에서 출발점 찾기 — 그림을 넣을 kimchi.html은 recipe-note/ 바로 안에 있으므로 출발점은 recipe-note/입니다.

2. 경로 쓰기 — 그림 kimchi.svg는 images/ 안에 있으므로 images/kimchi.svg입니다.

3. alt 고르기 — 그림을 볼 수 없는 사람에게 그림이 전할 것을 씁니다. 파일 이름이 아니라 '김치볶음밥 한 그릇'처럼 무엇이 보이는지 적습니다.

<h1>김치볶음밥</h1>
<img
  src="images/kimchi.svg"
  alt="김치볶음밥 한 그릇"
  width="280"
  height="210"
/>
<p>15분이면 완성합니다.</p>

이 코드에서 width와 height 두 줄을 지우면 결과 화면의 그림은 어떻게 될까요? 그림 파일 kimchi.svg의 원래 크기는 가로 800 · 세로 600입니다.

<h1>김치볶음밥</h1>
<img
  src="images/kimchi.svg"
  alt="김치볶음밥 한 그릇"
/>
<p>15분이면 완성합니다.</p>

자주 틀리는 곳

틀린 생각: alt는 빼도 되고, 넣는다면 파일 이름을 적으면 된다.

<img
  src="images/kimchi.svg"
  width="280"
  height="210"
/>

alt가 없는 그림은 읽는 이름이 없습니다. 화면 읽기 프로그램에 따라 파일 이름을 대신 읽기도 하고, 경로가 틀리면 화면에도 깨진 표시만 남아 무슨 그림이었는지 알 수 없습니다. alt="kimchi.svg"처럼 파일 이름을 넣으면 읽는 이름이 'kimchi.svg'가 됩니다.

맞는 규칙: alt에는 그림이 전하는 것을 글로 적습니다. 그 글이 그림의 읽는 이름이 됩니다(브라우저 규칙 3). 어떤 글이 좋은지는 7단원에서 더 봅니다.

틀린 생각: width에도 140px처럼 단위를 붙인다.

<img
  src="images/kimchi.svg"
  alt="김치볶음밥 한 그릇"
  width="140px"
  height="105px"
/>

크롬은 앞의 수만 읽어 그림을 140 × 105로 그립니다. 화면만 보면 맞은 것 같지만, 검사기는 width · height의 값에 숫자가 아닌 p가 있다고 Error를 냅니다.

맞는 규칙: width · height에는 단위 없이 수만 적습니다(width="140"). 크기에 단위를 붙이는 것은 4단원부터 배우는 CSS입니다.

틀린 생각: 그림을 크게 보이려면 width를 크게 적으면 된다.

width를 키우면 그 크기로 그리지만, 그림 파일에 담긴 점(픽셀)이 늘어나지는 않습니다. 점으로 된 사진은 원래 크기보다 크게 그리면 흐려지고, 화면보다 넓게 적으면 휴대전화에서 옆으로 넘칩니다. 늘린 그림이 어떻게 흐려지는지는 다음 레슨 그림 형식과 figure의 실험대에서 직접 키워 봅니다.

맞는 규칙: width · height는 그릴 자리의 크기일 뿐, 그림을 더 또렷하게 만들지 않습니다. 크게 보일 그림은 그 크기에 맞는 파일을 씁니다.

확인 문제

1. 레시피 목록에 김치볶음밥과 된장찌개 그림을 나란히 넣었습니다. 둘째 그림의 doenjang.svg에서 g 한 글자가 빠지면, 두 그림 자리는 어떻게 될까요?

<img
  src="images/kimchi.svg"
  alt="김치볶음밥"
  width="120"
  height="90"
/>

<img
  src="images/doenjang.svg"
  alt="된장찌개"
  width="120"
  height="90"
/>

• ① 두 자리 모두 깨진 그림 표시가 된다
• ② 첫째는 그대로 그려지고, 둘째 자리에만 '된장찌개' 글이 보인다
• ③ 첫째는 그대로 그려지고, 둘째 자리는 글 없이 120 × 90 빈 자리로 남는다

<img
  src="images/kimchi.svg"
  alt="김치볶음밥"
  width="120"
  height="90"
/>

<img
  src="images/doenjang.sv"
  alt="된장찌개"
  width="120"
  height="90"
/>

1~6줄 접음(첫째 그림)
<img
  src=""
  alt="된장찌개"
  width="120"
  height="90"
/>

2. 된장찌개 페이지 recipes/doenjang.html⁠에 된장찌개 그림을 넣습니다. 폴더 나무를 보고 ____ 자리에 들어갈 주소를 쓰세요.

recipe-note/
  images/
    doenjang.svg
  recipes/
    doenjang.html

<!-- recipes/doenjang.html -->
…
<img
  src="____"
  alt="된장찌개 한 그릇"
  width="280"
  height="210"
/>

3. 요리 동아리 공지입니다. 화면 읽기 프로그램으로 들으니 그림을 'japchae.svg'라고 읽습니다. 몇 번 줄을 어떻게 고쳐야 할까요? 고친 줄을 쓰세요.

<h2>이번 주 요리: 잡채</h2>
<img
  src="images/japchae.svg"
  alt="japchae.svg"
  width="280"
  height="210"
/>

<h2>이번 주 요리: 잡채</h2>
<img
  src="images/japchae.svg"
  alt="잡채 한 접시"
  width="280"
  height="210"
/>

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 레시피 노트의 그림 파일은 여기서 받습니다. 김치볶음밥 그림은 단원 연습 문제와 레시피 한 페이지 만들기에서, 떡볶이 그림은 단원 연습 문제에서 다시 씁니다.

• kimchi.svg 받기
• tteokbokki.svg 받기

html-css-study 폴더에 images 폴더를 만들고, 받은 파일을 옮겨 넣습니다(브라우저가 받은 파일은 보통 '다운로드' 폴더에 있습니다). hello.html에 kimchi.svg를 예제처럼 img로 넣어 봅니다. 그다음 alt를 지우고 경로를 일부러 틀리게 고치면 그림 자리에 무엇이 남을지 먼저 적고, 저장해 새로고침해서 맞춰 봅니다.