지금까지 이미지 정의는 다음과 같아야 합니다.
<img src="images/logo.png" alt="PSD-Tutorials.de" />
그러나 몇 가지 속성을 img 요소에 할당할 수 있고 할당해야 합니다. 먼저 alt가 있습니다. 어떤 이유로든 이미지를 로드할 수 없는 경우 여기에 정의된 텍스트가 브라우저에 표시됩니다.
안타깝게도 alt 속성과 관련하여 항상 오해가 있습니다. alt 속성은 실제로 이미지가 표시되지 않는 경우에만 사용됩니다. 그러나 일부 브라우저에서는 마우스 포인터로 이미지 위로 마우스를 가져가면 도구 설명 창에 alt 속성 값이 표시됩니다.
이 동작은 올바르지 않습니다. 대신 제목 속성이 이러한 툴팁에 사용됩니다. 해당 정의는 다음과 같습니다.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de의 로고" />
이 경우 title 값이 alt 값보다 우선합니다.
크기 사양
HTML의 많은 것들이 더 이상 속성을 사용하여 해결되지 않고 CSS를 통해 해결됩니다. 그러나 여기에는 크기 사양의 정의는 포함되지 않습니다. 높이와 너비는 여전히 width와 height 속성을 사용하여 정의됩니다. 다음은 또 다른 예시입니다:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de의 로고" width="200" height="150" />
너비 또는 높이에 대한 측정 단위를 지정하지 않으면 브라우저에서 숫자 값이 픽셀 값으로 해석됩니다. 앞의 예에서 이미지는 너비 200픽셀, 높이 150픽셀입니다. 백분율도 가능합니다.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de의 로고" width="20%" height="15%" />
백분율은 사용 가능한 광고 공간을 나타냅니다. 크기를 지정하지 않으면 브라우저는 그래픽을 원래 크기로 표시합니다.
이미지 및 텍스트 단락
본문 텍스트와 함께 이미지를 배치하는 경우 주의해야 합니다.
<p>이미지 옆에 텍스트가 표시됩니다. </p> <img src="logo.png" alt="" width="180" height="150" /> 이 텍스트는 이미지 옆에 표시됩니다.
img는 소위 인라인 요소입니다. 따라서 그래픽을 텍스트에 직접 배치할 수 있습니다. 그래픽이 줄 높이보다 높으면 브라우저는 줄 안에 텍스트를 정렬합니다. 기본적으로 텍스트는 그래픽 하단과 같은 높이로 정렬됩니다.
이전 HTML 버전에서는 정렬 속성을 사용하여 정렬에 영향을 줄 수 있습니다. 이 속성은 HTML5 표준에서 제거되었으므로 더 이상 사용하지 마세요. 대신 CSS에서 제공하는 옵션을 사용하세요. 예를 들어 이미지가 텍스트 주위로 흐르도록 할 수 있습니다.
긴 설명
HTML은 이미지에 대한 자세한 설명을 제공하는 옵션을 제공합니다. 이미지에 실제로 설명이 필요한 경우 항상 실용적입니다. 추가 정보를 다른 위치에 저장하고 참조할 수 있습니다.
추가 정보는 다른 위치에 저장할 수 있습니다.
<img src="image1.png" alt="다이어그램 1" title="다이어그램 1" longdesc="#diagram" />
여기서는 페이지 내에 ID 다이어그램이 있는 영역이 있다고 가정합니다.
가장 일반적인 변형은 아마도 정보가 외부 파일에 저장되는 변형일 것입니다.
<img src="image1.png" alt="diagram 1" longdesc="diagramm1.htm" />
그러나 아직 브라우저 지원이 부족합니다. 또한 이 속성은 브라우저 제조업체에게 복잡하지 않은 방식으로 구현할 수 있는 방법에 대한 의문을 제시하는 것 같습니다.
예를 들어 Firefox에서 이 속성은 정말 훌륭하고 자명하게 설명할 수 있는 솔루션이 아니기 때문입니다. 이미지에 longdesc 속성이 있는 경우 일반 사이트 방문자는 처음에 이를 인식하지 못합니다. 대신 마우스 오른쪽 버튼으로 이미지를 클릭해야 합니다.
그러면 컨텍스트 메뉴에 설명 표시 항목이 표시됩니다. 이 항목을 클릭하면 longdesc에 지정된 추가 정보가 표시됩니다. 내가 말했듯이 이것은 Firefox에서 작동하지만 확실히 우아하지는 않습니다.
Opera에도 비슷한 해결책이 있습니다. 이 브라우저에서 이미지를 마우스 오른쪽 버튼으로 클릭하면 긴 설명 항목이 표시됩니다.
그러면 지정된 추가 정보로 연결됩니다.
WC3는 또한 데이터 URL 형식으로 긴 설명을 지정할 것을 제안합니다.
<img src="logo.png" alt="W3C" longdesc="data:HTML;charset=utf-8;,%3C!DOCTYPE%20html%3E %3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20W3C%20Logo%3C/title%3E%3C/head%3E %3Cbody%3E%3Cp%3EA%20blue%20capital%20letter%20%22W%22%20with%20kerning%20so%20it%20 touches%20a%20blue%203%2C%20followed%20by%20a%20black%20shadow%20of%20a%20white%20 capital%20letter%20C%20all%20on%20a%20white%20background%3C/body%3E%3C/html%3E" />
이러한 데이터 URL에 대해 아직 경험이 없는 경우 http://de.wikipedia.org/wiki/Data-URL 에서 자세한 정보를 확인할 수 있습니다.
이미지 설명 정의하기
지금까지는 HTML에서 캡션과 이미지 그룹을 정의할 수 있는 옵션이 없었습니다. HTML5에서는 이 부분이 변경되었습니다. 그림과 그림 캡션이라는 두 가지 새로운 요소가 도입되었습니다.
예상할 수 있는 점은 그림은 그래픽과 함께 사용하기 위한 용도로만 사용되는 것이 아니라는 점입니다. 사실 이 요소는 문서를 보완하는 모든 요소에 사용할 수 있습니다. 예를 들어 이미지 외에도 다이어그램, 코드 예제 및 동영상이 될 수 있습니다.그림 외에도 그림 캡션도 있습니다. 특정 사용자 그룹이 읽을 수 없는 콘텐츠에 대체 설명을 추가하는 데 사용할 수 있습니다.
다음은 그림과 figcaption 두 요소의 사용 예시입니다:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>이것이 우리의 새 로고입니다.</figcaption> </figure>
브라우저에서 결과를 살펴보면 다음과 같은 결과가 나타납니다:
브라우저에서 두 요소를 처리하는 방법은 궁극적으로 브라우저에 달려 있습니다. 그러나 물론 CSS를 사용하여 다시 디스플레이에 영향을 줄 수 있습니다.그림 요소에는 이미지나 다른 요소를 얼마든지 삽입할 수 있습니다. 그러나 그림 요소에는 하나의 그림 캡션 요소만 포함할 수 있습니다. 다음은 다른 예시입니다:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <img src="logo_gross.jpg" width="400" height="250" alt="PSD-Tutorials.de" /> <figcaption>이것이 우리의 새로운 로고입니다.</figcaption> </figure>
이런 식으로 여러 이미지를 하나의 그림 요소에 담을 수도 있습니다.
HTML5에는 특히 웹사이트와 콘텐츠의 논리적 구조와 관련하여 수많은 혁신이 있습니다. 물론 이 시리즈의 과정에서 이에 대해서도 자세히 배우게 될 것입니다.
