[HTML] 이미지 삽입하기

✨이미지를 삽입하는 <img> 태그

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

• src 속성 : 이미지 파일 경로
• alt 속성
  • 이미지를 텍스트로 대신 설명
  • 이미지를 제대로 표시할 수 없는 경우에 이미지 대신 이 텍스트가 나타남
  • alt 속성에 들어갈 텍스트는 이미지를 부연설명하는 것이 아니라 이미지 안에 포함된 텍스트가 무엇인지를 알려 주어야 한다.
    ex) 쇼핑몰 사이트의 메뉴를 이미지로 삽입할 경우 alt = "메뉴" 라고 입력해서는 안 된다.
    alt = "첫 화면" , alt = "신상품" 처럼, 해당 이미지를 클릭했을 때 보여 줄 화면이나 이미지에 적힌 내용을 입력해야 한다.
    
    

   💡 이미지 크기를 조절하는 width, height 속성

• 이미지 파일은 수정하지 않고, 웹 브라우저 창에서 보이는 이미지 크기만 조절하고 싶을 때
• width : 이미지의 너비 지정
• height : 이미지의 높이 지정
• width 와 height 둘 다 사용해도 되고, 둘 중에 하나만 사용해도 된다.
  • 둘 중 하나만 지정해도 나머지 속성은 비율을 자동으로 계산하여 나타낸다.
  • % vs px

    • 종류	설명	예시	코드 풀이
      %	현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정	width="50%"	이미지를 웹 브라우저 창 너비의 절반만큼 표시하라
      px	이미지의 너비나 높이를 해당 픽셀 크기만큼 표시	width="150"	웹 브라우저 창의 크기와 상관없이 크기를 150px로 고정한다.

출처: Do it! HTML+CSS+자바스크립트 웹 표준의 정석 (고경희, 이지스퍼블리싱)