[HTML] 이미지 표시하기

img 태그

• 이미지를 표시할 때 사용
• 단일 태그
• 콘텐츠를 적지 않고 표시할 이미지에 대한 정보를 속성으로 지정
  
  
• <img src=”표시할이미지파일” alt=”이미지설명” />

 

src 속성

• 표시할 이미지의 위치 정보와 파일명을 입력받는 속성
• 이미지의 url을 입력받음
• 서버에 위치한 이미지 파일 / 내 컴퓨터에 저장된 이미지 파일 ≫ 모두 가능

url 작성 방법

1. 내 컴퓨터에 있는 이미지 파일
   
   • 같은 파일 내에 images 파일 생성 후 사진 추가
   • "images/이미지파일이름"
2. 서버에 위치한 이미지 파일
   • 서버에서 원하는 이미지 파일의 주소 복사
   • "복사된이미지파일주소"

 

alt 속성

• alternative의 약자 ≫ 대체 텍스트 역할
• 이미지가 로딩되기 전 / 이미지 로딩에 실패한 경우 ≫ 이미지 대신 대체 텍스트가 표시됨
• 올바른 url 지정 후 alt 태그 지정하면 대체 텍스트는 나타나지 않음

 

이미지 크기 조절

• 너비와 높이 각각 지정 ≫ 단위 없이 정수 값만 !
• 너비와 높이는 각각 픽셀(px) 단위로 적용
  • 지정하지 않은 경우 ≫ 원본 이미지 크기로
  • width만 지정 ≫ width에 맞춘 비율로
  • height만 지정 ≫ height에 맞춘 비율로
  • 둘 다 지정 ≫ 사이즈에 맞게 비율도 변경됨
• <img src="표시할이미지파일" alt="이미지설명" width="너비값" height="높이값" />