img 태그
- 웹 문서에 사진, 그림 같은 이미지를 삽입하는 용도의 태그
[속성]
1. src : 삽입할 이미지의 경로를 지정하는 속성(파일경로, 웹주소)
2. width / height : 이미지의 크기를 지정하는 속성
3. alt : 이미지를 설명하는 속성 -> 이미지가 출력되지 않은 경우 화면에 직접 표시
src 속성 확인
파일 경로 (상대경로, 절대경로)
절대경로 : c드라이브 안에 폴더 경로 지정
상대경로 : 현재 위치 기준으로 경로 지정
.. : 상위 폴더
/ : 아래, 안쪽, 안에 (하위 의미)
./ : 동일 레벨
<img src="../images/cats/cat5.jpg">
웹 이미지 경로(웹상 절대 경로)를 이용해서 이미지 출력
<img src="https://images.unsplash.com/photo-1704714695191-a40c000ff64b?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
width, height 속성을 이용한 크기 조절 (고정/가변 크기)
고정 크기 단위(px)
화면의 크기와 상관없이 지정된 값의 크기를 갖는 단위
<img src="../images/dogs/dog1.jpg" width="300px" height="300px">
<img src="../images/dogs/dog2.jpg" width="300px" height="300px">
<img src="../images/dogs/dog3.jpg" width="300px" height="300px">
<img src="../images/dogs/dog4.jpg" width="300px" height="300px">
<img src="../images/dogs/dog5.jpg" width="300px" height="300px">가변 크기 단위(%)
화면이나 영역 기준으로 사이트 크기에 따라 이미지 크기가 변경되는 단위
<img src="../images/flowers/flower1.jpg" width="15%">
<img src="../images/flowers/flower2.jpg" width="15%">
<img src="../images/flowers/flower3.jpg" width="15%">
<img src="../images/flowers/flower4.jpg" width="15%">
<img src="../images/flowers/flower5.jpg" width="15%">alt 속성 확인
<img src="../images/cats/cat1111111.jpg" alt="고양이1">
