Deeb
디비의 DB
Deeb
전체 방문자
오늘
어제
  • 분류 전체보기 (243)
    • Frontend (63)
      • HTML & CSS (27)
      • JavaScript (17)
      • jQuery (8)
      • React (6)
    • Backend (98)
      • Java (19)
      • JDBC (2)
      • Servlet & JSP (13)
      • Spring (17)
      • Project (0)
      • 개발 공부 (11)
      • 문제 풀이 (8)
      • Algorithm (1)
      • DataBase (0)
      • Oracle (18)
      • Error (8)
    • Knou (1)
    • Review (14)
    • TIL (33)
    • 삽질기록 (8)
    • deebtionary (5)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 방송대
  • 추천
  • HTML
  • 클래스
  • 책
  • 서평단
  • For
  • Java
  • CLASS
  • 에러
  • 기초
  • 다형성
  • 배열
  • 함수
  • js
  • 방통대
  • 후기
  • 공부
  • 정의
  • alter
  • 리액트
  • 2학기
  • 자바
  • 한빛미디어
  • css
  • GIT
  • 정처기
  • DB
  • DBMS
  • 삭제

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Deeb

디비의 DB

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

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

2022. 4. 20. 23:01

이미지 포맷의 종류


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 태그 자체는 실무에서 많이 쓰이지 않지만 유튜브 영상을 사용하는 경우는 많다.

 

 

반응형
저작자표시 변경금지 (새창열림)

'TIL' 카테고리의 다른 글

TIL 24 :: JS란? 변수와 자료형을 알아보자  (0) 2022.04.28
TIL 19 :: em? rem?  (0) 2022.04.21
TIL 17 :: IR(Image Replacement) & Image Sprite  (0) 2022.04.19
TIL 16 :: css할 때 고려해야할 것  (0) 2022.04.18
TIL 14 :: [CSS] Flex  (0) 2022.04.14
    'TIL' 카테고리의 다른 글
    • TIL 24 :: JS란? 변수와 자료형을 알아보자
    • TIL 19 :: em? rem?
    • TIL 17 :: IR(Image Replacement) & Image Sprite
    • TIL 16 :: css할 때 고려해야할 것
    Deeb
    Deeb

    티스토리툴바