img 태그의 선택적 속성은 다음과 같습니다. HTML에 그림, 이미지를 삽입하기 위한 HTML 태그

꼬리표 IMG그래픽 형식으로 웹 페이지에 이미지를 표시하도록 설계되었습니다. GIF 형식, JPEG 또는 PNG. 이 태그에는 이미지 파일의 주소를 지정하는 단일 필수 매개변수인 src 가 있습니다. 필요한 경우 A 컨테이너에 IMG 태그를 배치하여 도면을 다른 파일에 대한 링크로 만들 수 있습니다. 동시에 이미지 주위에 테두리가 표시되며, IMG 태그에 border=0 매개변수를 추가하여 제거할 수 있습니다.

사진은 링크 역할을 하는 핫스팟을 포함하는 이미지 맵으로 사용될 수도 있습니다. 그런 지도 모습일반 이미지와 다르지 않지만 동시에 다양한 모양의 보이지 않는 영역으로 나눌 수 있으며, 각 영역은 링크 역할을 합니다.

통사론

닫는 태그
필요하지 않습니다.

옵션
align - 이미지가 가장자리를 따라 정렬되는 방식과 텍스트가 둘러싸이는 방식을 결정합니다.
alt - 이미지의 대체 텍스트입니다.
border - 이미지 주변 프레임의 두께입니다.
높이 - 이미지 높이.
hspace - 이미지에서 주변 콘텐츠까지의 수평 공간입니다.
ismap - 이미지가 서버측 이미지 맵임을 브라우저에 알려줍니다.
lowsrc - 예비 표시를 위한 저해상도 그래픽 파일의 경로입니다.
src - 그래픽 파일의 경로입니다.
vspace - 이미지에서 주변 콘텐츠까지의 수직 공간입니다.
너비 - 이미지 너비.
usemap - 클라이언트 이미지 맵의 좌표가 포함된 MAP 태그에 대한 링크입니다.

예 1: IMG 태그 사용

Lorem ipsum dolor sit amet...

IMG 태그 매개변수에 대한 설명

정렬 매개변수

설명
이미지의 경우 웹 페이지의 텍스트나 다른 이미지를 기준으로 위치를 지정할 수 있습니다. 이미지 정렬 방식은 IMG 태그의 정렬 매개변수에 의해 지정됩니다.

통사론

인수
표 1에는 align 매개변수의 가능한 값과 이를 사용한 결과가 나열되어 있습니다.

가장 많이 사용되는 옵션은 left 및 right 이며 이미지 주위에 텍스트 배치를 만듭니다. 텍스트가 이미지에 꼭 맞지 않게 하려면 텍스트까지의 거리를 픽셀 단위로 지정하는 hspace 및 vspace 매개변수를 IMG 태그에 추가하는 것이 좋습니다.

align 매개변수의 모든 값은 브라우저에서 지원되지만 HTML 4 사양에는 absbottom , absmiddle ,baseline 및 texttop 인수가 설명되어 있지 않습니다.

기본값
맨 아래

예 2: 그림 정렬

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

ALT 매개변수

설명
alt 매개변수는 이미지에 대한 대체 텍스트를 설정합니다. 이 텍스트를 사용하면 다음을 얻을 수 있습니다. 텍스트 정보브라우저에서 이미지 로딩이 비활성화된 경우 도면에 대한 정보입니다. 브라우저가 이미지에 대한 정보를 받은 후에 이미지가 로드되기 때문에 이미지의 대체 텍스트가 더 일찍 나타납니다. 그리고 로드되면 텍스트가 이미지로 대체됩니다.

또한 브라우저는 이미지 위에 마우스를 올려 놓으면 도구 설명으로 대체 텍스트를 표시합니다.

통사론

인수
적합한 텍스트 문자열. 큰따옴표나 작은따옴표로 묶어야 합니다.

기본값
아니요.

예 3: 대체 텍스트 추가

alt="메인 페이지로 돌아가기" !}>

테두리 매개변수

설명
웹 페이지에 배치된 이미지는 다양한 너비의 프레임에 배치될 수 있습니다. 이는 IMG 태그의 테두리 매개변수를 사용하여 수행됩니다. 기본적으로 이미지가 링크가 아닌 이상 이미지 주위에 테두리가 없습니다. 이 경우 테두리 색상은 BODY 태그의 스타일 또는 텍스트 매개변수를 사용하여 지정된 텍스트 색상과 일치합니다.

통사론

인수

기본값
0

