HTML/XHTML_HTML/Xhtml_Web 페이지 제작 시 img 이미지 태그의 기본 사용법에 대한 자세한 설명

이미지 태그는 웹 페이지에 이미지를 표시하는 데 사용됩니다.
HTML/XHTML 이미지 태그
XHTML에서는 태그를 사용하여 표시할 이미지를 정의합니다. 는 페어링되지 않은 태그입니다.

기본 구문:

XML/HTML 코드클립보드에 콘텐츠 복사

1. <img src="url" />

태그는 src 속성을 통해 이미지 소스를 결정하며, URL은 상대 또는 절대 이미지 주소입니다.

이미지 태그 속성:
src: 이미지 소스, 필수. 표시된 이미지의 소스 주소를 상대 주소 또는 절대 주소로 지정합니다.
alt: 대체 텍스트, 생략 가능. 이미지를 표시할 수 없거나 브라우저가 이미지를 차단할 때 표시되는 텍스트를 바꾸는 데 사용됩니다.
제목: 이미지 프롬프트 텍스트, 생략 가능. 사진 위에 마우스를 올리면 관련 텍스트가 표시됩니다.
너비: 이미지 표시 너비, 생략 가능. 단위는 픽셀입니다.
높이: 이미지 표시 높이, 생략 가능. 단위는 픽셀입니다.

텍스트 대체 속성(alt)
이미지 태그의 텍스트 대체 속성 alt 필수 속성은 아니지만 매우 중요한 속성입니다. 어떤 이유로 브라우저가 이미지를 읽지 못하는 경우 이 대체 텍스트가 표시되어 원본 이미지를 대체하여 손실된 관련 이미지 정보를 제공합니다. 또한 이 속성은 텍스트 전용 브라우저를 사용하는 사용자가 페이지의 콘텐츠를 이해하는 데 도움이 됩니다.
따라서 각 이미지에 의미 있는 대체 텍스트 대체 속성을 추가하는 것이 좋습니다.

태그 사용 연습
e:html 폴더 아래에 이미지 폴더를 생성하여 이미지 파일을 저장합니다. 아래 사진을 마우스 오른쪽 버튼으로 클릭하고 "다른 이름으로 이미지 저장"을 선택하여 나중에 사용할 수 있도록 사진을 이미지 폴더에 저장하세요.

작은 XHTML 예제 1.html을 편집하고 id="main-content"를 사용하여 div 태그를 다음과 같이 변경합니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. <h3>글 제목h3 >
2. <p>기사 상세 내용 p>
3. <p><img src="images/flower_1.jpg" alt= "꽃" />p>

이렇게 하면 웹페이지에 이미지가 표시됩니다.

이미지 표시 크기 지정
태그에 너비 또는 높이 속성을 추가하여 이미지 표시 크기를 수동으로 지정할 수 있습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. <img src="images/flower_1.jpg " alt="꽃" 너비= "350" 높이="270" />

팁
일반적인 상황에서는 이미지 크기 속성이 무시되고 원본 이미지 크기가 기본적으로 표시되거나 브라우저가 크기 표시를 조정합니다. 부적절한 이미지 표시 크기를 지정하면 이미지가 왜곡되어 나타날 수 있습니다.
이미지를 로드하는 데 일정 시간이 걸리므로 좋은 사용자 액세스 경험을 위해서는 이미지 품질을 보장하면서 이미지 크기를 줄이는 것이 좋습니다.

확장 읽기
픽셀: 픽셀은 컴퓨터가 표시할 수 있는 가장 작은 점이라고 생생하게 생각할 수 있습니다. 예를 들어 우리가 흔히 말하는 화면 해상도는 1024*768입니다. 화면에는 가로로 1024(픽셀) 개의 도트가 있고 세로로 768(픽셀) 개의 도트가 있습니다. 단위로 사용시 일반적으로 기본적으로 pix로 표기됩니다.