HTML.10.Image

<img>태그를 활용해 이미지 삽입하기

##이미지는 기술적으로 웹 페이지에 삽입되는게 아니라 링크됨

<img src="이미지 파일 경로" alt="대체용 텍스트">

 

src속성: 이미지 파일의 경로를 지정

1)  웹 문서 파일과 이미지 파일의 경로가 동일

<img src="html 로고.png" alt="대체 텍스트">

2) 하위 폴더에 이미지 파일이 있는 경우

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

3) 다른 웹사이트에 이미지 파일이 있는 경우

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

 

alt 속성: 대체 텍스트

화면 낭독기에서 이미지를 대신해서 읽어 줄 텍스트/ 이미지가 로딩되지 않았을 경우 표시할 텍스트

 

width, height 속성

이미지의 크기를 조절

width: 이미지의 너비 지정

height : 이미지의 높이 지정

둘 중 하나만 지절해도 나머지 속성의 비율을 자동으로 계산함

>>스타일은 외부 CSS파일이나 내부 <style> 태그를 통해 지정하는 것을 권장함