이미지 표현을 위한 HTML img 태그

IMG 태그란?

웹페이지에 이미지(image)를 넣을 수 있는 태그입니다. IMG 태그는 self-closing 태그여서 닫는 태그가 필요하지 않습니다. 대부분의 HTML 태그가 쌍으로 존재하지만, 일부 태그는 단독으로 존재합니다.

 

이미지가 없는 웹사이트를 찾기가 힘들 정도로 HTML에서 이미지 태그는 필수인 것 같아요.

 

사용법

<img src="image.jpg" alt="이미지 설명" >

• img는 태그, src,alt는 태그 내 속성입니다
• src 속성(source)에는 이미지 파일이 있는 위치를 입력합니다
• alt 속성에는 이미지가 보이지 않을 때 나올 텍스트를 입력합니다

alt 속성은 꼭 입력하지 않아도 이미지 파일을 보이는데 문제는 없어요. 하지만 검색엔진이 웹페이지의 완성도, SEO 기준을 볼 때 중요하기 때문에 넣어주면 좋습니다.

 

코드 작성

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Korea-Seoul-Blue_House_%28Cheongwadae%29_Reception_Center_0688%269-07_cropped.jpg/700px-Korea-Seoul-Blue_House_%28Cheongwadae%29_Reception_Center_0688%269-07_cropped.jpg" alt="청와대">

 

저는 wikipedia에서 청와대를 찾아서 이미지 URL을 넣어봤습니다.

 

결과 확인

See the Pen IMG by 40's Programmer (@40sProgrammer) on CodePen.

 

IMG 태그의 다양한 속성

태그는 다양한 속성을 가지고 있어 이미지의 표현과 동작을 제어할 수 있습니다. width와 height 속성을 사용하여 이미지의 크기를 조정할 수 있으며, border 속성으로 이미지에 테두리를 추가할 수도 있습니다. 또한, title 속성을 사용하여 이미지에 툴팁을 표시할 수 있습니다. 

 

사용법

<img src="image.jpg" alt="이미지 설명" width="300" height="200" border="1" title="이미지 제목">

• width는 너비(가로) 길이, height는 높이(세로) 길이를 정하는 속성입니다
  • 숫자를 넣으면 일반적으로 px(픽셀)을 의미합니다
  • %를 넣으면 전체 화면 대비 비율을 뜻합니다
• border는 테두리를 의미하며, 숫자는 px입니다. 숫자가 커질수록 테두리가 두꺼워져요
• title은 이미지의 제목을 뜻합니다. 이미지에 가만히 커서를 대고 있으면 나오는 툴팁이에요

 

예시

See the Pen IMG by 40's Programmer (@40sProgrammer) on CodePen.

 

IMG 태그 안에 속성을 넣어서 제어할 수도 있지만 CSS를 활용해서 이미지 스타일링을 할 수도 있습니다.