01_이미지 삽입태그 p.63

웹페이지를 구성하는 요소로는 '문자(텍스트)', '이미지', '영상', '사운드'로 구성된다.

이미지는 웹페이지의 시각적인 요소로 많이 사용되며 이미지 종류에는 jpg, png, gif, bmp, webp, svg의 종류가 있다.

이러한 이미지 종류들을 웹문서에 삽입하기 위한 태그가 img태그이며, source의 약자인 'src'속성과 이미지가 나오지 않을 때 대체할 문자인 'alt'속성을 사용한다.

작성법) img src="이미지 주소나 경로" alt="이미지가 나오지 않을때 대체할 문자"

이미지 태그는 br, hr태그와 마찬가지로 닫는 태그가 없는것이 특징이다.

1.이미지 삽입하기

절대주소(아래 이미지주소같은=사진이 안나올 수 있다)를 사용하여 이미지 삽입하기
다음로고
상대주소를 사용하여 이미지 삽입하기(현재위치에 있는 하위폴더이미지사용 (./))
다음로고

URL-unifirm resource lacator(웹서버에 위치한 파일, 문서의 정확한 경로나 주소, 위치)

주소는 절대주소와 상대주소가 있다. 절대주소는 http://~시작하여 확장자로 끝나는 주소를 말하며, 상대주소는 현재 문서를 기준으로 주소가 결정되는 주소를 말함.

./폴더명/파일명.확장자 : 문서를 기준으로 폴더가 보일 때 작성함(=하위폴더)
../폴더명/파일명.확장자 : 문서를 기준으로 폴더가 다른 폴더에 있을 경우(=상위폴더)
파일명.확장자 : 문서와 이미지가 같은 폴더안에 있을 경우는 파일명.확장자를 작성함.

네이버로고 네이버로고 네이버로고 옥션로고

2. 이미지 경로가 잘못되었을 경우 이미지를 대신하여 나온 문구를 삽입해야 한다.

네이버 로고

alt속성 : alternate text의 약자로서 이미지가 나오지 않을 때 사용자가 이해할 수 있는 대체 문자를 말하며, 시각장애인이 스크린리더(화면낭독기)를 통해서 음성으로 이해할 수 있는 문자. 웹접근성을 위하여 반드시 삽입을 해야한다.