w3스쿨즈 HTML(5) - 이미지[image]

이미지

1. image 크기조절의 기본단위는 px
2. image 태그는 닫히는 구문이 없습니다.
3. alt속성은 이미지를 볼 수 없는 경우 대체 텍스트를 제공합니다. (화면판독기를 사용하는경우)
4. 이미지링크의 경우 서버에 있는 이미지를 이용하거나 문서파일을 이용할 수 있습니다.
5. HTML은 GIF(애니메이션)파일을 허용합니다.
6. 이미지에 링크을 걸 수 있습니다.
7. alt속성은 반드시 정의해주어야합니다. 그렇지 않으면 웹페이지의 유효성이 올바르게 검사되지않습니다.
8. 항상 이미지의 너비와 높이를 지정하십시오. 너비와 높이를 지정하지 않으면 이미지가로드되는 동안 페이지가 깜박일 수 있습니다.
9. 일반적으로 style속성을 이용해 너비와 높이를 지정해주는 것이 좋습니다. 왜냐햐면 스타일 시트가 이미지의 크기를 변경하지 못하도록 예방합니다.

 

기본 사용법

<img src="pic_trulli.jpg" alt="Italian Trulli">

 

style속성을 이용한 width, height 설정 : (권고)

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

 

style태그 없이 width, height 설정 : (비권고)

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

 

 

스타일속성을 이용한 이미지 Floating

<p>
  <img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
  A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>

float 속성은 특정 요소를 떠 있게 하는 것입니다. 기본적인 레이아웃 흐름에서 벗어나 요소 왼쪽 혹은 오른쪽에 위치하는 것입니다. float 속성을 사용하지 않으면 요소들이 수직으로 출력됩니다.

 

※ 과거에는 float 속성을 이용해서 웹페이지의 전체적인 레이아웃을 구현했으나, 요즘에는 flex와 grid가 많이 쓰입니다.

 

image Map

HTML 이미지 맵을 사용하면 이미지에서 클릭 가능한 영역을 만들 수 있습니다.

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

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

※ 이미지 좌표는 그림판이나 포토샵에서 확인 가능합니다.

shape 속성

• rect : 직사각형
• circle : 원형
• poly : 다각형
• default : 기본값으로 사진 전체지역을 정의

 

coords(coordinates) 속성

• rect 의 좌표 : x축(좌측상단), y축(우측하단) 2개숫자 x 2개숫자
• circle 의 좌표 : 원의 중심의 좌표(2개숫자) 그 다음부터 원의 반경길이(원의 오른쪽 끝,1개숫자) 2x1

 

이미지맵 + 자바스크립트

클릭 가능한 영역은 다른 페이지에 대한 링크 일 필요는 없으며, JavaScript 기능을 트리거 할 수도 있습니다.

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

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="circle" coords="337,300,44" onclick="myFunction()">
</map>

 

background Image

기본적으로 거의 모든 HTML 요소에 배경 이미지를 지정할 수 있습니다.

HTML 요소에 배경 이미지를 추가하려면 HTML 스타일 속성과 CSS background-image 속성을 사용하세요.

 

 

background image HTML

<div style="background-image: url('img_girl.jpg');">somethin</div>

 

background image Style

<style>
div {
  background-image: url('img_girl.jpg');
}
</style>

 

background image 전체페이지 적용

<style>
body {
  background-image: url('img_girl.jpg');
}
</style>

 

background Repeat

배경 이미지가 요소보다 작으면 이미지는 요소의 끝에 도달 할 때까지 가로 및 세로로 반복됩니다.

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

<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>

 

background Cover

배경 이미지가 전체 요소를 덮도록하려면 background-size 속성을 cover로 설정할 수 있습니다.

이미지를 고정하려면  background-attachment 속성을 fixed로 설정하세요.

cover속성은 이미지를 늘림 없이 전체 요소를 덮으며 이미지는 원래 비율을 유지합니다.

만약에 이미지 해상도가 브라우저 창보다 크다면 이미지가 짤려보입니다.

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

 

background stretch

배경 이미지를 요소의 전체 이미지에 맞게 늘리려면 배경 크기 속성을 100 % 100 %로 설정할 수 있습니다.

브라우저 창의 크기를 줄이거나 늘려도 이미지가 브라우저 창의 크기에 상관없이 항상 원본사진을 그대로 보여줍니다.

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}