HTML <img> src 속성

HTML <img> 태그

정의와 사용법

필수 src 속성

속성에서 이미지의 URL을 지정하는 방법은 두 가지가 있습니다. src 속성에 URL을 지정합니다:

1. 절대적 URL 기타 웹사이트에 토래스된 외부 이미지에 링크합니다. 예를 들어:

src="https://www.codew3c.com/images/img_girl.jpg"

주의:외부 이미지는 저작권이 보호될 수 있습니다. 이를 사용하는 허가를 받지 않으면 저작권법을 위반할 수 있습니다. 또한, 외부 이미지를 제어할 수 없으며, 갑자기 제거되거나 변경될 수 있습니다.

2. 상대적 URL 내부에 토래스된 이미지에 링크합니다.

이곳에서 URL은 도메인을 포함하지 않습니다. URL이 슬래시로 시작되지 않으면, 현재 페이지에 상대적입니다. 예를 들어:

src="img_girl.jpg".

URL이 슬래시로 시작되면, 도메인에 상대적입니다. 예를 들어:

src="/images/img_girl.jpg".

ヒント:대체로 상대적 URL을 사용하는 것이 좋습니다. 도메인을 변경하면 링크가 끊기지 않습니다.

주의:브라우저가 이미지를 찾을 수 없으면, 깨진 링크 아이콘과 alt 텍스트를 표시합니다.

ヒント:문서 저장을 정리하기 위해, 제작자는 일반적으로 이미지 파일을 별도의 폴더에 저장하며, 이 폴더 이름을 "pics"나 "images"와 같은 이름으로 지정합니다. CodeW3C.com 온라인 강의에서, 우리의 엔지니어는 대부분의 일반적으로 사용되는 이미지를 "i"라는 이름의 폴더에 저장했습니다. "i"는 "images"의 약자로, 이렇게 하면 경로를 최대한 간소화할 수 있습니다.

예제

아래의 예제에서, 우리는 페이지에 CodeW3C.com의 엔지니어가 상해 화려한 정원에서 촬영한 풀밭 사진을 삽입했습니다. 이 사진 파일의 이름은 "eg_tulip.jpg"이며, 서버의 "i" 폴더에 저장되어 있습니다. 이는 다음과 같은 원본 코드입니다:

<img src="/i/eg_tulip.jpg" />

위 코드의 효과:


직접 시도해 보세요

ヒント:우리의 온라인 테스트 도구에서직접 시도해 보세요，만약 예제의 파일 이름을 "eg_chinarose.jpg"으로 변경하면, 장미의 사진을 볼 수 있습니다. 이렇게 보입니다:

소스 코드:

<img src="/i/eg_chinarose.jpg" />

위 코드의 효과:

문법

<img src="URL">

속성 값

값 설명
URL

이미지의 URL을 정의합니다。

가능한 값:

  • 절대적 URL - 다른 사이트를 가리키는 것（예：src="http://www.example.com/image.gif"）
  • 상대적 URL - 사이트 내 파일을 가리키는 것（예：src="image.gif"）

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원

HTML <img> 태그