14. HTML Images

이미지는 웹 페이지의 디자인을 향상 시킬 수 있습니다.

 

 

See the Pen 01.Images by heunho (@heunho) on CodePen.

 

 

 

 

 

 

 

 

 

---

HTML 이미지 구문

---

HTML에서 이미지는 <img> 태그로 정의됩니다.

<img> 태그는 비어있고 속성만 포함하며 닫기 태그가 없습니다.

src속성은 이미지의 URL (웹 주소)을 지정합니다.

<img src="url">

 

 

 

 

대체 속성

---

alt 속성은 사용자가 어떤 이유로든 이미지를 볼 수 없는 경우 (연결 속도가 느리거나 src 속성에 오류가 있거나, 사용자가 화면 판독기를 사용하는 경우) 이미지의 대체 텍스트를 제공합니다.

 

alt 속성의 값은 이미지를 설명해야합니다.

 

See the Pen 02. The alt Attribute-1 by heunho (@heunho) on CodePen.

 

 

 

 

See the Pen 02. The alt Attribute-2 by heunho (@heunho) on CodePen.

참고 : alt 속성이 필요한 이유는 뭘까요? 바로 웹 페이지의 유효성이 올바르게 검사 되지 않기 때문입니다.

 

 

 

 

이미지 크기 - 너비와 높이(width-height)

---

style 속성을 사용하여 이미지의 너비와 높이를 지정할 수 있습니다.

 

See the Pen 3.Image Size-1 by heunho (@heunho) on CodePen.

 

위 방법 외에도 width, height 속성을 사용해서 너비와 높이를 수정할 수 있습니다.

See the Pen 3.Image Size-2 by heunho (@heunho) on CodePen.

 

 

 

 

 

 

너비와 높이 속성은 항상 픽셀 단위로 정의합니다.

참고 : 이미지의 너비와 높이를 지정하지 않을 경우 이미지가 로드되는 동안 페이지가 깜박일 수 있습니다.

 

 

width, height 속성과 style 속성?

---

너비, 높이 및 스타일 속성은 HTML에서 유효합니다.

그러나 스타일 속성을 사용하는 것이 좋습니다. 스타일 시트가 이미지의 크기를 변경하지 못하게 합니다.

(스타일 속성을 사용하여 크기를 지정하는 것이 우선순위가 가장 높습니다.)

 

 

See the Pen 4.Width and Height, or Style? by heunho (@heunho) on CodePen.

 

 

 

 

다른 폴더의 이미지

---

See the Pen 5.Images in Another Folder by heunho (@heunho) on CodePen.

 

해당 예제에선 웹페이지에서 가져온 이미지입니다. 만약 images폴더 안에 html5.gif 파일이 있다면 /images/html5.gif가 됩니다.

 

 

 

 

다른 서버의 이미지

---

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

실제로 전 세계 모든 웹 주소에서 이미지를 가져올 수 있습니다.

 

See the Pen 5.Images on Another Server by heunho (@heunho) on CodePen.

 

 

 

 

 

 

나중에 HTML File Paths챕터에서 파일 경로에 대한 자세한 내용을 볼 수 있습니다.

 

 

애니메이션 이미지

---

HTML은 애니메이션 GIF를 허용합니다.

See the Pen 7.Animated Images by heunho (@heunho) on CodePen.

 

 

 

 

 

 

 

 

 

 

참고 : border : 0; 속성은 IE9 (및 이전 버전)가 이미지 주위에 테두리를 표시하지 않도록 하기 위해 추가되었습니다 (이미지가 링크인 경우).

 

 

 

이미지 floating

---

CSS float 속성을 사용하여 이미지를 텍스트의 오른쪽 또는 왼쪽에 띄울 수 있습니다.

 

See the Pen 8.Image Floating by heunho (@heunho) on CodePen.

 

 

 

 

 

 

이미지 맵

---

<map> 태그는 이미지 맵을 정의 합니다. 이미지 맵은 클릭 가능한 영역이 있는 이미지입니다.

아래 이미지에서 컴퓨터, 전화 또는 커피 잔을 클릭하십시오.

 

 

 

 

 

이미지 맵 작동 원리

---

이미지 맵의 장점은 이미지의 클릭 위치에 따라 다른 작업을 수행할 수 있다는 것입니다.

이미지 맵을 만들려면 이미지와 클릭 가능한 "영역"을 설명하는 규칙이 포함된 맵이 필요합니다.

 

 

이미지 맵 - 이미지 구문

