4. [HTML/CSS] img 태그,크기 관련 속성

img 태그

이미지를 웹 페이지에 삽입할 때 사용하는 태그입니다.

기본 사용법

<img src="이미지경로" alt="대체텍스트">

img 태그는 닫는 태그가 없는 빈 요소(empty element)입니다.

주요 속성

필수 속성

• src: 이미지 파일의 경로를 지정합니다.
• alt: 이미지를 표시할 수 없을 때 나타나는 대체 텍스트입니다.

크기 관련 속성

• width: 이미지의 너비를 지정합니다.- 픽셀(px) 단위로 지정- 예: width="300"
• height: 이미지의 높이를 지정합니다.- 픽셀(px) 단위로 지정- 예: height="200"

예시 코드

<img src="logo.png" alt="회사 로고" width="300" height="200">

주의사항

• width와 height 속성은 이미지의 원본 비율을 고려하여 설정하는 것이 좋습니다.
• 반응형 웹 디자인을 위해서는 CSS를 사용하여 크기를 조절하는 것을 권장합니다.
• 이미지가 로드되지 않을 경우를 대비해 항상 alt 속성을 명시하는 것이 좋습니다.