HTML2-2.img 태그( 절대경로,상대경로, src, alt 속성)

1. <img>

<img> 태그는 이미지를 웹 문서에 이미지를 삽입할 때 사용합니다. 

사용방식 :  <img src="경로"> [속성:"값"]

 

여기에서 src 속성은  이미지 속성의 URL 명시 합니다. source 말하는 약어이므로 기억하기 쉽죠. 

 

아래의 이지미를 링크를 걸어봅시다. 웹상의 이미지는 저장권을 가지고 있으므로 주소복사를 하실 때에는 

꼭 출처를 밝히주셔야 하니 유의해 주세요. 

 

저 아래의 링크는 아래와 같습니다. 

 

https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fn8afw%2FbtrMC8SiFzC%2FAAAAAAAAAAAAAAAAAAAAAPWiwF-s3c-eRwJve-Ke-89iHAQFCsm68SCfpas7y0qD%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DXRZ7yT8DkFRC7CMeuF81wVA2vPI%253D

우선 아래와 같이 img src 속성으로 주소만 이미지는 삽입이 완료됩니다. 

 

<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fn8afw%2FbtrMC8SiFzC%2FAAAAAAAAAAAAAAAAAAAAAPWiwF-s3c-eRwJve-Ke-89iHAQFCsm68SCfpas7y0qD%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DXRZ7yT8DkFRC7CMeuF81wVA2vPI%253D"> 

 

1-1. 주소 지정  (절대경로)

: 금방 예제소스가 URL의 절대적인 위치를 경로로 지정한 방식이라 보시면 됩니다.  웹상에서 

저 URL을 입력하면 변경되지 않는 유니크한 주소이기 때문입니다.

 

다른 한가지는 내 로컬pc에서 시스템 내에서 c:home\images\apple.jpg 처럼  시스템 루트에서 시작하여 명시하는 것을 절대 경로라고 합니다. 

 

 

 

 

1-2. 주소 지정  (상대경로)

: HTML 문서를 기준으로 현재 위치에서 시작하여 파일로 이동하는 경로를 말합니다. 

 

<!--이미지가 HTML 문서와 같은 위치 --> >

    <img src="파일 이름">,<img src="./파일명">

 

    <!-- 이미지가 하위 폴더에 있는 경우 -->

    <img src="폴더 이름/파일명">

 

    <!-- 이미지가 상위 폴더에 있는 경우 -->

    <img src="../파일명">

 

    <!-- 이미지가 상위폴더 > 하위 폴더에 있는 경우-->

    <img src="../하위 폴더명 /파일명">

 

2. alt 속성- 이미지를 설명해 주는 대체 텍스트 

 

alt 속성은 이미지를 설명하는 대체 텍스트를 삽입할 때 사용하는데요.  시각 장애인들은 그 내용을 알 수 없기 때문에

해당 사진이 어떤 사진인지 텍스트를 읽어 주기 때문 입니다.

 

만약 텍스트를 읽어주고 다음 페이지로 넘어가거나 메뉴로 돌아가서 다른 책을 듣고 싶을 때에는

어떤 부위를 터치해야 할지 알 수 없다면  해당 웹사이트를 이용하지는 않겠죠.