예 3. 사진 주변의 프레임

녹색 프레임 2픽셀 두께

HEIGHT 및 WIDTH 매개변수

설명
HTML을 사용하여 이미지 크기를 조정하기 위해 너비 및 높이 매개변수가 제공됩니다. 픽셀 또는 백분율로 값을 사용할 수 있습니다. 백분율 항목이 설정된 경우 이미지 크기는 IMG 태그가 있는 컨테이너인 상위 요소를 기준으로 계산됩니다. 상위 컨테이너가 없으면 브라우저 창이 그 역할을 합니다. 즉, width=100%는 이미지가 웹 페이지의 전체 너비에 걸쳐 늘어남을 의미합니다. 너비 또는 높이 매개변수를 하나만 추가하면 이미지의 비율과 종횡비가 유지됩니다. 브라우저는 이미지가 완전히 로드되어 원래 높이와 너비를 결정할 때까지 기다립니다.

웹페이지에 있는 모든 이미지의 크기를 설정하세요. 이렇게 하면 브라우저가 이미지를 받은 후 각 이미지의 크기를 계산할 필요가 없기 때문에 페이지 로드 속도가 다소 빨라집니다. 이 명령문은 테이블 내부에 배치된 이미지에 특히 중요합니다.

이미지의 너비와 높이는 더 작게 또는 크게 변경할 수 있습니다. 그러나 파일 크기는 변경되지 않으므로 사진 로딩 속도에는 어떤 영향도 미치지 않습니다. 따라서 주의해서 축소하세요. 이는 왜 이렇게 작은 그림을 로드하는 데 그렇게 오랜 시간이 걸리는지에 대해 독자들 사이에서 혼란을 야기할 수 있습니다. 그러나 크기를 늘리면 반대 효과가 발생합니다. 즉, 이미지 크기는 크지만 동일한 크기의 이미지에 비해 파일이 더 빨리 로드됩니다. 그러나 그림의 품질이 저하됩니다.

통사론

인수
픽셀 또는 백분율 단위의 양의 정수입니다.

기본값
이미지의 원래 너비 또는 높이입니다.

예 4: 이미지 크기

HSPACE 및 VSPACE 매개변수

설명
모든 이미지에 대해 hspace 및 vspace 매개변수를 사용하여 보이지 않는 수평 및 수직 여백을 설정할 수 있습니다. 텍스트가 그림 주위를 둘러쌀 때 특히 그렇습니다. 이 경우 텍스트가 이미지에 빽빽하게 "들어가지" 않도록 주위에 빈 공간을 추가해야 합니다.

통사론

인수
픽셀 단위의 양의 정수입니다.

기본값
0

예 5. 그림의 들여쓰기

ISMAP 매개변수

설명
ismap 매개변수는 브라우저에 이미지가 서버측 이미지 맵임을 알려줍니다. 이미지 맵을 사용하면 동일한 이미지의 다른 영역에 대한 링크를 연결할 수 있습니다. 두 가지로 구현 다양한 옵션- 서버와 클라이언트. 서버 옵션을 사용하는 경우 브라우저는 선택한 링크의 주소를 얻기 위해 서버에 요청을 보내고 필요한 정보가 포함된 응답을 기다립니다. 이 접근 방식은 결과를 기다리는 데 추가 시간이 필요하며 별도의 파일각 이미지 카드마다.

서버로의 데이터 전송은 다음과 같이 이루어집니다. CGI 프로그램의 주소를 href 매개변수의 값으로 지정해야 하는 컨테이너 A에 IMG 태그를 배치해야 합니다. 프로그램은 이미지의 왼쪽 상단에서 계산된 수신된 마우스 클릭 좌표를 분석하고 필요한 웹 페이지를 반환합니다.

통사론

인수
아니요.

기본값
기본적으로 이 옵션은 비활성화되어 있습니다.

예시 6. 이미지 맵으로 그리기

사용자가 이미지의 마우스 좌표를 100, 50으로 설정한 경우 링크를 클릭하면 파일이 http://www.htmlbook.ru/cgi-bin/map.cgi?100,50에서 열립니다. 마지막 숫자는 GET 메서드를 사용하여 CGI 프로그램으로 전송되고 서버에서 해석됩니다.

LOWSRC 매개변수

