HTML IMG 태그의 속성은 무엇입니까? IMG 태그 사용 방법 알아보기

HTML IMG 태그의 속성은 무엇인가요? IMG 사용법을 아시나요? 이 문서에서는 모든 HTML img 태그 속성에 대한 포괄적인 설명을 제공합니다. 모두가 HTML과 img 태그에 익숙하길 바랍니다.

HTML에서 이미지는 태그로 정의됩니다.

는 빈 태그입니다. 즉, 속성만 포함하고 닫는 태그가 없습니다.

페이지에 이미지를 표시하려면 소스 속성(src)을 사용해야 합니다. src는 "소스"를 나타냅니다. source 속성의 값은 이미지의 URL 주소입니다.

이미지 정의 구문은 다음과 같습니다.

<img src="/static/imghwm/default1.png"  data-src="url"  class="lazy"   alt="some_text">

URL은 이미지가 저장되는 위치를 나타냅니다. www.runoob.com의 이미지 디렉터리에 "pulpit.jpg"라는 이미지가 있는 경우 해당 URL은 http://www.runoob.com/images/yidian.jpg입니다.

브라우저는 이미지 태그가 나타나는 문서에 이미지를 표시합니다. 두 문단 사이에 이미지 태그를 배치하면 브라우저는 첫 번째 문단을 먼저 표시한 다음 이미지, 마지막으로 두 번째 문단을 표시합니다.

정의 및 사용법

img 요소는 웹 페이지에 이미지를 삽입합니다.

기술적으로 태그는 웹페이지에 이미지를 삽입하는 것이 아니라 웹페이지의 이미지를 연결한다는 점에 유의하세요. 태그는 참조된 이미지에 대한 자리 표시자를 만듭니다.

태그에는 src 속성과 alt 속성이라는 두 가지 필수 속성이 있습니다.

src 속성: 이미지를 표시할 URL을 지정합니다.

alt 속성은 이미지에 대해 준비된 대체 텍스트 문자열을 정의하는 데 사용됩니다.

대체 텍스트 속성의 값은 사용자가 정의합니다.

<img src="/static/imghwm/default1.png"  data-src="boat.gif"  class="lazy"   alt="Big Boat">

브라우저가 이미지를 로드할 수 없는 경우 대체 텍스트 속성은 독자에게 잃어버린 정보를 알려줍니다. 이 시점에서 브라우저는 이미지 대신 이 대체 텍스트를 표시합니다. 페이지의 모든 이미지에 대체 텍스트 속성을 추가하는 것이 좋습니다. 이는 정보를 더 잘 표시하는 데 도움이 되며 텍스트 전용 브라우저를 사용하는 사용자에게 매우 유용합니다.

HTML img 속성의 크기 조정

HTML 부분:

<div class="tu"><img  src="/static/imghwm/default1.png"  data-src="pulpit.jpg"  class="lazy"  src=“suofang.jpg” alt="HTML IMG 태그의 속성은 무엇입니까? IMG 태그 사용 방법 알아보기" >

css 제어 이미지 크기 조정:

.tu img{
 max-height:720px; 
 max-width:640px; 
 width:expression(this.width > 640 && this.height < this.width ? 640: true); 
 height:expression(this.height > 720 ? 720: true);
}

설명: 이미지가 640px보다 크면 자동으로 640px로 크기가 조정됩니다. 640px보다 작으면 실제 크기는 720px보다 크면 720px로 조정됩니다. 참고: 일반적으로 사진 크기는 제어되지 않습니다.

이미지 중앙 표시: (모든 정렬 속성 값이 첨부됨)

left: 이미지를 왼쪽으로 정렬

right: 이미지를 오른쪽으로 정렬

middle: 이미지를 중앙으로 정렬

top: 이미지를 위쪽 정렬로 정렬

bottom: 이미지를 아래쪽으로 정렬

height, width 속성

height(높이) 및 width(너비) 속성은 이미지의 높이와 너비를 설정하는 데 사용됩니다. 영상.

속성 값의 기본 단위는 픽셀입니다.

<img src="/static/imghwm/default1.png"  data-src="pulpit.jpg"  class="lazy"   alt="Pulpit rock"    style="max-width:90%"  style="max-width:90%">

팁: 이미지의 높이와 너비를 지정하는 것이 좋습니다. 이미지의 높이와 너비가 지정된 경우 페이지가 로드될 때 지정된 크기가 유지됩니다. 이미지 크기를 지정하지 않으면 페이지 로드 시 HTML 페이지의 전체 레이아웃이 깨질 수 있습니다.

기본 노트 - 유용한 팁:

참고: HTML 파일에 10개의 이미지가 포함된 경우 페이지를 올바르게 표시하려면 11개의 파일을 로드해야 합니다. 이미지를 로드하는 데는 시간이 걸리므로 이미지를 주의해서 사용하는 것이 좋습니다.

참고: 페이지를 로드할 때 페이지 이미지를 삽입할 경로에 주의하세요. 이미지 위치를 올바르게 설정할 수 없으면 브라우저에서 이미지를 로드할 수 없으며 이미지 태그에 깨진 이미지가 표시됩니다.

HTML 이미지 태그:

이미지 정의

이미지 맵에서 클릭 가능한 영역 정의

HTML과 XHTML의 차이점:

In HTML의 경우 태그에는 닫는 태그가 없습니다.

XHTML에서는 태그를 올바르게 닫아야 합니다.

HTML 4.01에서는 이미지 요소의 "align", "border", "hspace" 및 "vspace" 속성이 더 이상 사용되지 않습니다.

XHTML 1.0 Strict DTD에서는 이미지 요소의 "align", "border", "hspace" 및 "vspace" 속성이 지원되지 않습니다.

【Knowledge Supplement】

img의 선택적 속성:

• align: 주변 텍스트에 따라 이미지를 정렬하는 방법을 지정합니다.

• border: 이미지 주위의 테두리를 정의합니다.

• height: 이미지의 높이를 정의합니다.

• hspace: 이미지의 왼쪽과 오른쪽에 있는 공백을 정의합니다.

• ismap: 이미지를 서버 측 이미지 맵으로 정의합니다.

• longdesc: 긴 이미지 설명 문서가 포함된 URL을 가리킵니다.

• usemap: 이미지를 클라이언트 이미지 맵으로 정의합니다.

• vspace: 이미지 상단과 하단의 공백을 정의합니다.

• width: 이미지의 너비를 설정합니다.

【관련 추천】

HTML의 기본 요소로 HTML을 처음부터 배울 수 있습니다

HTML 파일이란 무엇인가요? HTML 파일에 대한 사전 이해

위 내용은 HTML IMG 태그의 속성은 무엇입니까? IMG 태그 사용 방법 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!