[HTML] 4-4. 이미지 삽입하기

less than 1 minute read

4-4. 이미지 삽입하기

웹 문서에 이미지를 삽입할 때는 < img > 태그를 사용하는 것이 가장 기본적입니다.

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

src 속성: 이미지 파일의 경로를 지정. 절대경로 또는 상대경로로 지정한다.
alt 속성: 화면 낭독기 등에서 이미지를 대신해서 읽어줄 텍스트. 해당 이미지를 클릭했을 때 보여 줄 화면이나 이미지에 적힌 내용을 입력하는 것이 좋다.

👍 예시

<img src="images/tangerines.jpg" alt="레드향">

이미지 크기를 조정하는 width, height 속성

width는 이미지의 너비를, height는 이미지의 높이를 지정하며, 둘 다 사용하거나 둘 중 하나만 사용할 수 있습니다.

둘 중 하나만 지정해도 나머지 속성은 비율을 자동으로 계산하여 나타냅니다.

두 속성을 지정할 때 사용할 수 있는 단위로는 ‘퍼센트(%)’ 와 ‘픽셀(px)’ 이 있습니다. 픽셀을 사용할 때는 px를 쓰지 않고 숫자만 입력합니다.

이미지 크기를 표현하는 단위
종류	설명	예시
%	이미지 크기의 값을 퍼센트(%)로 지정하면 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정한다.	width = "50%"
px	이미지 크기의 값을 픽셀(px)로 지정하면 이미지의 너비나 높이를 해당 픽셀 크기만큼 표시한다.	width = "150"