아래 예제를 확인하여 작동 방식을 더 잘 이해하십시오: 대체 텍스트를 테스트하는 가장 쉬운 방법은 의도적으로 파일 이름을 잘못 입력하는 것입니다. 예를 들어 이미지 이름이 dinosooooor.jpg로 표기된 경우 브라우저는 이미지를 표시하지 않고 대체 텍스트를 대신 표시합니다. 그러나 이미지가 표시되지 않는 경우( 예: 사용자가 페이지로 이동한 상태이고 이미지가 아직 로드되지 않은 경우) 브라우저가 이미지에 표시할 공간을 남겨두는 것을 알 수 있습니다. ng 는 별도의 이미지 파일로 나누지 않고 이미지의 다양한 부분을 ng. 예를 들어, 세계 지도에는 각 국가가 해당 국가에 대한 추가 정보를 하이퍼링크로 연결할 수 있습니다. 더 많은 정보: HTML 태그, HTML 이미지, 무료 웹사이트 그래픽. 아래 예제를 확인하여 작동 방식을 시각적으로 확인할 수 있습니다: 높이 및 너비 값도 백분율일 수 있습니다. 백분율 값은 상위 HTML 요소(일반적으로 본문)를 기준으로 하며, 이는 전체 화면(1024×768)인 요소와 같은 상위 요소가 있는 경우 높이와 너비가 100%인 이미지가 전체 본문 요소(1024×768)를 차지한다는 것을 의미합니다. . 아래 예제에서는 이미지를 너비가 약 400픽셀, 높이가 200픽셀인 테이블 요소에 배치했습니다. 이것은 단락 1, 예 입니다.

이 단락은이 이미지 정렬이 어떻게 작동하는지 보여주는 좋은 예라고 생각합니다. 이미지는 모든 웹 디자이너의 주요 요소이므로 올바르게 사용하는 방법을 이해하는 것이 매우 중요합니다. 웹 사이트에 이미지를 배치하려면 이미지 파일이 웹 서버의 파일 트리(URL(통합 리소스 로케이터) 내에 있는 위치를 알아야 합니다. 보시다시피 이미지의 오른쪽 가장자리가 이제 디스플레이 상자의 오른쪽 가장자리에 정렬되었습니다. 표시 상자는 상위 요소이므로 정렬 특성에 대해 원하는 동작입니다. 이 예제를 한 단계 더 발전시켜 보면 단락

요소 안에 정렬된 이미지를 포함시켜 멋진 디자인을 만들 수 있습니다. 로컬 URL을 사용하려면 사진이 .html 파일과 동일한 웹 호스트에 있어야 합니다. SRC URL은 .html 파일의 위치와 그림 파일의 위치를 기반으로 하는 관계형 해석이므로 URL에는 C:와 같은 드라이브 문자를 포함할 수 없습니다. src=”C:wwwwebpics”와 같은 것이 작동하지 않습니다. 소스 속성(src)은 이미지 태그가 이미지를 표시하게 만드는 것입니다. 이미지 원본은 URL 값이며 이미지 파일의 디렉터리 위치를 가리키야 합니다. 첫 번째 HTML 이미지 예제에서 코드를 한 번 더 살펴보겠습니다.

이미지는 HTML 문서에서 하나에 사용됩니다: 페이지를 시각적으로 효과적으로 만들고 두 가지: 표시 정보. 이미지는 링크로도 사용할 수 있지만 링크에 대한 항목에서 설명합니다. 캡션에 대해 말하자면 이미지와 함께 사용할 캡션을 추가할 수 있는 여러 가지 방법이 있습니다. 예를 들어, 이 작업을 중지할 수 있는 것은 없습니다: 참고: 이미지는 기술적으로 HTML 페이지에 삽입되지 않고 이미지는 HTML 페이지에 연결됩니다. 태그는 참조된 이미지에 대한 보류 공간을 만듭니다. HTML 이미지 테두리, CSS 테두리 속성 : 더 많은 정보 : 실제로 어떻게 작동하는지 이해하는 간단한 예를 시도해 보자. CSS를 사용하여 이미지를 웹 페이지(및 JavaScript)에 포함할 수도 있지만 완전히 다른 이야기입니다. CSS 배경 이미지 속성 및 기타 배경-* 속성은 배경 이미지 배치를 제어하는 데 사용됩니다. 예를 들어 페이지의 모든 단락에 배경 이미지를 배치하려면 다음과 같은 작업을 수행할 수 있습니다.