사진 및 객체에 HTML IMG 태그 사용
HTML IMG 태그는 웹 페이지 내에서 그림 및 기타 정적 그래픽 객체 삽입을 제어합니다. 이 공통 태그는 매력적이고 이미지 중심의 웹 사이트를 디자인 할 수있는 능력을 풍부하게하는 몇 가지 필수 및 선택 속성을 지원합니다.
완전히 구성된 HTML IMG 태그의 예는 다음과 같습니다.
필수 IMG 태그 속성
SRC. 웹 페이지에 표시 할 이미지를 얻는 데 필요한 유일한 속성은 SRC 속성입니다. 이 속성은 표시 할 이미지 파일의 이름과 위치를 식별합니다.
ALT. 유효한 XHTML 및 HTML4를 작성하려면 ALT 속성도 필요합니다. 이 속성은 비 시각적 브라우저에 이미지를 설명하는 텍스트를 제공하는 데 사용됩니다. 브라우저는 다른 방법으로 대체 텍스트를 표시합니다. 일부는 이미지 위에 마우스를 올리면 팝업으로 표시되고, 다른 이미지는 마우스 오른쪽 버튼으로 클릭 할 때 속성에 표시되며, 일부는 표시되지 않습니다.
대체 텍스트 를 사용하여 웹 페이지의 텍스트와 관련이 없거나 중요하지 않은 이미지에 대한 추가 세부 사항을 제공하십시오. 그러나 화면 판독기 및 기타 텍스트 전용 브라우저에서는 텍스트가 페이지의 나머지 텍스트와 함께 인라인으로 읽혀집니다. 혼동을 피하기 위해 "로고"대신 "웹 디자인 및 HTML 정보"와 같은 설명 텍스트를 사용하십시오.
HTML5에서 캡션을 사용하여 더 많은 설명을 추가 할 수 있으므로 ALT 특성이 항상 필요한 것은 아닙니다. ARIA-DESCRIBEDBY 속성을 사용하여 전체 설명을 포함하는 ID를 나타낼 수도 있습니다.
웹 페이지 또는 아이콘 상단의 그래픽과 같이 이미지가 완전히 장식적인 경우 대체 텍스트도 필요하지 않습니다. 그러나 확실하지 않은 경우 대체 텍스트를 포함시켜야합니다.
권장되는 IMG 속성
너비 와 높이 . WIDTH 및 HEIGHT 속성을 항상 사용하는 습관을 갖춰야합니다. 그리고 항상 실제 크기를 사용하고 브라우저로 이미지의 크기를 조정하지 않아야합니다.
브라우저가 이미지 디자인을위한 공간을 할당 한 다음 전체 이미지 다운로드를 기다리지 않고 나머지 컨텐트를 계속 다운로드 할 수 있기 때문에 이러한 속성은 페이지 렌더링 속도를 높입니다.
기타 유용한 IMG 속성
제목 . 속성은 HTML 요소에 적용 할 수있는 전역 속성입니다. 또한 TITLE 속성을 사용하면 이미지에 대한 추가 정보를 추가 할 수 있습니다.
대부분의 브라우저는 TITLE 속성을 지원하지만 여러 가지 방법으로 수행합니다. 일부는 텍스트를 팝업으로 표시하고 다른 사용자는 이미지를 마우스 오른쪽 버튼으로 클릭하면 정보 화면에 표시합니다. TITLE 속성을 사용하여 이미지에 대한 추가 정보를 쓸 수 있지만이 정보가 숨겨져 있거나 표시되지 않도록하십시오. 검색 엔진에서 키워드를 숨기려면이 방법을 사용하지 않아야합니다. 이 관행은 이제 대부분의 검색 엔진에 의해 불이익을 당합니다.
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 속성을 사용하는 경우에도 큰 이미지는 페이지 속도를 크게 낮 춥니 다.