정보실

웹학교

정보실

html HTML`img` 태그

본문

img 태그를 사용하여 이미지를 표시 할 수 있습니다.


이 태그는 이미지 소스를 설정하는 데 사용하는 src 속성을 허용합니다.

<img src="image.png" />


다양한 이미지를 사용할 수 있습니다. 가장 일반적인 것은 PNG, JPEG, GIF, SVG 및 더 최근에는 WebP입니다.


HTML 표준에는 이미지를 설명하기 위해 alt 속성이 있어야 합니다. 화면 판독기와 검색 엔진 봇에서도 사용됩니다.

<img src="dog.png" alt="A picture of a dog" />

너비 및 높이 속성을 설정하여 요소가 차지하는 공간을 설정하여 브라우저가 해당 요소를 처리 할 수 ​​있고 완전히 로드 될 때 레이아웃을 변경하지 않도록 할 수 있습니다. 픽셀로 표시되는 숫자 값이 필요합니다.

<img src="dog.png" alt="A picture of a dog" width="300" height="200" />


srcset을 사용한 반응형 이미지 


srcset 속성을 사용하면 기본 설정에 따라 브라우저가 픽셀 밀도 또는 창 너비에 따라 사용할 수 있는 반응 형 이미지를 설정할 수 있습니다. 이런 식으로 페이지를 렌더링 하는 데 필요한 리소스 만 다운로드 할 수 있습니다. 예를 들어 휴대 기기에 있는 경우 더 큰 이미지를 다운로드하지 않아도 됩니다.


다음은 4 가지 화면 크기에 대해 4 개의 이미지를 추가로 제공하는 예입니다.

<img src="dog.png"
	alt="A picture of a dog"
	srcset="dog-500.png 500w,
	  		 dog-800.png 800w,
			 dog-1000.png 1000w,
			 dog-1400.png 1400w">

srcset에서 w 측정 값을 사용하여 창 너비를 나타냅니다.


그렇게하기 때문에, size 속성도 사용해야합니다 :

<img src="dog.png"
	alt="A picture of a dog"
	sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
	srcset="dog-500.png 500w,
	  		 dog-800.png 800w,
			 dog-1000.png 1000w,
			 dog-1400.png 1400w">

이 예제에서 sizes 속성의 (max-width : 500px) 100vw, (max-width : 900px) 50vw, 800px 문자열은 여러 조건을 쉼표로 구분하여 뷰포트와 관련된 이미지의 크기를 나타냅니다.


미디어 조건 max-width : 500px는 뷰포트 너비와 관련하여 이미지의 크기를 설정합니다. 즉, 창 크기가 500px 미만이면 이미지를 창 크기의 100 %로 렌더링 합니다.


창 크기가 더 크지만 <900px이면 이미지를 창 크기의 50 %로 렌더링 합니다.


더 큰 경우 800px로 이미지를 렌더링 합니다.


vw 측정 단위는 새로운 것이 될 수 있습니다. 간단히 말해 1 vw는 창 너비의 1 %이므로 100vw는 창 너비의 100 %입니다.


srcset 및 점진적으로 작은 이미지를 생성하는 유용한 웹 사이트는


https://responsivebreakpoints.com/.



페이지 정보

조회 64회 ]  작성일19-08-20 10:07

웹학교