이미지 관련 태그 ( img )
웹 문서에 사진, 그림 같은 이미지를 삽입하는 용도의 태그이다.
속성
- src : 삽입할 이미지의 경로를 지정하는 속성이다. ( 파일경로, 웹주소 )
- width / height : 이미지의 크기를 지정하는 속성
- alt : 이미지를 설명하는 속성 -> 이미지가 출력되지 않는 경우 화면에 직접표시 ( 웹 접근성 )
src
상대 경로 : 현재 위치를 기준으로 경로를 지정
.. : 상위 폴더
/ : 아래, 안쪽, 안에 있는 폴더
./ : 동일 레벨에 있는 폴더
ex) 상대 경로
<img src="./images/animal/고.jpg">
<img src="./images/animal/5.jpg">ex) 웹 이미지 경로(웹상 절대 경로)를 이용해서 이미지 출력
<img src="https://images.unsplash.com/photo-1680479610487-198fb5d0306e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=685&q=80">width / height
속성을 이용한 크기 조절( 고정/가변 크기 )
고정 크기 단위(px) : 화면의 크기와 상관없이 지정된 값의 크기를 갖는 단위
ex)
<img src="./images/img/z.jpg" width="300px" height="100">가변 크기 단위 (%) : 화면이나 영역 기준 사이트 크기에 따라 이미지의 크기가 변경되는 단위 ( 반응형 )
ex)
<img src="./images/img/4].jpg" width="15%">alt
경로 틀리면 alt에 적은 내용 출력 (이미지 깨질때)
ex)
<img src="./images/img/8].jpg" alt="풍경">
dudu