topic★★★★★난이도 · 약 15분

이미지로 말하기

img 태그로 이미지를 삽입하고, alt 속성으로 접근성을 챙긴다.

#img#src#alt#이미지#접근성

왜 배우는가

텍스트만으로는 전달할 수 없는 것들이 있다. 홈페이지에 이미지를 넣는 것은 방문자의 첫인상을 결정짓는다.

이미지는 img 태그 하나로 삽입할 수 있습니다

html

<!-- 기본 이미지 삽입 -->
<img src="images/profile.jpg" alt="나의 프로필 사진">

<!-- 크기 지정 -->
<img src="images/photo.jpg" alt="풍경 사진" width="400" height="300">

src = 이미지 파일 경로(필수), alt = 대체 텍스트(접근성 필수), width/height = 크기(선택).

속성	설명
src	이미지 파일의 경로 (필수)
alt	대체 텍스트 — 이미지 설명 (필수)
width / height	이미지 크기 (선택, CSS 권장)

alt 속성이 중요한 3가지 이유: 1. 시각장애인의 스크린 리더가 alt 텍스트를 읽어줌 2. 이미지 로딩 실패 시 대체 텍스트가 표시됨 3. 검색 엔진이 이미지 내용을 파악하는 데 사용

파일이 늘어나면 폴더로 정리해야 합니다

html

my-homepage/
├── index.html          ← 메인 페이지
├── style.css           ← 스타일 (Ch3에서 생성)
├── script.js           ← 동작 (Ch9에서 생성)
└── images/
    ├── profile.jpg     ← 프로필 사진
    └── project1.png    ← 프로젝트 스크린샷

HTML, CSS, JS, 이미지를 폴더로 분리하여 관리하는 표준 구조.

파일 이름 규칙: • 소문자만 사용 (Profile.jpg X → profile.jpg O) • 공백 대신 하이픈 (my photo.jpg X → my-photo.jpg O) • 메인 파일은 반드시 index.html (서버가 자동으로 찾음)

프로필 사진을 홈페이지에 넣어봅시다

html

<h1>김짓의 홈페이지</h1>
<img src="images/profile.jpg" alt="김짓의 프로필 사진" width="200">
<p><strong>웹 개발자</strong>를 꿈꾸는 학생입니다.</p>

<h2>나의 프로젝트</h2>
<img src="images/project1.png" alt="첫 번째 프로젝트 스크린샷">
<p>HTML과 CSS로 만든 첫 번째 웹 페이지입니다.</p>

프로필 이미지와 프로젝트 스크린샷을 홈페이지에 삽입한 예시.

Ch1에서 시작한 홈페이지가 이렇게 성장했습니다

구분	Ch1 이후 (뼈대만)	Ch2 이후 (콘텐츠 완성)
내용	h1 + p 한 개	img, strong, ul, a 포함
구조	텍스트만	이미지+목록+링크+강조

태그	설명
`<img>`	이미지를 삽입하는 빈 태그 (닫는 태그 없음)
src	이미지 파일 경로를 지정하는 필수 속성
alt	이미지를 설명하는 대체 텍스트 (접근성 필수)

핵심	설명
width/height	HTML 속성으로 픽셀 단위 크기 지정
CSS 권장	크기 조절은 CSS의 max-width를 사용하는 것이 더 유연

alt 속성은 접근성과 SEO 모두에 중요합니다. 항상 작성하세요!

실기 드릴 3문항

edit실기 드릴 · 단답형

img 태그에서 반드시 작성해야 하는 속성 2가지는?

check_circle실기 드릴 · OX

<img> 태그에는 닫는 태그(</img>)가 필요하다.

edit실기 드릴 · 단답형

<img> 태그의 alt 속성은 생략해도 되는가?