1. 웹 문서와 이미지

웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질은 좋게 유지해야 하기 때문에 몇 가지 파일 형식만 사용할 수 있다.

예시) gif, jpg/jpeg, png

2. 이미지

img 태그

웹 문서에 이미지를 삽입할 때 사용

<img src="경로" [속성="값"]>

img 태그의 속성

• src 속성

  • 이미지 파일 경로
  • 웹 문서 파일의 위치를 기준으로 이미지 경로 지정

  예시

  <img src="lotus.jpg">
  <img src= "images/lotus.jpg">
  

• alt 속성

이미지를 설명하는 대체 텍스트

화면 낭독기에서 이미지 대신 대체 텍스트를 읽어 줌.(웹 접근성)

이미지를 표시할 수 없는 상황일 때 대체 텍스트 표시

<img src="home.jpg" alt="홈으로 가기>

• width, height 속성

  • 이미지 크기 조정

  <img src="images/guadians.jpg" width="250" height="250>
  

• figure, figcaption

  • figure : 설명 글을 붙일 대상 지정
  • figcaption: 이미지를 설명하는 대체 텍스트

  <figure>
  	<img src="lotus.jpg">
  	<figcation> 맛있는 로투스</figcation> 
  <figure>
  

3. 링크 만들기