HTML 이미지 삽입 방법 | img 태그 사용 방법

웹사이트에 이미지를 삽입하는 방법은 다양하게 있지만 html 태그를 이용해서 이미지를 어떻게 넣는지 알아보도록 하겠습니다.

 

 

 

 

<img src="">

<img> 태그는 html에서 이미지를 삽입할 수 있는 태그입니다.

사용하시는 에디터에 따라 다르시겠지만 자동완성이 되는 에디터를 사용하신다면 img 태그 뒤에 src가 바로 붙어져 있는 것을 확인할 수 있습니다. 일단 이 상태에서 웹사이트에 어떻게 나오는지 확인해보겠습니다.

 

 

 

그러면 아무런 이미지가 나오지 않습니다. img 태그 안에 있는 src 속성값이 비어있기 때문에 아무런 이미지가 보이지 않는 것인데요. <img src="________">에서 src="" 영역에 넣고자 하는 이미지의 경로를 저 부분에 넣어주시면 됩니다. src는 source의 약자로 경로를 의미합니다.

 

 

 

 

저는 [img] 폴더 안에 있는 [test1.jpg] 이미지 파일을 웹사이트에서 불러오도록 하겠습니다.

 

 

 

 

이미지 경로를 설정하는 방법은 2가지가 있습니다. [절대경로]와 [상대경로]로 설정이 가능합니다.

절대경로는 [html_img/img/test1.jpg]처럼 고유한 경로를 지정해주는 것이고,

상대경로는 현재 index.html 파일을 기준으로 test1.jpg 파일을 찾아가는 형식입니다. index.html을 기준으로 보면 [./img/test1.jpg] 와 같은 형식이 됩니다.

절대경로와 상대경로는 확실한 차이가 있기 때문에 잘 확인하시고 사용하시는 것이 좋습니다. 보통 상대경로로 이미지 경로 설정해주시는 것이 좋습니다.

 

 

 

그러면 이번에는 웹사이트에 이미지가 잘 나오는 것을 확인할 수 있습니다. 이미지 불러오기는 성공했지만 제가 원했던 크기의 이미지는 아닌데요. 바로 이미지 태그에 경로만 지정을 하고 아무런 속성을 추가하지 않았기 때문에 이미지 원본 크기대로 보여지게 된 것입니다. 원하시는 사이즈대로 보여지기를 원하신다면 이미지 사이즈를 설정해주시면 됩니다.

 

 

 

 

일단 이미지 너비값을 설정해보겠습니다. [width]는 가로값을 의미하며 이미지 태그에 바로 같이 써주셔도 됩니다. 별도의 css를 작성하시는 중이셨다면 css에서 해당 태그 속성값을 설정할 수도 있지만 이렇게 인라인으로 바로 속성값 설정도 가능합니다. <img>태그에 같이 [width="원하는 값]을 적어주시면 됩니다. 저는 일단 500px로 설정해보겠습니다.

 

 

 

그럼 이전에 보셨던 이미지와는 달리 이번에는 width 값이 500px로 설정된 이미지가 보여지게 됩니다. 세로 사이즈는 따로 설정하지 않아서 가로 사이즈에 따라 비율에 맞춰 자동 조절이 되었습니다.

 

 

 

이번에는 높이값도 설정해보겠습니다. 높이값은 [height]로 width와 동일하게 설정해주시면 됩니다.

 

 

 

height 값을 제가 임의로 설정을 해서 이전에 보았던 이미지와는 달리 높이값을 줄어든 것을 확인할 수 있습니다. 그냥 제가 임의로 크기값을 설정한 거라 현재는 깨져보이게 됩니다.

 

 

 

<img> 태그에는 중요한 속성이 있습니다. 바로 [alt] 속성입니다. 웹접근성을 맞추기 위해서 이미지를 불러올 수 없는 경우에 대체 텍스트를 제공해주어야 합니다. 이 역할을 하는 속성이 바로 [alt] 입니다. 불러올 이미지 파일이 없어졌거나, 이름이 바뀌었거나 등의 이유로 파일을 찾을 수 없는 경우 이미지가 X표시로 나오는 거 보신 적 있으실겁니다. 아무런 설명 없이 이미지가 표시되지 않으면 당황스럽기도 한데요. 그런 경우를 대비해서 대체 텍스트를 제공하는겁니다. [alt=""]를 이미지 태그에 추가해주시고 여기에 해당 이미지에 대한 설명을 적어주시면 됩니다.

 

 

 

위와 같이 이미지를 불러올 수 없는 경우에는 미리 설정해두었던 대체 텍스트가 보여지게 됩니다.

 

 

 

참고로, 위에서 이야기했던 절대경로나 상대경로를 통해서 폴더에 있는 이미지를 불러올수도 있지만 웹사이트에 있는 이미지의 주소를 복사해서 바로 src 속성으로 경로를 넣어주셔도 동일하게 이미지를 불러오는 것을 확인할 수 있습니다.

 

만약 이미지 태그를 사용했는데 이미지가 안 나온다 하신다면 img 태그에서 이미지 경로가 올바른지 확인해주세요. 보통 경로가 잘못되어서 이미지가 나오지 않는 경우가 많이 있습니다.