---

이미지는 <img> 태그를 사용하여 삽입됩니다. 다른 이미지와의 유일한 차이점은 usemap 속성을 추가해야 한다는 것입니다.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

usemap 값은 이미지 맵 이름 뒤에 해시 태그 #으로 시작하며 이미지와 이미지 맵 사이의 관계를 만드는 데 사용됩니다.

참고 : 모든 이미지를 이미지 맵으로 사용할 수 있습니다.

 

 

 

이미지 맵 - 이미지 구문

---

그런 다음 <map> 요소를 추가해보세요.

<map> 요소는 이미지 맵을 작성 하는 데 사용되며 name 속성을 사용하여 이미지에 링크됩니다.

<map name="workmap">

name 속성은 usemap 속성과 동일한 값이어야 합니다.

참고 : <map> 요소를 원하는 위치에 삽입할 수 있으며 이미지 바로 뒤에 삽입할 필요는 없습니다.

 

 

 

 

이미지 맵 - 지역 설정

---

그다음으로 해야 할 것은 Area 즉, 영역을 추가해야 합니다.

클릭 가능 영역은 <area> 요소를 사용하여 정의됩니다.

 

모양(Shape)

영역의 모양을 정의해야 하며 다음 값 중 하나를 선택할 수 있습니다.

rect	직사각형 영역을 정의
circle	원형 영역을 정의
poly	다각형 영역을 정의
default	전체 지역을 정의

 

좌표(Coordinates)

클릭 가능한 영역을 이미지에 배치할 수 있도록 일부 좌표를 정의해야 합니다.

좌표는 x축과 y축에 대해 하나씩 쌍을 이룹니다.

좌표는 34, 44는 왼쪽 여백에서 34 픽셀, 위쪽에서 44픽셀에 있습니다.

좌표 270,  350은 왼쪽 여백에서 270px, 위쪽 여백에서 350px 떨어진 곳입니다.

이제 클릭 가능한 직사각형 영역을 생성하기에 충분한 데이터가 되었습니다.

 

See the Pen 9. Image Maps1 by heunho (@heunho) on CodePen.

 

 

 

 

 

Circle

원 영역을 추가하려면 먼저 원 중심의 좌표를 찾으세요.

 337, 300 

중앙을 선택했으면 원 반지름 크기를 찾으세요.

 44px 

이제 클릭 가능한 원형 영역을 생성하기에 충분한 데이터가 되었습니다.

 

See the Pen 10.Image Maps2 by heunho (@heunho) on CodePen.

 

해당 영역을 클릭하면 사용자를 coffee.htm 페이지로 보냅니다.

 

 

 

 

이미지 맵 및 자바스크립트

---

클릭 가능한 영역의 기능은 꼭 링크 기능일 필요는 없습니다. 자바스크립트를 이용해 다른 기능을 첨부할 수 있습니다.

<area> 요소에 click 이벤트를 추가하여 JavaScript 함수를 실행해보세요.

 

영역을 클릭할 때 onclick 속성을 사용하여 JavaScript 함수를 실행할 수 있습니다.

See the Pen 11.Image Maps3 by heunho (@heunho) on CodePen.

 

 

 

 

 

 

 

HTML 백그라운드 이미지

---

Background Images

A background image can be specified on almost any HTML element.

HTML로 배경 이미지를 추가하려면 CSS 속성에서 background-image를 사용하면 됩니다.

 

 

 

 

HTML 요소 - Background Image

---

HTML 요소에 배경 이미지를 추가할 때 style 속성을 사용해야 합니다.

 

아래 예제와 같이 HTML 요소에 배경 이미지를 추가해보세요.

See the Pen 12.background-image1 by heunho (@heunho) on CodePen.

 

 

 

 

 

<style> 요소에서 배경 이미지를 지정할 수도 있습니다.

아래 예제와 같이 스타일 요소에 배경 이미지를 지정해보세요!

See the Pen 12.Background-Image2 by heunho (@heunho) on CodePen.

 

 

 

 

 

 

페이지의 배경 이미지

---

전체 페이지에 대해 배경 이미지를 적용하려면 <body> 요소에 배경 이미지를 지정해야 합니다.

아래 예제를 보고 HTML 페이지에 배경 이미지를 추가해보세요!

See the Pen 12.Background Image3 by heunho (@heunho) on CodePen.

 

 

 

 

 

 

Background Repeat

---

배경 이미지가 요소보다 작으면 이미지는 요소의 끝에 도달할 때까지 수평 및 수직으로 반복해서 출력됩니다.

