[TIL] 반응형 컨텐츠와 이미지 포맷

반응형 컨텐츠 만들기

이미지 포맷

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% 수준으로 낮음
• 그러나 더 뛰어난 색상을 지원
• 투명도 표현 가능
• GIF 처럼 애니메이션 표현도 가능한 만능 포맷
• 다만 익스플로러 및 구버전 브라우저 미지원

AVIF (AV1 Image File Format) :

• WebP 처럼 뛰어난 색상표현
• 애니메이션 지원
• 투명도 표현 가능
• JPEG 이미지의 50% 수준인 용량
• 아직 지원하지 않는 브라우저가 많음

반응형 이미지 만들기

간단하게 만들 수 있음

img {
	width: 100%
	max-width: 100%
}

반응형 백그라운드 이미지

• contain을 혹은 cover , 너비 100% 상황에 맞게 주기

background: url("http://image-Path.com/img") center /cover no-repeat;

반응형 동영상

• 동영상은 크기를 변경할때 고정비를 지켜야한다
• padding-top, padding-bottom 속성의 % 값은 부모 요소의 너비에 비례

.cont-video {
    position: relative;
    padding-top: 56.25%;
		/* 많은 개발자들이 잘 모르는 CSS 매직을 알려드리겠습니다 :) */
		/* padding-top, padding-bottom 속성의 % 값은 부모 요소의 너비에 비례합니다. */
		/* 예를 들어 부모의 넚이가 1200px 이라면 padding-top=50% 의 값은 600px 과 같습니다. */
} 


.video-next-level {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

미디어쿼리 - 반응형 웹

• 미디어 쿼리는 특정 조건(단말기의 유형, 화면 해상도, 뷰포트 너비 등)에서 특정 스타일만 적용되도록 만들어주는 기능
• 보통 같은 UI라 하더라도 기기에 따라 3 ~ 4개의 UI 시안이 나옴
• 프로젝트별 상이하기 때문에 외우는 것이 큰 의미를 가지진 않음
• ex)
  1. 모바일(390)
  2. PC(1920, 1440)
  3. 타블릿(834)
  

미디어쿼리 유형

• all : 모든 장치를 대상으로 적용
• print : 인쇄 결과물 및 출력 미리보기 화면에 표시하는 경우
• screen : 모니터나 스크린이 있는 디바이스를 의미

주로 사용하는 미디어 쿼리 조건

• webkit-min-device-pixel-ratio,webkit-max-device-pixel-ratio
  출력 장치의 최소, 최대 픽셀 비율.
  css의 1px 안에 들어가는 디바이스의 스크린 픽셀의 숫자를 값, 레티나 디스플레이 처리 시 많이 사용

• min-width, max-width
  스크롤바를 포함한 뷰포트의 최소, 최대 넓이

• orientation
  뷰포트의 방향

논리연산자

• and : 조건을 모두 만족하는 경우에만 스타일을 적용
• not : 조건을 반전하는 경우 스타일을 적용
• 컴마( , ) : 조건중 하나라도 만족하는 경우 스타일을 적용
• only : 미디어쿼리를 지원 하는 브라우저에서만 작동하게 함
  (미디어 쿼리 css3 버젼은 IE9 부터 지원하지만 사실 미디어 쿼리 자체는 이미 IE6부터 지원, 하지만 이땐 아직 논리 연산자를 지원하지 않기 때문에 논리연산자를 무시하고 스타일을 반영하는 오류를 미연에 방지하고자 only 키워드가 탄생하게 됨)