<img> : 이미지 삽입하기

이미지는 저장 위치에 따른 경로 지정이 조금 차이가 있다.

 

1. src 속성 : 내 컴퓨터의 이미지 파일 경로 지정

 

내 컴퓨터에 저장된 이미지 파일인 경우에 그 경로를 지정하기 위해서는 이미지 파일이 저장된 위치 파악이 중요하다.

 

👉 웹문서 파일과 이미지 파일이 같은 위치에 있을 경우

 

이 경우는 간단히 이미지 파일 명을 img 태그의 src 속성에 써 주기만 하면 된다.

예를 들어, index.html 웹문서 파일과 같은 위치에 dog.jpg 이미지 파일이 있다면 

<img src="dog.jpg">

위와 같이 표현하면 된다.

 

👉 이미지 파일이 웹문서 파일의 하위 문서에 있을 경우

 

만약 index.html 웹문서 파일이 있는 폴더 안에 이미지만 따로 관리하는 images 라는 파일이 있다고 가정해보자.

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

위와 같이 하위 폴더명을 써주고 /를 통해 구분하여 준다.

한 단계 아래로 이동 : /
한 단계 위로 이동 : ..

이렇게 내 컴퓨터에 있는 이미지 파일을 사용하는 경우에 다른 사용자들도 이를 공유하기 위해서

웹문서 파일과 함께 이미지 파일이 있는 폴더 또한 전달해 주어야 같은 경로로 찾아가 이미지 파일을 확인할 수 있다.

 

 

2. src 속성 : 웹 상의 링크를 복사해 이미지 경로 지정하기

 

웹 상의 이미지를 사용하기 때문에 별다른 파일 공유는 필요하지 않지만,

입터넷에 접속할 수 있는 상태여야 하며, 저작권 등에도 신경을 써야 한다.

 

이미지의 주소를 복사하여 해당 주소를 src 속성에 작성하기만 하면 된다.

<img src="http://www.img.com">

크롬 사용 시 : 원하는 이미지 마우스 오른쪽 버튼 - [이미지 주소 복사] 클릭
인터넷 익스플로러 사용 시 : 원하는 이미지 마우스 오른쪽 버튼 - [속성] 클릭 - 주소 복사

 

 

3. alt 속성 : 이미지 설명해 주는 대체 텍스트

 

👉 화면 낭독기 사용 시

      시각 장애인들은 이미지에 대한 내용을 추가하지 않으면 이미지에 대한 이해가 힘들기 때문에

      화면 낭독기가 이미지에 대한 내용을 읽어낼 수 있도록 추가하는 것이다.

 

👉 이미지를 제대로 표현할 수 없는 상황 시

      인터넷 속도가 느리거나 하는 등의 상황으로 이미지가 제대로 표현되지 않을 수 있다.

      이러한 경우 텍스트가 대체로 표현되어 이 자리에 표현되었어야 하는 이미지에 대해 간략한 설명을 해 주는 것이다.

 

특별한 의미가 없는 이미지일 경우에는 alt="" 와 같이 표현할 수도 있다.

<img src="dog.jpg" alt="강아지 사진">
<img src="dog.jpg" alt="">

 

 

4. width, height 속성 : 이미지 크기 조정하기

 

width 는 이미지의 가로 크기를, height 는 이미지의 세로 크기를 조정할 수 있는 속성이다. 

다만, 해당 속성으로 이미지를 임의로 조정하면 화질이 상대적으로 좋지 않을 수 있다.

<img src="dog.jpg" width="150" height="150" alt="강아지 사진">

 

 

5. <figure>, <figcaption> 속성 : 이미지에 대한 설명 글 추가하기

 

표에서는 aria-describedby 속성을 이용하여 표에 대한 설명을 추가했듯이

이미지에서는 figure 속성을 이용하여 설명할 수 있다.

figure 와 함께 사용하면 설명과 이미지를 하나로 묶어 사용할 수 있기 때문에 관리에도 용이해진다는 장점이 생긴다.

<figure>
	<img src="dog.jpg" width="150" height="150" alt="강아지 사진">
    <figcaption>
    	강아지(dog)
    </figcaption>
</figure>