HTML 이미지

JPG 이미지

GIF 이미지

PNG 이미지

HTML 이미지 구문

HTML에서 이미지가 정의하는 <img> 태그입니다.

<img> tag 단지 속성을 포함, 비어있는, 그리고 닫는 태그가 없습니다.

src 속성은 URL을 지정 (web address) 이미지를 :

alt 특성

alt 이미지를 표시 할 수없는 경우 속성은 이미지에 대한 대체 텍스트를 지정합니다.

alt 어떤 이유로, 사용자가 볼 수없는 경우에 속성은 이미지의 대체 정보를 제공 (때문에 느린 연결 상기의 오차 src 속성, 또는 사용자는 스크린 리더를 사용하는 경우).

브라우저가 이미지를 찾을 수없는 경우 대체 텍스트를 표시합니다 :

alt 속성이 필요합니다. 웹 페이지가없이 제대로 확인하지 않습니다.

HTML 화면 판독기

스크린 리더는 화면에 표시되는 내용을 읽을 수있는 소프트웨어 프로그램입니다.

화면 판독기는 시각 장애인 명, 시각 장애인 또는 장애인 학습에 유용합니다.

이미지 크기 - 너비 및 높이

당신이 사용할 수있는 style 이미지의 폭과 높이를 지정하는 속성.

값들은 픽셀 단위로 지정된다 (use px after the value) :

다른 방법으로는 사용할 수 있습니다 width 및 height 속성을. 여기서, 값은 기본적으로 픽셀 단위로 지정된다 :

너비와 높이 또는 스타일?

두 폭, 높이, 스타일 속성은 최신 HTML5 표준에 유효합니다.

우리는 당신이 사용하는 것이 좋습니다 style 속성을. 이 이미지의 원래 크기를 변경하는 스타일 시트를 방지 :

또 다른 폴더의 이미지

지정하지 않을 경우, 브라우저는 웹 페이지와 동일한 폴더에 이미지를 찾을 것으로 기대하고있다.

그러나 하위 폴더에 이미지를 저장하는 것이 일반적이다. 그런 다음에 폴더 이름이 포함되어야 src 속성을 :

다른 서버의 이미지

일부 웹 사이트는 이미지 서버에 자신의 이미지를 저장합니다.

사실, 당신은 세계 어느 웹 주소에서 이미지를 액세스 할 수 있습니다 :

애니메이션 이미지

지프 표준은 애니메이션 이미지를 수 있습니다 :

움직이는 이미지를 삽입하는 구문이 아닌 애니메이션 이미지 다르지 않다 있습니다.

링크로 이미지를 사용하여

링크로 이미지를 사용하려면 중첩 <img> 내부 태그 <a> 태그 :

이미지 부동

이미지 플로트 수 있도록하기 위해 CSS 플로트 속성을 사용합니다.

이미지는 오른쪽이나 텍스트의 왼쪽에 떠 있습니다 :

이미지 맵

사용 <map> 이미지 맵을 정의하는 태그를. 이미지 맵은 클릭 가능한 영역과 이미지입니다.

name 의 속성 <map> 태그는와 연관된 <img> 의 속성의 usemap 이미지 맵의 관계를 생성한다.

<map> 태그의 수를 포함 <area> 이미지 맵의 클릭 가능한 영역을 정의하는 태그를 :

장 요약

• HTML 사용 <img> 이미지를 정의하는 요소를
• 은 HTML 사용 src 이미지의 URL을 정의하는 속성을
• 은 HTML 사용 alt 가 표시 할 수없는 경우, 이미지에 대한 대체 텍스트를 정의하는 속성을
• 은 HTML 사용하여 width 과 height 이미지의 크기를 정의하는 속성
• CSS를 이용하여 width 및 height 이미지의 크기를 정의하는 속성 (alternatively)
• CSS를 사용 float 이미지 플로트 수 있도록 속성을
• HTML을 사용하여 <map> 요소는 이미지 맵을 정의 할 수
• HTML 사용 <area> 이미지 맵의 클릭 가능한 영역을 정의하는 요소를
• HTML 사용 <img> 의 요소를 usemap 이미지 맵을 가리 키도록 속성

연습으로 자신을 테스트!

연습 1» 연습 2» 연습 3» 운동 4» 운동 5» 운동 6»

HTML 이미지 태그