Ch.2 콘텐츠 쌓기 — 텍스트, 목록, 링크, 이미지

이미지로 말하기

img 태그로 이미지를 삽입할 수 있다alt 속성의 중요성(접근성)을 이해한다프로젝트 폴더 구조를 정리할 수 있다

텍스트만으로는 전달할 수 없는 것들이 있다

사진 한 장이 천 마디 말보다 강할 때가 있습니다. 홈페이지에 이미지를 넣는 것은 방문자의 첫인상을 결정짓습니다.

HTML에서 이미지는 어떻게 넣을까?

img 태그와 alt 속성 — 이미지를 삽입하고 접근성까지 챙기는 방법을 배워봅시다.

article

핵심 내용

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

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

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

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

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

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

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

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

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

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

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

<img> 태그의 alt 속성은 생략해도 된다

HTML 콘텐츠 마스터!

key

핵심 용어

📁

src

이미지 파일의 경로 (필수)

♿

alt

대체 텍스트 — 이미지 설명 (필수)

📐

width / height

이미지 크기 (선택, CSS 권장)

edit_note

정리 노트

이미지와 멀티미디어

이미지 기본

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

이미지 크기 조절

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

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

check_circle

핵심 정리

  • 1<img src="경로" alt="설명">으로 이미지를 삽입한다
  • 2alt 속성은 접근성, SEO, 로딩 실패 대비에 필수
  • 3파일 이름은 소문자 + 하이픈, 메인 파일은 index.html

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작