이미지 · 마틴과 코딩하기

웹사이트에 사진과 그림을 추가하고 폴더에 깔끔하게 정리하는 방법을 알아보세요.

보여줄게: 이미지 태그

이미지가 다음과 같이 추가돼.<img>꼬리표:

<img src="images/school.jpg" alt="Our school building">

여기서 설명할 가치가 있는 두 가지 사항은 다음과 같어.

src (출처)는 이미지가 어디에 있는지 말해. 여기:images폴더, 파일school.jpg.
alt(대체)는 이미지에 대한 텍스트 설명야. 이미지가 로드되지 않으면 표시되며 시각 장애인을 위해 화면 판독기가 소리내어 읽어. 항상 작성해 – 이는 전문가를 위한 예의이자 표준 관행야.

한 가지 더 알아두세요.<img>닫는 태그가 없어. 아무것도 “포장”하지 않고 단지 자신을 삽입할 뿐야. 일부 태그는 그런 식으로 작동해.

💡

**이미지는 어디서 얻나요?** 자신의 사진(부모님에게 컴퓨터로 보내달라고 요청), 스캔하거나 사진을 찍은 자신의 그림 또는 다음과 같은 사이트의 무료 이미지pixabay.com. Google에서 이미지만 가져오지 마세요. 대부분의 이미지는 누군가의 소유이므로 허가 없이 사용할 수 없어.

깔끔하게 유지해: 이미지용 폴더

VS Code에서`my-website`폴더, **새 폴더**를 만들고 이름을 지정해.`images`(왼쪽 상단에 플러스 아이콘이 있는 폴더)

2~3개의 이미지를 복사해. VS Code로 바로 끌어서 놓을 수도 있어.

**간단히 이름을 바꾸세요**: 소문자, 악센트 없음, 공백 없음. 다음과 같은 것`school.jpg`,`field.jpg`,`trip-mountains.jpg`. 그러면 두통이 많이 줄어들 것야.

## 네 차례 💪

콘텐츠에 맞는 이미지를 페이지에 두 개 이상 추가해(기본 제목 바로 아래에 하나, 장에 하나).

🏫 학교 웹사이트 – 솔루션

<h1>Riverside Elementary School</h1>
<img src="images/school.jpg" alt="Our school building">
<p>Welcome to our school's website.</p>

<h2>Clubs</h2>
<img src="images/gym.jpg" alt="Our gym during a floorball game">
<ul>
  <li>floorball</li>
  <li>ceramics</li>
</ul>

🙋 개인 웹사이트 – 솔루션

<h1>Hi, I'm Jake</h1>
<img src="images/me.jpg" alt="Me with a soccer ball">

<h2>What I Like</h2>
<img src="images/minecraft-build.jpg" alt="My castle built in Minecraft">
<p>More than anything, soccer and Minecraft.</p>

🌍 여행 일지 - 솔루션

<h1>Where We've Been 🌍</h1>

<h2>Last Trip: The Mountains</h2>
<img src="images/mountains.jpg" alt="View from the summit over the forest">
<p>Over the summer we hiked through the mountains.</p>

<h2>Greece 2025</h2>
<img src="images/sea.jpg" alt="A bay with crystal-clear water">

⚽ 클럽 웹사이트 – 솔루션

<h1>Riverside Eagles FC</h1>
<img src="images/team.jpg" alt="Our team photo after the match">

<h2>Recent Results</h2>
<img src="images/match.jpg" alt="Owen scoring a goal against the Wildcats">

⚠️

**이미지가 표시되지 않습니까?** 확인: 1) 코드의 이름이 파일 이름(대문자/소문자도 포함)과 정확히 일치하는지, 2) 이미지가 실제로`images`폴더, 3) 페이지를 저장하고 새로 고치는 것을 잊지 않았어. 해당 장에서 추가 도움말 찾기뭔가가 작동하지 않을 때.

✅

**직접 확인해:** 페이지에서 이미지를 볼 수 있어. 너무 크거나 이상하게 늘어날 수 있어. 괜찮어. CSS에 도달하면 크기 조정을 수정할 거야.

이번 수업에서 배울 점

-<img src="..." alt="...">태그는 이미지를 삽입해. 닫는 태그가 없어. -alt이미지를 말로 설명해. 항상 채워주세요.

이미지를 다음 위치에 보관해.images간단히 이름이 지정된 폴더: 소문자, 공백이나 악센트 없음.