HTML문서에 사진을 불러오고 싶어요 (img 태그)

html에 사진을 불러올 때는 img/ 태그를 사용해 줍니다.

정확히는 다음과 같습니다.

<img src="불러올 사진이 있는 폴더의 이름/사진의 이름.확장자 />

불러오고 싶은 사진이 들어있는 폴더 이름이 bundes , 사진의 이름은 schalke04, 사진의 확장자는 png라고 하면 img/ 태그는 다음과 같이 작성합니다.

<img src="bundes/schalke04.png" />

폴더 안에 있는 또 다른 폴더에서 사진을 불러와야 한다면

<img src="football/bundes/schalke04.png" />

위와같이 폴더/폴더/이미지.확장자 식으로 파일을 불러 오시면 됩니다.

폴더 안에 있지 않은 경우라면 바로 이미지 이름.확장자로 불러오실 수 있답니다.

이미지를 잘 확인하시고

폴더이름/사진이름.확장자

잘 기억하시면 크게 어려운 점 없이 사진을 html상에 올리실 수 있으실 겁니다.

이미지가 어떤 확장자를 가졌는 지 확인하시려면 사진 파일에 마우스 커서를 올려두시면 되시겠습니다.

이미지의 확장자가 흰색 레터박스 안에 있는 것을 확인하실 수 있습니다.

마치기 전에 확장자에 대해 부연 설명을 드리자면,
크게 세 가지로 구분 할 수 있습니다.

png, jpg, gif가 대표적인 이미지의 확장자들인데요,

이 중 jpg가 가장 보편적으로 사용되며 커버할 수 있는 색상의 범위가 가장 넓습니다.

png는 투명한 배경에 이미지를 올릴 수 있는 확장자입니다.

gif는 움직이는 애니메이션 기능을 제공하며 여러분들이 자주 보시는 움짤이 바로 이 gif 확장자를 통해 제공되는 것입니다.

오늘도 읽어주셔서 감사합니다. 더 유익한 글로 다시 뵙겠습니다.