그림 파일에는 형식이 있습니다. 사진은 jpg나 webp, 로고와 아이콘은 svg, 배경이 투명한 그림은 png를 고르고, 그림에 늘 보이는 설명을 붙일 때는 figure로 묶어 figcaption을 씁니다.
같은 로고라도 어떤 형식으로 저장했느냐에 따라 크게 그렸을 때 또렷하기도 하고 흐리기도 합니다.
또 alt 글은 그림을 볼 수 없을 때만 보이므로, 그림을 보는 사람도 함께 읽을 설명은 따로 적어야 합니다.
이 레슨에서는 그림의 형식을 고르는 법과 그림에 설명을 붙이는 법을 봅니다.
1점으로 담은 그림과 도형을 적은 그림
- png · jpg · webp는 그림을 가로세로로 늘어선 점(픽셀)으로 담습니다. 담긴 점보다 크게 그리면 점이 커져 가장자리가 흐립니다. 위 실험대의
logo.png는 가로세로 48점이라, 96px로 그리면 흐렸습니다. - svg는 어디에 어떤 선과 도형을 그릴지 적어 둔 그림입니다. 크게 그리면 그 크기에 맞춰 새로 그리므로 또렷합니다.
- 어느 형식이든 그리는 크기는
width·height가 정합니다. 형식이 바뀌어도 잰 값 칸의 너비는 96px 그대로였습니다.
svg는 칸의 비율이 그림과 달라도 제 비율을 지킵니다.
<img
src="images/kimchi.svg"
alt="김치볶음밥 한 그릇"
width="280"
height="140"
/>img의 너비280pximg의 높이140px
그림 kimchi.svg는 가로 800 · 세로 600(4:3)인데 칸은 280 × 140입니다. 그림은 칸 높이에 맞춰 가로를 줄이고 가운데에 그려져, 양옆에 빈 띠가 남습니다. 점으로 담은 사진은 같은 칸에서 옆으로 늘어나 찌그러집니다. 그림을 칸에 맞추는 법은 15단원에서 봅니다.
2무엇에 어느 형식을 쓰나
| 그림 | 형식 | 까닭 |
|---|---|---|
| 사진 | jpg · webp | 색이 많은 그림을 작은 파일로 담는다. 눈에 덜 띄는 것을 조금 버려 줄인다 |
| 로고 · 아이콘 | svg | 어떤 크기로 그려도 또렷하다 |
| 배경이 투명한 그림 | png | 점을 버리지 않고 담고, 투명한 배경도 담는다. jpg는 투명을 담지 못한다 |
webp는 jpg보다 같은 사진을 더 작은 파일로 담는 형식입니다. 형식은 파일 이름 끝의 확장자(.jpg · .png · .svg)로 알아봅니다. 확장자는 형식을 알려 주는 이름일 뿐이라, 이름만 바꾼다고 형식이 바뀌지는 않습니다.
3figure와 figcaption — 늘 보이는 설명
figure는 그림과 그 설명을 한 덩어리로 묶는 요소이고, figcaption은 그 안에 두는 설명(캡션)입니다. figcaption은 figure의 첫째나 마지막 자식으로 둡니다.
<figure>
<img
src="images/doenjang.svg"
alt="된장찌개 한 그릇"
width="200"
height="150"
/>
<figcaption>
두부를 넣어 끓인 된장찌개
</figcaption>
</figure>figure의 보이는 글두부를 넣어 끓인 된장찌개img의 읽는 이름된장찌개 한 그릇
figcaption의 글은 그림이 보이든 안 보이든 모두에게 늘 보입니다. alt 글은 그림을 볼 수 없을 때만 그 자리에 보이고, 화면 읽기 프로그램이 그림의 이름(읽는 이름)으로 읽습니다. 그래서 잰 값 칸의 보이는 글에는 alt 글이 들지 않습니다.
크롬은 figure를 양옆으로 들여 그립니다(브라우저의 기본 스타일). 결과 화면에서 그림과 설명이 왼쪽 끝보다 안쪽에 놓인 까닭입니다.
영상과 지도는 video · iframe 요소로 넣습니다. 이 과목에서는 다루지 않습니다.
예제
레시피 카드의 그림과 설명입니다. 그런데 그림 파일 이름을 kimch.svg로 잘못 적었습니다. 화면에는 어떤 글이 보일까요?
<figure>
<img
src="images/kimch.svg"
alt="김치볶음밥 한 그릇"
width="200"
height="150"
/>
<figcaption>
달걀을 올리면 완성
</figcaption>
</figure>결과 화면 보기
img의 원본 너비0px
'김치볶음밥 한 그릇'과 '달걀을 올리면 완성'이 둘 다 보입니다. 그림 파일을 받지 못해 alt 글이 그림 자리를 맡았고(크롬은 깨진 그림 표시도 함께 그립니다), figcaption은 그림과 상관없이 늘 보입니다.
잰 값 칸의 원본 너비는 브라우저가 받은 그림 파일의 원래 너비입니다. 파일을 받지 못하면 0px입니다.
자주 틀리는 곳
틀린 생각: 설명이 그림 바로 아래에 오기만 하면 figure 밖에 두어도 된다.
<figure>
<img
src="images/kimchi.svg"
alt="김치볶음밥 한 그릇"
width="200"
height="150"
/>
</figure>
<figcaption>
달걀을 올리면 완성
</figcaption>- Error9줄Element “figcaption” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)
설명은 보이지만, figure처럼 들여 그려지지 않고 왼쪽 끝에 붙습니다(크롬 기준). figure 밖의 figcaption은 어느 그림의 설명도 아니고, 검사기는 9번 줄에 Error를 냅니다.
맞는 규칙: figcaption은 figure 안의 첫째나 마지막 자식으로 둡니다. 그래야 그림과 설명이 한 덩어리가 됩니다.
틀린 생각: alt와 figcaption에 같은 글을 넣으면 더 확실하다.
<figure>
<img
src="images/kimchi.svg"
alt="달걀을 올리면 완성"
width="200"
height="150"
/>
<figcaption>
달걀을 올리면 완성
</figcaption>
</figure>img의 읽는 이름달걀을 올리면 완성figcaption의 보이는 글달걀을 올리면 완성
화면 읽기 프로그램은 그림의 이름으로 alt 글을 읽고, 이어서 figcaption의 글도 읽습니다. 같은 말을 두 번 듣게 됩니다.
맞는 규칙: alt에는 그림에 보이는 것을, figcaption에는 그림에 덧붙일 설명을 씁니다. 둘을 어떻게 나눠 쓰는지는 7단원에서 더 봅니다.
틀린 생각: 확장자를 바꾸면 파일의 형식도 바뀐다.
logo.png의 이름을 logo.jpg로 바꿔도 파일 안은 점으로 담은 png 그대로입니다. 크롬은 파일 안을 보고 png로 그려, 두 배로 키우면 똑같이 흐립니다. 이름을 logo.svg로 바꾸면 크롬은 svg로 읽으려다 그리지 못하고, 받지 못한 그림처럼 alt 글을 보입니다.
맞는 규칙: 형식은 파일 안에 그림을 담은 방식이고, 확장자는 그 형식을 알려 주는 이름입니다. 다른 형식이 필요하면 그림 프로그램에서 그 형식으로 다시 저장합니다. 크게 써도 또렷해야 하는 로고는 처음부터 svg로 그린 파일을 씁니다.
확인 문제
1. 예제의 그림 경로를 images/kimchi.svg로 바로잡았습니다. 이제 화면에 보이는 글은 무엇일까요?
- ① '김치볶음밥 한 그릇'과 '달걀을 올리면 완성' 둘 다
- ② '달걀을 올리면 완성'만
- ③ '김치볶음밥 한 그릇'만
힌트
alt 글이 화면에 보이는 때와 figcaption의 글이 보이는 때를 나눠 생각합니다.
정답
② — '달걀을 올리면 완성'만 보입니다.
<figure>
<img
src="images/kimchi.svg"
alt="김치볶음밥 한 그릇"
width="200"
height="150"
/>
<figcaption>
달걀을 올리면 완성
</figcaption>
</figure>figure의 보이는 글달걀을 올리면 완성
그림을 받아 그렸으니 alt 글은 화면에 나오지 않습니다. figcaption은 늘 보입니다.
- ①
alt글도 늘 보인다고 본 것입니다.alt글은 그림을 볼 수 없을 때만 보입니다. - ③ 두 글의 할 일을 거꾸로 본 것입니다. 늘 보이는 쪽이
figcaption입니다.
2. 그림 아래에 늘 보이는 설명을 붙이려 합니다. ____ 두 곳에 같은 요소 이름을 쓰세요.
<figure>
<img
src="images/japchae.svg"
alt="잡채 한 접시"
width="200"
height="150"
/>
<____>
채소를 따로 볶아 섞습니다
</____>
</figure>힌트
figure 안에서 설명을 담는 요소의 이름을 3절에서 찾아봅니다.
정답
figcaption입니다.
<figure>
<img
src="images/japchae.svg"
alt="잡채 한 접시"
width="200"
height="150"
/>
<figcaption>
채소를 따로 볶아 섞습니다
</figcaption>
</figure>figcaption은 figure의 마지막 자식이라 그림 아래에 보입니다. 첫째 자식으로 두면 그림 위에 보입니다.
3. 플로우 카페 메뉴판의 로고는 가로세로 48점인 logo.png입니다. 크게 넣었더니 흐릿해서, 사장님이 파일 이름만 logo.svg로 바꾸고 src도 그렇게 고쳤습니다. 크롬에서 로고 자리에는 무엇이 보일까요?
…
<img
src="images/logo.svg"
alt="플로우 카페"
width="192"
height="192"
/>- ① 또렷한 로고
- ② 흐릿한 로고 그대로
- ③ 깨진 그림 표시와 '플로우 카페' 글
힌트
파일의 이름을 바꿀 때 파일 안에 든 것도 바뀌는지 생각해 봅니다.
정답
③ — 깨진 그림 표시와 '플로우 카페' 글이 보입니다(크롬 기준).
이름이 .svg로 끝나는 파일을 크롬은 svg로 읽으려 합니다. 그런데 파일 안에는 점으로 담은 png가 들어 있어 svg로 그리지 못하고, 받지 못한 그림처럼 alt 글이 그 자리를 맡습니다.
- ① 확장자가 형식을 바꾼다고 본 것입니다. 확장자는 이름일 뿐입니다.
- ② 이름만 바뀌고 그림은 그대로 그려진다고 본 것입니다. 이름을
.jpg로 바꾸면 그렇게 그려지지만,.svg로 바꾸면 그리지 못합니다.
또렷한 로고가 필요하면 svg로 그린 로고 파일을 따로 받아 씁니다.
컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요.
위 실험대의 로고 파일 둘을 받아 html-css-study 폴더의 images 폴더에 넣습니다. logo.png는 가로세로 48점입니다.
hello.html에 logo.png를 img로 넣고 width · height를 원래 크기의 두세 배로 적어, 가장자리가 어떻게 보일지 먼저 적은 뒤 열어 봅니다. 그다음 logo.svg를 같은 크기로 나란히 넣어 견줘 봅니다.