HTML 이미지

웹 문서와 이미지

웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도

화질은 좋게 유지해야 하기 때문에 몇 가지 파일 형식만 사용할 수 있다.

<img> 태그

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

 

예시 

 

 

<img> 태그의 속성

• src 속성 - 이미지 파일 경로 
• 웹 문서 파일의 위치를 기준으로 이미지 경로 지정
• HTML과 이미지 파일이 같은 폴더에 있다면 src 속성에 파일 이름만 적음 
• images라는 하위 폴더에 이미지 파일이 있다면 하위 폴더까 지 같이 적음



• 웹 사이트에 있는 이미지도 주소를 알아내어 src 속성에 사용 할 수 있다.

 

<img> 태그의 속성

alt 속성

• 이미지를 설명하는 대체 텍스트 화면 낭독기에서 이미지 대신 대체 텍스트를 읽어 줌. (웹 접근성) 이미지를 표시할 수 없는 상황일 때 대체 텍스트 표시 텍스트 자체를 이미지로 만들었을 경우 대체 텍스트 안에 이미지 파일의 내용을 그대로 넣어주어야 함. 불릿 이미지나 작은 아이콘 등의 경우에는 alt=“ “ 처럼 지정

코드작성

 

출력

 

 

<img> 태그의 속성

• width, height 속성

• 이미지 크기 조정하기
• 이 속성을 사용하지 않으면 원래 이미지 크기대로 표시
• 이 속성을 이용해 화면에 표시하는 이미지 크기 조정, but 이미지 파일의 용량은 그대로

 

<figure>, <figcaption> - 이미지에 설명글 붙이기

<figure> 태그 : 설명글을 붙일 대상 지정

• 웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용 
• 설명 글을 표시할 때 <figure>로 먼저 묶어야 함 

 

<figcaption> 태그 : 이미지를 설명하는 대체 텍스트 

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