HTML 이미지 태그
- WBOY원래의
- 2024-09-04 16:20:161345검색
HTML은 웹 페이지의 기능을 설명하기 위해 태그를 사용하는 웹 기반 애플리케이션을 구현하기 위해 다양한 형식의 프로그래밍 언어를 허용하는 일반 텍스트 문서입니다. 이러한 필수 태그 중 하나는 개발자가 웹 페이지에 해당 이미지를 표시하기 위한 코드에 이미지 파일을 통합할 수 있게 해주는 이미지 태그입니다. 이 구문은 입니다. 여기서 'image'는 태그 이름이고 'src='에는 필요한 이미지의 URL이 할당되어 있어야 합니다. 이번 주제에서는 HTML 이미지 태그에 대해 알아보겠습니다.
웹페이지에 이미지 추가
HTML 문서의 태그; 구문은 다음과 같습니다.
<img src= enter the IMG URL here >
여기서 IMG는 태그가 문서에 IMG를 추가하는 것임을 브라우저에 알리고 "src="는 이미지를 다운로드할 위치를 지정합니다.
이미지가 포함된 페이지 예시
코드:
<!DOCTYPE html> <html> <head> <title> Example HTML IMG Tag </title> </head> <body> <img src = " https://cdn.educba.com/academy/wp-content/uploads/2019/02/Software-Dev.jpg" alt = " Software development icon " height = " 150 " width = "140" /> </body> </html>
출력:
이러한 HTML 페이지에 대한 흥미로운 사실 중 하나는 IMG 태그를 사용할 때 이미지가 해당 웹페이지에 삽입되지 않는다는 것입니다. 대신, 다운로드 후 이미지를 넣을 보관 공간을 만듭니다.
브라우저 지원 및 속성 호환성
예상할 수 있듯이 모든 최신 브라우저는 이미지와 IMG 태그 사용을 지원합니다. 때로는 이미지가 반응형으로 설정되지 않은 경우 모바일 브라우저가 화면에 맞게 이미지 크기를 조정합니다.
HTML 4.01 및 최신 HTML5와의 속성 호환성과 관련하여 HTML5에서는 지원되지 않는 정렬, 테두리, hspace 및 공백을 제외하고 대부분의 태그가 작동합니다.
링크 이미지:
가끔 이미지가 다른 페이지에 대한 링크로 작동하기를 원할 수도 있습니다. 안에 IMG 태그를 추가하면 됩니다. 태그.
이미지를 웹페이지 배경으로 설정
페이지의 Body 요소에서 background-image CSS 속성을 사용하면 이미지를 웹페이지의 배경 그림으로 지정할 수 있습니다.
<body style="background-image:url(‘car.jpg');"> <h1>Background Image </h1> </body>
브라우저에서 이미지가 떠다니도록 설정
CSS 속성 'float'를 사용하면 이미지가 브라우저 창의 어느 위치에나 떠다니도록 설정할 수 있습니다. 이해를 돕기 위해 예를 들어보겠습니다.
<p> <img src="car.png" alt="Ferrari Car " style="float: right; width:40px; height: 40px;">
여기서는 자동차 이미지가 텍스트 오른쪽에 떠있습니다.
<p><img src=" car.png " alt=" Ferrari Car " style="float: left; width: 40px; height: 40px;">
여기서 자동차의 이미지가 텍스트 왼쪽에 떠 있게 됩니다.
이미지 태그 속성
이미지 태그의 속성은 다음과 같습니다.
1) 정렬
가능한 값: 위쪽, 아래쪽, 중간, 왼쪽 또는 오른쪽.
alight 속성은 웹페이지에서 그림의 정렬을 지정하는 데 사용됩니다.
2) 알트
값 유형: 텍스트
Alt는 웹페이지 사진의 대체 텍스트를 지정하는 데 사용됩니다. IMG를 표시할 수 없는 경우 브라우저는 이 텍스트를 사용자에게 표시합니다. Google 및 Bing과 같은 검색 엔진은 이 대체 텍스트를 사용하여 이미지 검색에 결과를 표시합니다.
3) 테두리
값 유형:픽셀
사진 주위에 사용자가 정의한 두께의 테두리를 만드는 데 사용됩니다. HTML5에서는 작동하지 않습니다.
4) 교차 출처
값 유형: 익명 사용 자격 증명
이 속성은 원본이 다른 사진을 처리하는 방법을 지정하려고 할 때 사용됩니다. 자바스크립트 웹앱의 캔버스 요소를 사용하는 경우에 주로 사용됩니다.
5) 키
값 유형: 백분율 또는 픽셀
HTML 웹페이지에서 이미지의 높이를 나타내는 데 사용됩니다.
6) hspace
값 유형:픽셀
HTML5에서는 지원되지 않는 hspace 속성은 삽입된 이미지의 왼쪽과 오른쪽에 추가할 공백의 양을 픽셀 단위로 지정하는 데 사용됩니다.
7) ismap
값 유형:페이지 URL
ismap은 해당 이미지를 서버 측 이미지 맵으로 정의하는 데 사용되었습니다. 사용자가 이미지 내부를 클릭(또는 탭)하면 브라우저는 클릭(또는 탭) 좌표를 웹 서버에 URL로 보냅니다.
8) 긴 설명
값 유형: URL
Longdesc는 URL을 사용하여 이미지에 대한 자세한 설명을 제공합니다. 속성의 URL은 이미지 설명으로 사용됩니다.
9) 소스
값 유형: URL
src는 소스를 의미합니다. 브라우저가 이미지를 검색할 주소를 지정하는 데 사용됩니다. 이 URL은 동일한 서버의 디렉터리 내부 이미지에 적용될 수 있습니다. 또한 다른 도메인 이름을 사용하여 타사 서버에 이미지를 저장할 수도 있습니다.
10) 맵 사용
값 유형: #mapname
usemap 속성은 클라이언트측 이미지 맵의 이미지를 정의합니다. usemap은 항상 지도 및 영역 HTML 태그와 함께 사용됩니다.
11) vspace
값 유형:픽셀
HTML5에서는 지원되지 않는 Vspace 속성은 웹페이지 이미지 상단과 하단의 공백으로 사용되는 픽셀 수를 설정하는 데 사용됩니다.
12) 너비
값 유형:픽셀
이름에서 알 수 있듯이 width 속성은 HTML 웹페이지 내 그림의 너비를 지정하는 데 사용됩니다.
결론 – HTML 이미지 태그
이제 HTML 페이지에 이미지를 추가하는 방법과 속성을 설정하는 방법을 살펴보았으므로 웹 프로젝트에서 멋진 웹페이지를 만들 수 있습니다.
이미지는 웹페이지에 시각적인 효과를 더하는 것 외에도 검색 엔진 최적화에 도움이 되기 때문에 매우 중요합니다. 이미지에 적절한 대체 태그와 설명을 추가하면 검색 엔진이 웹 페이지의 콘텐츠를 더 잘 이해하고 많은 경우 웹 페이지 순위를 높이는 데 도움이 됩니다.
위 내용은 HTML 이미지 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!