### html 이미지
<img>: 이미지를 넣을 때 사용한다.
src = "파일이름" 파일이름 안에 이미지 이름과 확장자명을 넣는다.(하위폴더에 있는 경우 폴더 이름 포함)
ex) <img src="img_girl.jpg">
width="" / height=""를 이용하여 이미지의 폭 및 높이를 지정할 수 있다.
ex) <img src="img_girl.jpg" width="500" height="600">
alt="문장" : 이미지를 표시할 수 없는 경우 대체 텍스트를 지정한다.
ex) <img src="img_typo.jpg" alt="Girl with a jacket">
GIF 도 사용 가능하다
ex) <img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
float 속성 : 이미지를 텍스트의 오/왼쪽으로 띄울 수 있다.
ex)
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
<map>: 이미지에서 클릭 가능한 영역을 만들 수 있다.
영역은 하나 이상의 <area> tag로 정의된다. 다른 이미지와 다르게 usemap을 추가해야한다.
ex) <img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
영역 지정 방법
ex) <area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
rect -직사각형 영역을 정의(x,y,x2,y2)
x,y : 왼쪽 위 꼭짓점 좌표
x2,y2 : 오른쪽 아래 꼭짓점 좌표
circle -원형 영역을 정의(x,y,z)
x,y : 원의 중심 좌표
z : 원의 반경 크기
poly -다각형 영역을 정의
지정하고자 하는 모든 꼭짓점의 좌표 기입,
default -전체 지역을 정의
이벤트 걸기
ex)
<map name="workmap">
<area shape="circle" coords="337,300,44" onclick="myFunction()">
</map>
<script>
function myFunction() {
alert("You clicked the coffee cup!");
}
</script>
배경 이미지
background-image 속성 사용
ex) <div style="background-image: url('img_girl.jpg');">
전체 페이지에 배경 이미지가 포함되도록 하려면 <body>에 이미지를 지정한다.
ex)
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
배경 이미지가 페이지보다 작으면 다 채울때까지 반복됨 ( 반복되게 하지 않기 위해서는 background-repeat 속성을 설정한다.
ex)
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
배경 이미지를 페이지 전체에 덮게 하기(여백있을수 있음)
background-size: cover; 을 해준다
background-size: 100% 100% 을 해주면 페이지 크기에 맞게 이미지를 늘려서 보여준다.
페이지 전체를 이미지가 덮게 하기(여백 없음)
background-attachment: fixed;를 해준다.
<picture>: 장치 또는 화면 크기에 따라 다른 그림을 표시할 수 있다.
<source> 요소와 그 안에 media="" 이용하여 적합한 이미지(각각 srcset="" 지정해준다. )를 선택할 수 있게 한다.
마지막에 기본 이미지를 넣어서 장치에 적합한 이미지가 없는 브라우저에서 사용될 수 있게 한다.
가장 먼저 <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>
