[프론트엔드][html5] 10. 이미지 태그 <img>

<img>

: 사진 등 이미지, 그림 등 시각적 요소를 의미하며, 웹페이지에서 이미지를 불러올 때 사용하는 태그이다.

글자와 같이 나열되는 성격으로, (inline level element)

이미지의 단락을 구분지을 때 사용한다.

 

태그 표현 방법

<img src="" alt="" />

<img src="이미지의 경로" alt="대체문자" />

 

 

- alt 

: Alternate(대체하다)의 줄임말로, 이미지를 대체하는 문자를 나타낸ㄴ다.

이미지는 외부의 주소이자 파일이기 때문에, 주소가 잘못되었거나 해당위치의 서버에 문제가 있다면 이미지를 가져오지 못할 수도 있다.

그러한 경우에 alt 속성을 이용해 해당 이미지를 대체하도록 한다. (웹표준)

 

 

- src="이미지의 경로"

경로를 인식하기 위해서는 현재 파일이 어디에서 작업되고 있는지가 중요하다.

 

현재 바탕화면(데스크탑)에 HTML5라는 폴더 안에서 작업을 하고 있다.

그 폴더 안에 img 라는 폴더를 생성해 주었고, 하위폴더에 이미지들이 저장되어 있는 상태이다.

 

 

src=" " 이 상태가 현재위치를 가리킨다.

이 상태에서 쌍따옴표(" ")안에  img를 입력하고 하위폴더를 가리키는 /(슬래쉬)를 입력하면,

vscode 같은 편집기에서는 폴더 안에 존재하는 이미지 파일들이 자동으로 보기 형태로 뜨게된다.

 

 

* 만약 상위 폴더로 이동하려고 한다면, ../ 를 입력하면 된다.

 

 

 

이미지 확장자

- jpg

: 압축률이 뛰어나며 가장 맣이 사용하는 저장방식으로

  호환성이 좋으며 용량이 적어 업로드가 쉬우며 가장 뛰어난 화질을 보장한다.

 

- png

: 압축률이 jpg와 비슷하게 뛰어나며, 투명층을 지원하여 투명한 상태의 이미지로 저장이 가능하다.

 

- gif

: 용량이 적으며 빠르게 압축이 가능하나,

다양한 색지원이 안되는 단점을 가지고 있어서 움직이는 이미지를 구성 시 사용한다. (256개 색상 지원)