본문 바로가기
programming/web

html 이미지 picture 태그 사용 해상도별 여러 이미지 표시하기 using html picture tag

by 개코 - 개발과 코딩 2022. 6. 13.

html 웹페이지에서 picture 태그는 해상도에 따라 다른 이미지를 표시할 수 있다. css 스타일을 이용할 수도 있지만 picutre 태그의 source 태그에 media 속성을 추가하여 이미지를 분리할 수 있다. source 태그의 media 속성은 css 스타일의 media 태그와 사용법은 같다.

html 이미지 picture 태그 사용 해상도별 여러 이미지 표시하기
using html picture tag

반응형 웹사이트가 나온지는 꽤 오래되었고, 지금도 많이 사용되는 기술이며 보편적이기도 하다.

해상도에 따라 이미지를 화면에 다르게 표시하도록 하거나 혹은 다른 이미지를 화면에 표시하도록 할 때 picutre 태그를 이용할 수 있다.

picture 태그는 soure 태그와 함께 사용하여 이미지에 직접 media 속성을 추가할 수 있다.

media 속성은 반응형에서 자주 나오기도 하는데 해상도의 크기에 따라 웹페이지의 형태를 최적화하도록 한다.

해상도별 이미지 표시하기

반응형 웹에서 자주 사용되는 것이 media 쿼리이다.

picture 태그에는 source 태그를 추가하여 media 속성을 추가할 수 있는데 이 속성을 이용하면 기기별 해상도에 따라 이미지를 다르게 표현할 수 있다.

soure 태그에 추가되는 media 속성은 css 스타일에서 사용하는 것과 같다..

media 속성의 의미는 다음과 같다.

min-width : 최소 너비 크기
max-width : 최대 너비 크기

min-height : 최소 높이 크기
max-height : 최대 높이 크기

아래는 source 태그에서 사용하는 media 속성을 보여준다.

마지막에 있는 img 태그는 해상도에 맞는 이미지가 없을 경우 웹브라우저에 표시되는 기본값이다.

<picture>
	<source media="media 속성" srcset="이미지 주소">
    <source media="media 속성" srcset="이미지 주소">
    <img src="기본 이미지 주소">
</picture>

샘플코드

위의 내용으로 실제로 이미지를 표현해 본다.

이미지는 3가지를 표현하고 있다.

첫번째 이미지는 화면에 표시되는 해상도의 너비가 1024px 이하이고, 800px 초과할 때 표시한다.

두번째 이미지는 화면에 표시되는 해상도의 너비가 800px 미만일 때 표시한다.

세번째 이미지는 기본값으로 첫번째와 두번째의 해상도에 맞지 않는 경우 화면에 표시한다.

<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>

<!-- html 문서 시작 -->
<html>
    
	<!-- 문서 정보 -->
	<head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style></style>
    </head>
    <!-- // -->
    
    <!-- 문서 내용 -->
	<body id="bgBody">
        <picture>
            <source media="(min-width: 800px) and (max-width: 1024px)" srcset="image-650.jpg">
            <source media="(max-width: 799px) " srcset="image-465.jpg">
            <img src="image-default.jpg">
        </picture>
    </body>
    <!-- // -->

</html>
<!-- // -->

세가지 경우에 대해 크롬의 개발자도구를 이용하는 것이 편하다.

개발자도구는 F12를 이용하여 열 수 있으며, 기기 툴바 변환을 이용하여 해상도를 조절하며 이미지가 변환되는 것을 볼 수 있다.

결과 화면을 보자.

너비 해상도를 변경하면 바로 적용되어 이미지가 변경되는 것을 볼 수 있다.

반응형

댓글