HTML IMG 태그는 웹 페이지 내에서 그림 및 기타 정적 그래픽 객체 삽입을 제어합니다. 이 공통 태그는 매력적이고 이미지 중심의 웹 사이트를 디자인 할 수있는 능력을 풍부하게하는 몇 가지 필수 및 선택 속성을 지원합니다.
완전히 구성된 HTML IMG 태그의 예는 다음과 같습니다.
필수 IMG 태그 속성
SRC.웹 페이지에 표시 할 이미지를 얻는 데 필요한 유일한 속성은 SRC 속성입니다. 이 속성은 표시 할 이미지 파일의 이름과 위치를 식별합니다.
ALT.유효한 XHTML 및 HTML4를 작성하려면 ALT 속성도 필요합니다. 이 속성은 비 시각적 브라우저에 이미지를 설명하는 텍스트를 제공하는 데 사용됩니다. 브라우저는 다른 방법으로 대체 텍스트를 표시합니다. 일부는 이미지 위에 마우스를 올리면 팝업으로 표시되고, 다른 이미지는 마우스 오른쪽 버튼으로 클릭 할 때 속성에 표시되며, 일부는 표시되지 않습니다.
대체 텍스트를 사용하여 웹 페이지의 텍스트와 관련이 없거나 중요하지 않은 이미지에 대한 추가 세부 사항을 제공하십시오. 그러나 화면 판독기 및 기타 텍스트 전용 브라우저에서는 텍스트가 페이지의 나머지 텍스트와 함께 인라인으로 읽혀집니다. 혼동을 피하기 위해 "로고"대신 "웹 디자인 및 HTML 정보"와 같은 설명 텍스트를 사용하십시오.
HTML5에서 ALT 속성은 캡션을 사용하여 더 많은 설명을 추가 할 수 있기 때문에 항상 필수는 아닙니다. 속성을 사용할 수도 있습니다. 아리아 - 서술 전체 설명이 포함 된 ID를 나타냅니다.
웹 페이지 또는 아이콘 상단의 그래픽과 같이 이미지가 완전히 장식적인 경우 대체 텍스트도 필요하지 않습니다. 그러나 확실하지 않은 경우 대체 텍스트를 포함시켜야합니다.
권장되는 IMG 속성
폭 과 신장. 항상 사용하는 습관을 갖춰야합니다. 폭 과 신장 속성. 그리고 항상 실제 크기를 사용하고 브라우저로 이미지의 크기를 조정하지 않아야합니다.
브라우저가 이미지 디자인을위한 공간을 할당 한 다음 전체 이미지 다운로드를 기다리지 않고 나머지 컨텐트를 계속 다운로드 할 수 있기 때문에 이러한 속성은 페이지 렌더링 속도를 높입니다.
기타 유용한 IMG 속성
표제. 속성은 HTML 요소에 적용 할 수있는 전역 속성입니다. 또한, 표제 속성을 사용하면 이미지에 대한 추가 정보를 추가 할 수 있습니다.
대부분의 브라우저는 표제 속성을 사용하지만 다른 방식으로 사용합니다. 일부는 텍스트를 팝업으로 표시하고 다른 사용자는 이미지를 마우스 오른쪽 버튼으로 클릭하면 정보 화면에 표시합니다. 당신은 표제 속성은 이미지에 대한 추가 정보를 작성하지만이 정보가 숨겨져있는 것으로 계산하지 않습니다. 또는 명백한. 검색 엔진에서 키워드를 숨기려면이 방법을 사용하지 않아야합니다. 이 관행은 이제 대부분의 검색 엔진에 의해 불이익을 당합니다.
USEMAP 과 ISMAP. 이 두 속성은 클라이언트 측 () 및 서버 측 (ISMAP) 이미지 맵을 이미지로 설정합니다.
LONGDESC. 이 속성은 이미지의 더 긴 설명에 대한 URL을 지원합니다. 이 기능을 사용하면 이미지에 더 쉽게 액세스 할 수 있습니다.
더 이상 사용되지 않으며 더 이상 사용되지 않는 IMG 속성
여러 속성이 HTML5에서 더 이상 사용되지 않거나 HTML4에서 사용되지 않습니다. 최상의 HTML을 위해서는 이러한 속성을 사용하는 대신 다른 솔루션을 찾아야합니다.
경계. 이 속성은 이미지 주변의 모든 경계선의 너비를 픽셀 단위로 정의합니다. HTML4에서는 CSS가 사용되지 않으며 HTML5에서는 더 이상 사용되지 않습니다.
정렬. 이 속성을 사용하면 텍스트 안에 이미지를 배치하고 주위에 텍스트가 흐르게 할 수 있습니다. 이미지를 오른쪽 또는 왼쪽으로 정렬 할 수 있습니다. HTML4에서는 float CSS 속성을 사용하지 않으므로 HTML5에서는 더 이상 사용되지 않습니다.
HSPACE 과 VSPACE. 그만큼 HSPACE 과 VSPACE 속성은 가로로 공백을 추가합니다 (HSPACE) 및 수직 (VSPACE). 공백이 그래픽의 양쪽 (상단 및 하단 또는 왼쪽 및 오른쪽)에 추가되므로 한면에만 공간이 필요한 경우 CSS를 사용해야합니다. 이러한 속성은 여백 CSS 속성을 위해 HTML4에서 더 이상 사용되지 않으며 HTML5에서는 더 이상 사용되지 않습니다.
LOWSRC. 그만큼 LOWSRC 속성은 이미지 소스가 너무 커서 다운로드 속도가 매우 느릴 때 대체 이미지를 제공합니다. 예를 들어, 웹 페이지에 표시하려는 이미지의 크기가 500KB이지만 500KB의 이미지를 다운로드하는 데 시간이 오래 걸릴 수 있습니다. 따라서 이미지의 사본을 훨씬 작게 만들 수도 있습니다 (흑백 또는 극도로 최적화 된 이미지). LOWSRC 속성. 작은 이미지가 먼저 다운로드되어 표시되고 큰 이미지가 나타나면 낮은 소스 이미지가 대체됩니다.
그만큼 LOWSRC 속성이 Netscape Navigator 2.0에 추가되었습니다. IMG 꼬리표. DOM 레벨 1의 일부 였지만 DOM 레벨 2에서 제거되었습니다. 많은 사이트가 모든 최신 브라우저에서 지원한다고 주장하지만 브라우저 지원은이 속성에 대해 개략적입니다. HTML4에서는 더 이상 사용되지 않으며 HTML5에서는 더 이상 사용되지 않으므로 어느 표준의 공식 부분이 아니기 때문에 HTML5에서는 더 이상 사용되지 않습니다.
이 속성을 사용하지 말고 이미지를 최적화하여 빠르게로드하십시오. 페이지로드 속도는 좋은 웹 디자인의 중요한 부분이며 큰 이미지는 페이지를 너무 느리게 만듭니다. LOWSRC 속성.
