HTML 이미지 삽입을 할 수 있는 <img>태그에 대해 알아보자

<img>태그

 <img>태그는 여는 태그로만 작성할 수 있으며(싱글태그) 자신의 내용과 앞뒤 태그의 내용을 같은 라인에 출력하는(인라인태그) 태그다. <img>태그의 경우 이미지 소스에 대한 경로를 지정하여 불러올 수 있는데 경로를 지정하는 방식은 상대경로지정방식과 절대경로지정방식으로 나뉜다.

 

<img>태그 기본형식

• <img src="" alt="" width="" height=""> 
  src의 경우 이미지의 경로, HTML문서에서 이미지 파일까지 찾아가는 경로를 작성하는 칸이다. src 속성으로 지정할 수 있는 이미지 종류는 gif, png, jpg, svg 가 있다. alt는 이미지 대한 정보가 작성되어있는 속성으로 소리내어 읽어주는 기능, 사진이 없는 경우 출력되는 이미지 설명 등에서 사용된다. width는 이미지의 폭, height는 이미지의 높이를 설정할 수 있는 속성이다. 

 

<img>태그 경로지정방식

상대경로지정방식

 현재 활성화 된 파일의 위치를 기준으로 소스 파일의 경로를 찾아들어가는 방식으로 두가지의 특수한 키워드를 사용하여 밖의 폴더 혹은 안의 폴더로 접근이 가능하다. 

키워드	의미
.	현재폴더
..	상위폴더
/	디렉토리 depth

 

 예를 들어서, 'selfstudy'라는 폴더에 현재 작성하는 파일, dessert.jpg 파일, img폴더(food.jpg파일 있음)가 있고 'outimg'폴더에 tree.jpg파일이 있다고 가정해보자. 현재 작성하는 파일과 같은 폴더 내에 있는 사진은 이름만 사용하여(dessert.jpg) 불러올 수 있고, 같은 폴더 내의 폴더에 있을 경우 폴더명을 이용하여 사진을 불러올 수 있다(./img/food.jpg 또는 img/food.jpg). 다른 폴더에 있을 경우 상위폴더 키워드를 사용하여 사진을 불러올 수 있다(../outimg/tree.jpg).

절대경로지정방식

 맨 상위의 '/'는 root 디렉토리가 되며 모든 파일 혹은 디렉토리를 찾아 들어가는 기준이 된다. 즉 최상위 폴더를 기준으로 소스 파일 경로를 찾는다. 예제의 경우에는 최상위 루트 폴더인 HTML부터 파일을 찾아 들어가는 모습을 볼 수 있다.