[HTML] <img>요소와 JPEG, PNG, GIF의 차이

index.html에 blog.jpeg 이미지를 표시하기 위해서는

이 이미지의 위치를 index.html로부터의 상대경로로 표시해주어야합니다.

​

만약 해당 이미지가 서버에 올려져있다면

"http://~~~/images/blog.jpeg" 처럼 url로 절대경로를 표시해줘도 됩니다.

​

상대경로로 표시해보겠습니다.

​

​

 

<img src="images/blog.jpeg">

​

​

위의 img 요소를 해석하면 다음과 같습니다.

images폴더안에 있는 blog.jpeg 이미지를 보여줘라.

 

​

​

이미지를 표시할때 사용하는

<img>요소는 인라인 요소이기때문에 혼자서 쓰면 안됩니다.

또한 컨텐츠가 필요없는 빈 요소입니다.

​

다른 소스들까지 함께 입력을 하자면

다음과 같이 입력되어야합니다.

 

인라인 요소이기때문에 자립할 수 없기때문에 p태그 안으로 들어가 있습니다.

또한 <> 뒤에 컨텐츠가 따로 붙지 않습니다.

​

​

img요소에 대해서는 이정도 알아보고

jpeg, png, gif 와 같은 웹에서 사용되는 이미지 형식에 대해서도 알아보겠습니다.