이미지 삽입하기

이미지를 삽입하는 <img> 태그

- <img> 태그에서 알아야 할 속성은 src와 alt 이다.

- src 속성은 이미지 파일의 경로를 지정하여 웹 브라우저에 알려주는 역할을 하며 반드시 있어야 한다.

- alt 속성에는 화면 낭독기 등에서 이미지를 대신해서 읽어 줄 텍스트를 입력한다.

 

<img src="images/tangerines.jpg" alt="레드향">
  <h1>레드향</h1>

 

 

웹에서 사용하는 대표적인 이미지 파일 형식

- 웹에서 사용하는 이미지는 인터넷으로 전송해야 하므로 파일 크기가 크지 않으면서 화질이 좋아야 한다.

- 주로 JPG(또는 JPEG) 나 PNG 파일 형식을 사용한다. 아이콘이나 로고처럼 작은 이미지일 경우 GIF 파일을 사용하기도 한다.

종류	설명
GIF	표시할 수 있는 색상 수는 최대 256가지이다. 다른 이미지 파일 형식에 비해 파일 크기가 작아서 아이콘이나 불릿 등 작은 이미지에 주로 사용한다.
JPG / JPEG	GIF 보다 색상과 명암을 다양하게 표현할 수 있다. 이미지를 수정하고 저장하는 작업을 반복할 경우 화질이 떨어질 수도 있다.
PNG	네트워크용을 개발된 파일 형식이다. 색상을 다양하게 표현하면서 투명한 배경도 만들 수 있어 웹에서 가장 많이 사용한다.

 

이미지 파일 경로를 나타내는 src 속성

- 이미지나 음악, 동영상 파일 등을 웹 문서에 삽입할 때에는 경로를 주의해야 한다.

- 경로란 현재 HTML 문서에서 이미지 파일이 있는 곳까지 어떻게 찾아가야 하는지 알려 준다.

- 이미지 파일의 경로를 정확하게 입력하지 않으면 이미지가 화면에 나타나지 않는다.

 

- 이미지 파일의 경로는 웹 문서 파일의 위치를 기준으로 정해진다. 웹 문서 파일과 이미지 파일이 같은 경로에 있다면 src 속성에는 간단히 이미지 파일의 이름만 적으면 된다.

<img src = "tangerines.jpg">

 

- 반면 웹 문서가 있는 폴더에 하위 폴더를 만들고 그 폴더에 이미지 파일이 있다면 src 속성에 하위 폴더와 함께 이미지 파일 이름을 적어야 한다.

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

 

이미지를 텍스트로 대신 설명하는 alt 속성

- 웹 문서에 이미지를 삽입할 때는 화면 낭독기와 같은 보조 기기에서 이미지를 대신해서 읽어 줄 텍스트를 함께 넣을 수 있다. 

- 또한 alt 속성을 지정하면 인터넷이 불안정하거나 이미지 파일 경로를 잘 못 넣었을 때 처럼 이미지를 제대로 표시할 수 없는 경우에 이미지 대신 텍스트가 나타난다.

<img src="images/tangerines.jpg" alt="레드향">
  <h1>레드향</h1>

 

- 웹 사이트에서 텍스트로 만든 메뉴나 로고, 또는 내용을 눈에 띄게 하기 위해 이미지로 처리하여 사용하기도 한다.

이럴 때 alt 속성에 들어 갈 텍스트는 이미지를 부연 설명하는 것이 아니라, 이미지 안에 포함된 텍스트를 알려 주어야 한다. 예를 들어 쇼핑몰 사이트의 메뉴를 이미지로 삽입할 경우 alt="메뉴"라고 입력해서는 안된다. alt="첫 화면", alt="신상품" 처럼 해당 이미지를 클릭했을 때 보여 줄 화면이나 이미지에 적힌 내용을 입력해야 한다.

 

 

이미지 크기를 조절하는 width, height 속성

- <img> 태그로 이미지 파일을 삽입하면 원래 이미지 크기대로 표시된다. 

- 만약에 이미지 파일은 수정하지 않고, 웹 브라우저 창에서 보이는 이미지 크기만 조절하고 싶다면 width, height 속성을 사용할 수 있다.

- width나 height 중 1개만 지정해도 나머지 속성은 비율을 자동으로 계산하여 나타낸다.

 

- width와 height에서 사용할 수 있는 단위는 퍼센트(%)와 픽셀(px)이 있다. 

- 픽셀을 사용할 때는 px 단위를 쓰지 않고 숫자만 입력한다.

종류	설명	예시
%	이미지 크기의 값을 퍼센트로 지정하면 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정한다.	width = "50%"
px	이미지 크기의 값을 픽셀로 지정하면 이미지의 너비나 높이를 해당 픽셀 크기만큼 표시한다.	width = "150"

 

<p>원래 크기의 이미지</p>
  <img src="images/salad.jpg" alt="레드향">
  <p>width="50%", height="50%"로 지정한 이미지</p>
  <img src="images/salad.jpg" alt="레드향" width="50%">  
  <p>width="150"으로 지정한 이미지</p>
  <img src="images/salad.jpg" alt="레드향" width="150">

 

---

출처 : Do it! HTML+CSS+자바스크립트 웹 표준의 정석 [고경희 (이지퍼블리싱)]