HTML / (16) 이미지

■ 요약

▶ <img> 요소를 사용하여 이미지를 정의한다.

▶ "src" 속성을 사용하여 이미지의 URL를 정의한다.

▶ "alt" 속성을 사용하여 이미지가 표시될 수 없다면 이미지에 대체 텍스트를 정의한다.

▶ "width"와 "height" 속성 혹은 CSS "width"와 "height" 속성을 사용하여 이미지의 크기를 정의한다.

▶ CSS "float" 속성을 사용하여 왼쪽이나 오른쪽에 이미지를 띄운다.

 

▶ 이미지는 웹 페이지의 디자인과 모양을 개선할 수 있다.

<img src="html5_logo.jpg" alt="html5 로고">
<img src="css_logo.jpg" alt="css 로고">

 

■ HTML 이미지 구문

▶ HTML <img> 태그는 웹 페이지에 이미지를 삽입하는데 사용된다.

 

▶ 이미지는 기술적으로 웹 페이지에 삽입되지 않는다.

▶ 이미지는 웹 페이지에 연결된다.

 

▶ <img> 태그는 참조 이미지를 위한 보관 공간을 만든다.

▶ <img> 태그는 속성만 포함한 공백태그다.

▶ <img> 태그는 2가지 필수 속성이 있다.

▷ "src" : 이미지에 경로를 지정한다.

▷ "alt" : 이미지에 대한 대체 텍스트를 지정한다.

<img src="url" alt="alternatetext">

■ src 속성

▶ 필수 "src" 속성은 이미지의 경로를 지정한다.

※ 브라우저는 웹 페이지가 로드되면 그 순간 엡 서버에서 이미지를 가져와 페이지에 삽입한다.

※ 따라서 이미지가 실제로 그 경로에 있는지 확인해야한다.

※ 브라우저에서 이미지를 찾을 수 없는 경우 끊어진 링크 아이콘과 대체 텍스트가 표시된다.

<img src="html5.png" alt="HTML5 Logo 이미지">

■ alt 속성

▶ 연결이 느리거나 "src" 속성에 오류거나 사용자가 스크린 리더를 사용할 경우 필수 "alt" 속성은 이미지에 대체 텍스트를 제공한다.

▶ "alt" 속성 값은 이미지를 설명해야 한다.

 

<img src="html5.png" alt="HTML5 Logo 이미지">

▶ 브라우저가 이미지를 찾을 수 없다면 "alt" 속성 값을 표시한다.

 

■ 이미지 크기 - width, height

▶ "style" 속성을 사용하여 이미지의 가로와 세로를 지정할 수 있다.

<img src="html5.png" alt="HTML5 Logo" style="width:500px; height:600px;">

▶ "style" 속성 대신 "width" 와 "height" 속성을 사용할 수 있다.

<img src="html5.png" alt="HTML5 Logo 이미지" width="500" height="600">

▶ "width" 와 "height" 속성은 항상 픽셀 단위로 정의한다.

※ 항상 이미지의 가로와 세로를 지정해야한다. 지정하지 않으면 이미지가 로드될 동안 웹 페이지가 깜빡일 수 있다.

 

■ "width"와 "height" 혹은 "style" ?

▶ "width", "height" 그리고 "style" 속성은 모두 HTML 에서 유효하다.

▶ W3C 에서는 "style" 속성을 권장한다.

▶ 스타일 시트가 이미지 크기를 변경하는 것을 방지한다.

 

■ 다른 폴더에 이미지

▶ 현재 페이지 경로에서 하위 폴더에 이미지가  있을 경우, "src" 속성에 폴더 이름까지 포함해야 한다.

<img src="/image/html5.png" alt="HTML5 Logo 이미지" width="500" height="600">

 

■ 다른 서버/웹 사이트에 이미지

▶ 일부 웹 사이트는 다른 서버의 이미지를 가리킨다.

▶ 다른 서버의 이미지를 가리킬 경우, "src" 속성에 절대경로 URL를 지정해야 한다.

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

※ 외부 이미지는 저작권이 있을 수 있다.

※ 해당 이미지로 부터 사용 권한이 없으면 저작권 법에 위반할 수 있다.

※ 외부 이미지는 제어할 수 없기에 갑자기 없어지거나 변경될 수 있다.

 

■ 애니메이션 이미지

▶ HTML 은 애니메이션 GIF 확장자를 허용한다

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

 

■ 이미지에 링크

▶ 이미지에 링크를 사용하려면 <img> 태그 안에 <a> 태그를 넣는다

<a href="https://naver.com">
	<img src="naver.png" alt="naver logo" style="width:42px;height:42px;">
</a>

 

■ 플로팅 이미지

▶ CSS "float" 속성을 사용하여 이미지를 텍스트의 오른쪽이나 왼쪽에 띄운다.

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
이미지를 텍스트 오른쪽에 띄워보겠습니다. 이미지를 텍스트 오른쪽에 띄워보겠습니다.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
이미지를 텍스트 왼쪽에 띄워보겠습니다. 이미지를 텍스트 왼쪽에 띄워보겠습니다.</p>

 

출처 : https://www.w3schools.com/html/html_images.asp

HTML Images