설명하기 위해 큰 div 요소에서 작은 이미지를 배경으로 사용하면 어떻게 되는지 확인해보세요.

 

background-image 속성은 끝에 도달 할때까지 div 요소에서 이미지를 채우려고 시도합니다.

See the Pen 12.Background Image4 by heunho (@heunho) on CodePen.

 

배경 이미지가 반복되는 것을 방지하려면 background-repeat 속성을 사용하세요.

See the Pen 12.Background Image5 by heunho (@heunho) on CodePen.

 

 

 

 

 

Background Cover

---

배경 이미지가 전체 요소에 포함하고 싶은 경우 Cover 속성으로 설정해보세요.

 

 

보시다시피 이미지는 전체 요소를 덮으며 이미지의 원래 비율을 유지합니다.

 

See the Pen 12.Background Image6 by heunho (@heunho) on CodePen.

 

 

 

 

 

Background Size

---

Background의 크기를 요소의 전체 이미지에 맞추려면 배경 크기 속성을 100%, 100%로 지정하면 됩니다.

 

브라우저 창의 크기를 조정하면 이미지가 늘어나지만 전체 요소를 덮는 것을 볼 수 있습니다.

See the Pen 12.Background Image7 by heunho (@heunho) on CodePen.

 

 

 

 

 

HTML <picture> 요소

---

HTML 5는 이미지 리소스를 지정할 때 유연성을 높이기 위해 <picture> 요소를 추가했습니다.

<picture> 요소는 각각 다른 이미지 소스를 나타내는 많은 <source> 요소를 포함합니다. 이렇게 하는 이유는 브라우저가 가 현재 보기 및 해당 기기에 가장 적합한 이미지를 선택할 수 있기 때문입니다.

각 <source> 요소에는 이미지가 가장 적합한 시기를 설명하는 속성도 있습니다.

See the Pen 13.The picture Element1 by heunho (@heunho) on CodePen.

 

 

해당 예제 화면 크기를 늘리고 줄여보세요.

참고 : 항상 <img> 요소를 <picture> 요소의요소의 마지막 자식 요소로 지정하십시오. <img>요소는 <picture>요소를 지원하지 않거나 <source>태그가 일치하지 않는 브라우저에서 사용됩니다.

 

 

 

 

 

Picture 요소를 사용하는 경우

---

<picture> 요소에는 두 가지 주요 목적이 있습니다.

1. Bandwidth (대역폭)

작은 화면 혹은 다른 기기가 있는 경우 큰 이미지 파일을 로드할 필요가 없습니다. 브라우저는 속성 값이 일치하는 첫 번째 <source> 요소를 사용하며 다음 요소를 무시합니다.

 

2.Format Support(포맷 지원)

일부 브라우저 or 기기는 모든 이미지 형식을 지원하지 않을 수 있습니다. 이때 <picture> 요소를 사용하면 모든 형식의 이미지를 추가할 수 있으며 브라우저는 첫 번째 형식을 인식하고 다음 중 하나를 무시합니다.

 

See the Pen 13.The picture Element2 by heunho (@heunho) on CodePen.

참고 : 브라우저는 일치하는 속성 값과 함께 첫 번째 <source> 요소를 사용하고 다음 <source> 요소는 무시합니다.

 

 

 

 

---

단원 요약

---

• HTML <img> 요소를 사용하여 이미지를 정의 하세요.

• HTML src 속성을 사용하여 이미지의 URL을 정의하세요.

• alt 이미지에 대체 텍스트를 표시할 수 없는 경우 HTML 속성을 사용하여 대체 텍스트를 정의하세요.

• HTML width 및 height 속성을 사용하여 이미지 크기를 정의하세요.

• CSS width와 height 속성을 사용하여 이미지의 크기를 정의하세요.

• CSS float 속성을 사용하여 이미지를 띄울 수 있습니다.

• HTML <map> 요소를 사용하여 이미지 맵을 정의하세요.

• HTML <img>의 element usemap 속성을 사용하여 이미지 맵을 가리킬 수 있습니다.

• HTML <picture> 요소를 사용하여 장치마다 다른 이미지를 표시할 수 있습니다.

 

 

---

틀린 내용, 오타, 오역이 있을 경우 댓글로 알려주시면 감사하겠습니다.

질문도 올려주시면 아는 선에서 답변해드리겠습니다.

---

대부분의 내용의 저작권은 w3schools에 있습니다.

HTML Images