HTML 이미지 — img · alt · width · viewport 완전 정리

 

 

Web Development · HTML Image

HTML 이미지 삽입 —
img · alt · width · viewport 완전 정리

이미지를 정확하게 보여주는 4가지 핵심 + 메타 태그 비밀

시작 오늘 분석할 코드

이미지를 두 가지 방식으로 삽입하는 코드다. 하나는 원본 그대로, 하나는 250×250으로 크기 지정. 또 head에 viewport와 X-UA-Compatible 메타 태그가 추가됐다.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <h1>이미지 크기 조절</h1> <img src="images/gugudan.jpg" alt="바빠구구단"> <img src="images/gugudan.jpg" width="250" height="250" alt="바빠구구단">

실제 출력 결과

이미지 크기 조절

바빠구구단
(원본 크기) 250 × 250

용어 용어 정리

img이미지 삽입 빈 태그 (닫기 X)

srcSource — 이미지 파일 경로

altAlternative Text — 대체 텍스트

width / height너비 / 높이 (픽셀)

viewport모바일 화면 표시 설정

X-UA-CompatibleIE에 엣지 모드 강제

---

1 <img> — 빈 태그의 대표 주자

<img>는 이미지를 페이지에 삽입하는 태그다. 닫기 태그가 없는 빈 태그(empty element)로, 자기 자신만으로 완결된다.

※ </img>는 존재하지 않는다. 작성하면 검증 오류. <img src="..." alt="...">이 그 자체로 완성형.

일반 태그 (쌍)	빈 태그 (단독)
<p>내용</p>	<img src="...">
<div>...</div>	<br> · <hr> · <input>

---

2 alt 속성 — 단순 대체 텍스트가 아니다

alt는 이미지가 표시되지 않을 때 보여줄 텍스트다. 그런데 단순 대체 이상의 역할을 한다.

역할	설명
이미지 못 불러올 때	경로 오류·로딩 실패 시 텍스트 대신 표시
스크린 리더	시각장애인에게 이미지 내용을 읽어줌 (TTS)
SEO	검색엔진이 이미지 내용 인식 → 이미지 검색 노출
전자책 리더기	이미지 설명 표시
저속 인터넷	이미지 로딩 전 텍스트 미리보기

※ alt 속성은 법적으로 권장되는 웹 접근성 표준이다 (한국 전자정부 웹 접근성 지침). 빠뜨리면 검사에서 경고.

alt 작성 요령

✓ 좋은 예 <img src="cat.jpg" alt="검은 고양이가 창가에 앉아 있는 사진"> ✗ 나쁜 예 <img src="cat.jpg" alt="cat"> ← 너무 짧음 <img src="cat.jpg" alt="이미지"> ← 의미 없음 <img src="cat.jpg" alt=""> ← 비어있음 (장식 이미지면 OK)

※ 단순 장식용 이미지(아이콘 등)는 alt=""로 비워두는 것이 표준. 스크린 리더가 무시하라는 신호.

---

3 width / height — 크기 조절의 4가지 방법

이번 코드는 HTML 속성으로 크기를 줬다. 하지만 CSS로 줄 수도 있고, 단위도 픽셀 외에 여러 가지가 있다.

방법	예시	특징
HTML 속성	width="250" height="250"	픽셀만 가능, 빠른 렌더링
CSS 인라인	style="width:250px"	유연, %·em·rem 가능
CSS 클래스	.thumb { width: 250px }	재사용·유지보수 ↑
둘 다 (권장)	HTML 속성 + CSS	로딩 안정 + 유연성

※ HTML 속성도 함께 쓰는 이유

• 이미지가 로딩되기 전에도 브라우저가 미리 공간을 잡아둠 → 레이아웃 안 깨짐
• CLS(Cumulative Layout Shift) 점수 ↑ — 구글 검색 순위 요소
• HTML로 비율 알려주고, CSS로 반응형 처리: width="800" height="600" style="max-width: 100%; height: auto;"

---

4 비율 무시 — 한 쪽만 지정하기

width만 적고 height를 안 적으면 비율이 자동 유지된다. 둘 다 강제 지정하면 비율이 깨질 수 있다.

원본: 800 × 600 (4:3 비율) <img width="400"> → 자동 300 (4:3 유지) <img width="400" height="400"> → 강제 정사각형 (찌그러짐) <img width="400" height="auto"> → 비율 유지 명시

반응형

---

5 <meta name="viewport"> — 모바일의 핵심

viewport 메타 태그는 "모바일에서 어떻게 보여줄지"를 결정한다. 없으면 모바일에서 PC 화면을 작게 축소해서 보여줘 가독성이 매우 나쁘다.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> │ │ │ │ │ └─ 초기 확대 비율 (100%) │ └─ 화면 너비 = 기기 너비 └─ 메타 이름

content 속성	의미
width=device-width	너비를 디바이스 화면 폭에 맞춤
initial-scale=1.0	처음 로드 시 100% 크기
maximum-scale=1.0	확대 최대치 제한 (접근성 ↓ 권장 X)
user-scalable=no	확대 차단 (접근성 ↓ 권장 X)

※ viewport 없으면 → iPhone에서 페이지가 깨알같이 작게 보임. 거의 모든 모던 웹페이지의 필수 요소.

---

6 <meta http-equiv="X-UA-Compatible">

이 태그는 Internet Explorer를 위한 호환성 메타다. content="ie=edge"는 "IE야, 가장 최신 모드(Edge 모드)로 페이지를 렌더링해라"는 뜻.

※ 2022년 6월 IE 지원 종료. 현재는 거의 의미 없는 태그지만 옛날 코드에 자주 남아있다. 새로 작성하는 코드에는 빼도 무방.

---

7 이미지 경로 — 상대 경로 vs 절대 경로

경로 형식	예시	의미
상대 경로 (현재)	images/photo.jpg	현재 HTML 파일 기준
상대 경로 (상위)	../images/photo.jpg	한 단계 위 폴더
절대 경로 (루트)	/images/photo.jpg	도메인 루트 기준
외부 URL	https://cdn.example.com/photo.jpg	다른 사이트의 이미지

---

8 자주 하는 실수

실수	증상	해결
alt 속성 빠뜨림	접근성 검사 경고, SEO ↓	모든 img에 alt
비율 깨지게 width·height	이미지 찌그러짐	한쪽만 지정 또는 원본 비율 사용
viewport 메타 없음	모바일에서 깨알 글씨	head에 viewport 추가
경로 오타·대소문자	X 표시만 보임	F12 → 콘솔에서 404 확인
큰 원본 이미지 그대로	로딩 느림, 데이터 낭비	적절한 크기로 리사이징
장식 이미지에 alt 채움	스크린 리더가 불필요한 텍스트 읽음	alt=""로 비움

---

핵심 한 줄 요약

<img>빈 태그 — 닫기 없음

src이미지 파일 경로 — 필수

alt대체 텍스트 — 접근성·SEO 핵심

width/height크기 지정 — 한쪽만이 비율 유지

viewport meta모바일 표시의 핵심

X-UA-CompatibleIE용 — 현재는 거의 무의미

HTML + CSS속성 + 스타일 함께 권장

Tags

#img #alt #src #viewport #width #height #HTML #이미지 #이미지크기 #메타태그 #반응형 #접근성 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

img, alt, src, viewport, width, height, HTML, 이미지, 이미지크기, 메타태그, 반응형, 접근성, 웹개발, 티스토리