0x11_ HTML Images

Images can improve the design and the appearance of a web page.

01_ Attributes

• src 속성 : 이미지의 URL(웹주소) 을 명시한다. img 태그는 resource(이미지)와 source(경로)가 함께 있어야 한다.
• alt 속성 : 접속문제, 에러, 스크린 리더기 사용을 위한 이미지 대체 텍스트를 제공한다.

02_ Image Size - Width and Height

• style attribute 를 사용하여 이미지 크기를 명시할 수 있다.
• Ex) <img src="" alt="" style="width:300px; height:300px;">
• 이미지가 고정값일 경우 Inline 방식으로 명시하는게 좋다. 그렇지 않을경우, 이미지를 로드하는 동안 페이지가 깜빡거릴 수 있다.

03_ Width and Height, or Style?

• 두 속성 모두 HTML 안에서 유효하다.
• 그러나, style 속성을 사용하면 이미지의 크기가 바뀌는것을 막을 수 있다.(즉, Width & Height로 선언된 이미지는 style sheet가 override 하고, 새로 값을 적용함)

04_ HTML Screen Readers

• 스크린 리더는 HTML 코드를 읽고, 텍스트로 변환하고, 사용자들이 컨텐츠를 들을수있도록 도와주는 소프트웨어다.

05_ HTML Image Maps

• With HTML image-maps, you can create clickable areas on an image.
• <map>태그는 이미지 맵을 정의한다. 이미지 맵은 클릭가능한 영역을 의미한다

<img src="" alt="" usemap="#workmap"> 
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="computer" href="computer.html">

• onclick 속성을 사용하여 javascript 함수도 호출할 수 있다.

06_ The Areas
1) shape
-rect : (x,y) 좌표로 left-top 꼭지점과 right-bottom 꼭지점을 찍어서 사각형을 잡는다.
-circle : (x,y) 좌표로 원의 중심을 잡고 반지름을 이용하여 원을 그린다.
-poly
-default : 완전한 영역

07_ Background Cover
1) background-size: cover

• 배경이미지를 완전히 요소에 커버로 씌우고 싶다면, background-size property 를 cover 로 사용한다.

2) background-attachment: fixed;

• 항상 커버되게 하고 싶을때 사용한다.

Note.
위와 같이 이미지 커버 적용시, 뻗치는거 없이 원래 비율을 유지하게 된다.

08_ Background Stretch

• 요소 안에 완전히 이미지를 꽉 채우기 위해 image stretch를 원한다면, background-size 속성값에 100% 100% 를 적용하면 된다.

09_ The HTML <picture> Element

• 이미지 리소스를 명시할 때 더 유연성을 제공한다.
• 각기 다른 이미지 소스를 참조하는 여러 <source>요소를 포함한다.
• 이 방법은 브라우저가 현재 뷰/장치에 가장 최적화된 이미지를 선택하는것이다.
• 각 <source>요소는 그 이미지가 가장 적합한 때를 기술한다.
• Ex)

<picture>
	<source media="(min-width: 650px)" srcset="img_food.jpg">
    <source media="(min-width: 465px)" srcset="img_car.jpg">
    <img src="img_girl.jpg">
</picture>

• img 요소는 항상 picture 요소의 마지막 자식에 명시해야한다. 브라우저가 지원하지 않는 요소이거나 source 태그와 매치되는게 없을 때 사용되기 때문이다.

Note.
브라우저는 매칭되는 속성값이 있으면 첫번째 source 요소를 사용한다.