설명
lowsrc 매개변수는 최종 이미지가 완전히 로드되기 전에 낮은 품질의 이미지를 표시하는 데 사용됩니다. 이 접근 방식은 사용자 대기 시간을 줄이기 위한 것입니다. 처음에는 초기 파일 크기가 작기 때문에 빠르게 로드되는 저해상도 이미지나 흑백 그림이 표시됩니다. 사용자가 보는 동안 이미지가 로드됩니다. 양질, 점차적으로 원래 것을 대체합니다. 이러한 이미지의 크기는 동일해야 합니다.

통사론

인수

기본값
아니요.

예 7. 낮은 품질의 도면으로 가는 경로

SRC 매개변수

설명
주소 그래픽 파일, 웹페이지에 표시됩니다. 가장 널리 사용되는 파일은 GIF 및 JPEG 형식입니다.

통사론

인수
값은 파일의 전체 또는 상대 경로입니다.

기본값
아니요.

예 8. 그래픽 파일 경로

설명

꼬리표 웹 페이지에 GIF, JPEG 또는 PNG 그래픽 형식으로 이미지를 표시하도록 설계되었습니다. 이미지 파일의 주소는 src 속성을 통해 지정됩니다. 필요한 경우 태그를 배치하여 도면을 다른 파일에 대한 링크로 만들 수 있습니다. 컨테이너에 . .

이미 알고 있는 속성을 사용하여 맞추다 HTML 페이지의 다른 요소를 기준으로 그림의 정렬을 제어할 수 있습니다. 속성에서 맞추다여러 가지 의미가 있지만 우리가 가장 지금은나는 두 가지에 관심이 있습니다:

• 왼쪽- 이미지는 페이지 왼쪽 가장자리에 위치하며 텍스트는 오른쪽 이미지 주위로 흐릅니다.


• 오른쪽- 이미지는 페이지 오른쪽 가장자리에 위치하며 텍스트와 기타 요소는 왼쪽 이미지 주위로 흐릅니다.

예를 들어 HTML 코드

브라우저는 다음과 같이 표시됩니다

그리고 이 HTML 코드는 다음과 같습니다.

다음과 같이 보일 것입니다 :

텍스트가 이미지 주변을 둘러싸는 것을 방지하려면 태그를 사용할 수 있습니다. BR(이전 섹션에서 우리에게 친숙합니다). 태그에서 BR속성이 있어요 분명한, 세 가지 값을 사용할 수 있습니다.

• 왼쪽- 왼쪽 정렬된 이미지 주위에 텍스트 줄바꿈을 중지합니다.


• 오른쪽- 오른쪽 정렬된 이미지 주변의 텍스트 줄바꿈을 중지합니다.


• 모두- 왼쪽과 오른쪽으로 정렬된 이미지 주위에 텍스트 줄 바꿈을 중지합니다.

그림 삽입:

설명 및 사용

꼬리표 HTML 문서에 이미지를 삽입합니다.

이미지는 기술적으로 페이지에 삽입되지 않습니다. 실제로 이미지는 HTML 페이지에 연결됩니다. 꼬리표 이미지에 대한 컨테이너를 만듭니다.

태그에서 두 가지 필수 속성: src 및 alt.

HTML과 XHTML의 차이점

HTML 태그에서 닫는 태그가 없습니다.

XHTML 태그에서 제대로 닫혀야 합니다.

img 요소의 "align", "border", "hspace" 및 "vspace" 속성은 더 이상 사용되지 않으며 XHTML 1.0 Strict에서는 지원되지 않습니다.

조언: alt 속성은 마우스 오버 시 텍스트가 아닌 이미지가 없을 때 대체 텍스트로 사용됩니다. 이미지 위로 마우스를 가져갈 때 텍스트를 표시하려면 title 속성을 사용하세요. 이와 같이: .

필수 속성

선택적 속성

표준 속성

이벤트 속성

요즘에는 거의 모든 웹사이트에서 HTML 페이지의 이미지를 사용하지 않고는 할 수 없습니다. 대중적인 통념에 따르면 "백 번 듣는 것보다 한 번 보는 것이 낫습니다." 이 글을 읽은 후에는 웹사이트 페이지에 이미지를 추가하는 데 사용되는 IMG 태그를 사용하는 방법을 배우게 됩니다. 우리는 HTML 5에 대한 예를 고려할 것이지만 이전 버전의 하이퍼텍스트 마크업 언어에서도 작동할 것입니다.

HTML 페이지에 그림을 삽입하는 방법

