[컴퓨터언어] 이미지 태그 및 속성 (9)

홈페이지를 만들려면 이미지를 삽입할 줄 알아야 합니다. 이미지를 삽입하여 사용자가 홈페이지를 이용하는데 불편함이 없도록 해야 하기 때문입니다. 오늘은 이미지 태그를 삽입하는 방법에 대해 알아보겠습니다. 함께 사용할 수 있는 속성에 대해서도 알려드리겠습니다.

 

이미지 태그 및 속성

1. 이미지 넣기 : <img>태그, src속성

2. 컴퓨터에게 이미지 설명하기 : alt속성

3. 이미지 크기 조절하기 : width, height 속성

4. 이미지 설명글 넣기 : <figure>, <figcaption> 태그

 

이미지 태그에 관해서는 위의 내용만 알아도 무방합니다. 좀 더 자세하게 설명해드리겠습니다.

---

[1] 웹에서 사용하는 이미지 형식

1. GIF

: 파일 크기가 작은 편, 투명한 배경이나 움직이는 이미지 표현에 사용합니다.

2. JPG/JPEG

: 다양한 색상과 명암을 표현, 여러번 저장 시 화질 저하 문제가 있습니다.

3. PNG

: 투명한 배경, 다양한 색상에 사용합니다. 가장 최신 형식입니다.

 

웹에서는 주로 위의 3가지 이미지 형식을 사용합니다. 각자 장단점이 존재하기 때문에 상황에 맞게 형식을 결정해주시면 됩니다.

 

[2] 이미지 넣기 : <img>태그

이미지를 삽입하기 위해서는 <img> 태그를 사용합니다. 이때, 이미지를 지정하는 경로를 꼭 써주어야 합니다. 그렇지 않으면 컴퓨터가 이미지를 찾지 못하기 때문입니다. 경로는 src속성을 사용해서 알려줍니다. 즉, 이미지를 넣기 위해서는 <img> 태그와 src속성 2가지가 필요합니다.

src속성은 작성 중인 html문서가 있는 폴더를 기준으로 "\"와 ".."를 사용하여 경로를 작성합니다. \과.. 은 아래와 같은 의미입니다.

# 경로를 설정하는 방법
1. \ : 한 단계 아래로 내려간다. (하위폴더)
2. .. : 한 단계 위로 올라간다. (상위폴더)

#예시 : <img src="folder1..folder2\image.png">

이미지를 넣는 태그와 속성의 기본형은 다음과 같습니다. ([속성]은 있을 수도 있고 없을 수도 있는 속성을 의미합니다.)

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

 

 

[3] 화면낭독기를 위해 이미지 설명하기 : alt 속성

이미지를 설명하는 대체 텍스트를 작성하는 속성입니다. 화면낭독기를 위한 기능이기도 하지만 인터넷이 끊겨서 이미지가 보이지 않을 때도 대체 텍스트를 통해 무슨 이미지인지 설명이 가능합니다. 특별한 의미 없이 단지 화면을 꾸미기 위해 사용한 이미지의 경우에는 alt속성이 굳이 쓰지 않으셔도 됩니다. 기본형은 다음과 같습니다.

<img src="경로" alt="설명">

 

[4] 이미지 크기 조절하기 : width, height 속성

width는 이미지 넓이를 height는 이미지 높이를 조절할 수 있는 속성입니다. 이미지의 전체 파일 용량은 변하지 않습니다. 단지 이미지를 작게 혹은 크게만 표시해줍니다. 그렇기 때문에 작은 이미지를 키울 경우 화질이 깨질 수 있다는 단점이 있습니다. 기본형은 다음과 같습니다.

<img src="경로" width="숫자" height="숫자">

 

[5] 이미지를 설명하는 글 넣기 : <figure>, <figcaption> 태그

alt속성은 컴퓨터에게 설명하는 글이었다면, <figure>, <figcaption> 태그는 사람에게 설명하는 글입니다. 이 태그는 이미지에 국한되지 않고 오디오나 비디오 같은 멀티미디어 파일이나 표, 소스 코드 등 다양하게 사용할 수 있습니다. 두 태그의 자세한 설명은 다음과 같습니다.

<figrue> : 웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용

<figcaption> : 설명 글을 붙일 때 사용

그렇기 때문에 설명글을 넣으려면 <figrue> 태그로 설명할 요소를 묶어준 후 <figcaption> 태그를 사용해 설명 글을 넣습니다. <figure> 태그는 혼자 사용하면 의미 없는 소스가 되어버리기 때문에 설명글을 넣지 않을 경우 굳이 쓰지 않습니다. 기본형은 다음과 같습니다.

<figure>
	<img scr="경로">
	<figcaption> 설명글 </figcaption>
</figure>

---

지금까지 웹에서 이미지를 넣고 수정할 수 있는 태그 및 속성에 대해서 알아보았습니다. 어렵지 않으니 소스코드를 비주얼 코드에 직접 입력해보면서 실력을 키워보세요. src속성을 이용해서 경로를 설정하는 것은 글로만 이해하기 쉽지 않으니 직접 해보시는 것이 좋을듯합니다.