이미지
Coddy HTML 여정의 Fundamentals 섹션에 포함된 레슨 — 60개 중 23번째.
이미지는 웹페이지를 더 매력적으로 만들 수 있으며, HTML에서 <img> 태그를 사용하여 이미지를 추가하는 것은 간단합니다. <img> 태그는 셀프 클로징(self-closing) 태그로, 종료 태그가 필요하지 않음을 의미합니다.
이미지를 표시하려면 src 속성을 사용해야 합니다. 이 속성은 이미지의 위치(URL 또는 파일 경로)를 지정합니다. 다음은 예시입니다:
<img src="https://coddy.tech/images/bit.svg" />이 예제에서 브라우저는 URL https://coddy.tech/images/bit.svg에서 이미지를 로드하고 표시합니다.
자체 종료 태그(Self-closing tags)는 <img>와 같이 닫는 태그가 필요하지 않습니다. 이 태그들은 />로 끝나며, 내부에 콘텐츠가 없는 요소에 사용됩니다.
챌린지
쉬움HTML 문서에 이미지를 추가하세요. 레슨의 예시에 있는 URL이나 다른 URL을 사용할 수 있습니다.
이미지가 보이는지 확인하세요!
치트 시트
<img> 태그는 이미지를 표시하며 자체 종료됩니다(종료 태그가 필요하지 않음):
<img src="https://coddy.tech/images/bit.svg" />src 속성은 이미지 위치(URL 또는 파일 경로)를 지정합니다. 자체 종료 태그는 />로 끝납니다.
직접 해보기
<!DOCTYPE html>
<html>
<body>
<!-- 여기에 코드를 작성하세요 -->
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