페이지에 그림을 삽입하려면 IMG HTML 태그를 사용하세요. 이미지의 경우 src(이미지가 있는 파일 경로) 및 alt(이미지가 로드되지 않은 경우 사용자에게 표시되는 대체 텍스트)라는 두 가지 속성을 지정해야 합니다. alt 속성은 비어 있을 수 있지만 반드시 존재해야 합니다. 제목 속성을 설정할 수도 있으며, 이미지 위로 마우스를 가져가면 이 속성에 지정된 텍스트가 표시됩니다.

이미지가 포함된 파일이 로드된 페이지와 동일한 폴더에 있는 경우 src 속성다음과 같이 파일 이름만 지정할 수 있습니다.

페이지가 http://www..html에 있고 이미지가 http://www..jpg인 경우 이미지 경로는 다음과 같이 지정됩니다.

페이지가 http://www..site/logo.jpg 폴더에 있는 경우 경로는 다음과 같습니다.

사진이 http://www.site/images/ 폴더에 있는 경우 이미지가 삽입된 동일한 사이트의 페이지가 어느 폴더에 있는지에 관계없이 파일 경로를 다음과 같이 지정할 수 있습니다.

또는 이미지 파일이 다른 사이트에 있는 경우 이미지 파일의 전체 경로를 지정할 수 있습니다.

이미지의 너비와 높이

이전 버전의 HTML에서는 높이와 너비가 width 및 height 속성을 사용하여 설정되었지만 이제 이미지 표시에 영향을 미치는 모든 항목은 다음을 사용하여 설정됩니다. CSS를 사용하여스타일 속성에서. 대부분의 경우 너비와 높이는 픽셀 단위로 지정됩니다.

너비와 높이를 지정하지 않으면 이미지가 원래 크기로 표시됩니다. 값이 원래 크기보다 작으면 브라우저는 이미지를 축소된 형태로 표시하고, 값이 더 크면 브라우저는 이미지를 지정된 크기로 늘립니다. 이 경우이미지가 덜 선명해집니다. 실수로 그림이 왜곡되는 것을 방지하기 위해 예를 들어 높이만 설정하면 지정된 높이 값에 비례하여 너비가 줄어들거나 늘어납니다.

또한 너비와 높이는 브라우저 창이나 이미지가 있는 블록 요소의 너비나 높이에 대한 백분율로 지정할 수 있습니다.

텍스트 및 들여쓰기로 이미지 줄바꿈

기본적으로 텍스트는 이미지 아래에 표시됩니다. 텍스트가 이미지 주위를 둘러싸도록 하기 위해 align 속성을 대체하는 float CSS 속성이 사용됩니다. 이미지가 텍스트 왼쪽에 있고 텍스트가 그 주위 오른쪽 및 아래에 흐르도록 하려면 왼쪽 값을 설정합니다. CSS 속성 float이며, 그림이 오른쪽에 있으면 오른쪽 값이 표시됩니다.

이미지의 위쪽, 오른쪽, 아래쪽 및 왼쪽에 들여쓰기를 설정할 수도 있습니다.

같은 내용을 줄여서 표현하면 다음과 같습니다.

또는 레거시 vspace 및 hspace 속성 대신 두 개의 margin 속성 값을 사용하여 수직 및 수평 여백을 설정할 수 있습니다. 위쪽과 아래쪽에 10픽셀, 왼쪽과 오른쪽에 8픽셀의 여백이 필요하다고 가정해 보겠습니다.

사진을 페이지 링크로 만드는 방법

또는 액자의 색상, 유형, 두께를 직접 설정할 수도 있습니다.

웹용 이미지 형식

일반적으로 웹사이트에서는 다양한 이미지 형식을 사용합니다. 사진에 사용됨 JPEG 형식, 함께 사용할 이미지가 필요한 경우 투명한 배경이면 PNG 형식이 사용됩니다. 이전에는 PNG 형식 대신 GIF가 사용되었지만 이미 구식입니다. 유일한 장점은 애니메이션 이미지를 만드는 기능입니다. 일반적으로 PNG와 GIF는 디자인 요소로만 사용되며 이미지에 투명한 영역이 있거나 반투명해야 하는 경우에만 사용됩니다. 이러한 형식의 파일은 크기가 매우 크기 때문에 일반 사진에는 사용하지 않는 것이 좋습니다. 이에 대한 JPEG 형식이 있습니다. 사이트에 이미지를 업로드하기 전에 사용자가 더 빠르게 로드할 수 있도록 너비와 높이를 사이트에 표시되는 크기로 줄이는 것이 좋습니다.

기사의 복사를 금지합니다.