TIL 18 :: 반응형 이미지, 비디오

이미지 포맷의 종류

GIF(Graphics Interchange Format) : 256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 듭니다. 투명은 표현 가능하지만 그 정도를 조절하는건 불가능하며, 때문에 그림자 표현도 불가능합니다. 애니메이션 처리가 가능합니다.

JPG/JPEG (Joint Photographic Expert Group image): 매우 화소가 높고, 용량도 적지만 투명처리가 불가능합니다.

PNG (Portable Network Graphics) : 왠만한 컬러는 모두 표현 가능하여 투명 영역을 처리 가능하지만 용량이 큽니다.

SVG (Scalable Vector Graphics) : SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능합니다.

WebP (Web Picture Format) : 압축률이 좋다고 소문난 JPEG 이미지에 비해 무려 용량은 70% 수준으로 낮지만 더 뛰어난 색상을 지원하는 포맷입니다. 그럼에도 불구하고 PNG 처럼 투명도 표현 가능하며, GIF 처럼 애니메이션 표현도 가능한 만능 포맷입니다.

AVIF (AV1 Image File Format) : WebP 처럼 뛰어난 색상표현, 애니메이션 지원, 투명도 표현 모두 가능하며 JPEG 이미지의 50% 수준인 용량을 자랑하는 차세대 이미지 포맷입니다. 아직 지원하지 않는 브라우저가 많음에 주의해야합니다.

 

 

반응형 이미지 

1. width: 100%
2. max-width: 100%

반응형 background-image

img는 width: 100%에 맞게 늘어난다

 

background-image 속성

px	이미지의 크기 고정
auto	이미지의 종 횡비를 통해 자동으로 다른 축의 크기를 결정
%	%를 사용하면 컨테이너의 넓이에 비례하도록 사이즈를 조절
contain	컨테이너 전체를 덮지만 이미지를 자르지 않게 유지
cover	컨테이너 전체를 완전히 덮는다

 article {
            width: 100%;
            height: 100vh;
            background-image: url("pexels-andrés-garcía-5828628.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }
        /* 축약형
            background: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2l0eXxlbnwwfHwwfHw%3D&w=1000&q=80") center /cover no-repeat;
        */
    </style>css

 

그렇다면 contain과 cover의 차이는 뭘까?

 

위의 코드처럼 cover를 사용하면 여백 없이 배경에 딱 맞는다!

 

반응형 동영상

 

1. video

preload =“none”, “auto”; : 페이지를 로드할때 영상을 미리 로드할지 말지 결정합니다.

Poster : 비디오를 내려받을 동안 혹은 영상을 재생할때까지 표시할 이미지를 지정합니다.

Controls : 브라우저가 재생에 핋요한 컨트롤러를 제공할지 지정합니다.

Autoplay:  파일이 다운로드가 완료되면 자동으로 재생될지 지정하는 속성입니다.

Muted: 소리를 끕니다.

Loop : 비디오가 끝나고 반복적으로 재생할지 지정합니다.

 

 

2. iframe

iframe 태그 자체는 실무에서 많이 쓰이지 않지만 유튜브 영상을 사용하는 경우는 많다.