LEVEL 5 QUEST

이미지 다루기

웹에 사진 넣기, 크기 조절, 무료 이미지 찾기

🖼️

이미지 다루기

웹사이트에 사진을 넣고, 크기를 조절하고, 무료 이미지를 찾는 방법까지!

📷 img 태그의 모든 것

웹에 이미지를 넣는 가장 기본적인 방법은 <img> 태그를 사용하는 것입니다. img 태그는 닫는 태그가 없는 셀프 클로징(self-closing) 태그예요!

<!-- 기본 이미지 삽입 -->
<img src="photo.jpg" alt="사진 설명">

<!-- 크기 지정 -->
<img src="photo.jpg" alt="사진 설명" width="300" height="200">

<!-- CSS로 크기 조절 (권장!) -->
<img src="photo.jpg" alt="사진 설명" style="width: 100%; max-width: 500px;">

필수 속성 2가지

src (source)

이미지 파일의 경로를 지정합니다. 내 컴퓨터의 파일이나 인터넷 URL 모두 가능해요. 이 속성이 없으면 이미지가 표시되지 않습니다.

alt (alternative)

이미지가 로딩되지 않을 때 대신 보여줄 텍스트입니다. 시각장애인을 위한 스크린리더에도 사용되어 접근성에 매우 중요합니다.

기타 유용한 속성들

속성	설명	예시
loading	지연 로딩 설정	loading="lazy"
title	마우스 올리면 보이는 툴팁	title="클릭하세요"
srcset	반응형 이미지 경로	srcset="small.jpg 480w, big.jpg 1200w"
decoding	디코딩 방식	decoding="async"

💡 초보자 팁: 경로 이해하기

상대 경로: src="images/photo.jpg" → 같은 폴더 안의 images 폴더에서 찾기
절대 경로: src="/images/photo.jpg" → 사이트 최상위부터 찾기
외부 URL: src="https://example.com/photo.jpg" → 다른 사이트의 이미지 가져오기

상대 경로는 내 파일 위치 기준, 절대 경로는 웹사이트 루트 기준이에요. 헷갈리면 절대 경로를 사용하세요!

🔒

여기까지는 미리보기입니다

이미지 다루기
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)