img 태그
: 웹 문서에 사진, 그림 같은 이미지를 삽입하는 용도의 태그
[속성]
1) src : 삽입할 이미지의 경로를 지정하는 속성(파일경로, 웹주소)
2) width / height : 이미지의 크기를 지정하는 속성
3) alt : 이미지를 설명하는 속성 -> 이미지가 출력되지 않는 경우 화면에 직접 표시(웹 접근성)
상대 경로 : 현재 위치를 기준으로 경로 지정
.. : 상위 폴도
/ : 아래, 안쪽, 안에
<img src="./image/img/sample.jpg" alt="나는 단비야">
* 웹 이미지 경로(웹상 절대 경로)를 이용해서도 이미지 출력 가능사진이 엑박 떴을 때 보이는 화면
width, height 속성을 이용한 크기 조절(고정/가변 크기)
- 고정 크기 단위(px) : 화면의 크기 상관 없이 지정된 값의 크기를 갖는 단위
<img src="./images/dogs/dog1.jpg" width="300px" height="240px">
<img src="./images/dogs/dog2.jpg" width="300px" height="240px">
<img src="./images/dogs/dog3.jpg" width="300px" height="240px">
<img src="./images/dogs/dog4.jpg" width="300px" height="240px">
<img src="./images/dogs/dog5.jpg" width="300px" height="240px">
- 가변 크기 단위(%) : 화면이나 영역 기준 사이트 크기에 따라 크기 변경되는 단위
<img src="./images/cats/cat1.jpg" width="15%">
<img src="./images/cats/cat2.jpg" width="15%">
<img src="./images/cats/cat3.jpg" width="15%">
<img src="./images/cats/cat4.jpg" width="15%">
<img src="./images/cats/cat5.jpg" width="15%">