22-09-26-TIL

반응형

반응형 이미지

1. width : 100%
2. max-width: 100% -> 원본 이미지 크기 이상으로 커지지 않는다.

화면 조정시 max-width 보다 width가 크다면 max-width로 조정
max-width가 width보다 크다면 width 값으로 조정

반응형 백그라운드 이미지

background-size: 100%
background:url() center /cover no-repeat;

반응형 동영상

video 태그로 동영상 생성하면 반응형 동영상이 된다. (img 요소로 생성하는 만큼 쉬움 - width, max-width 사용)

youtube 동영상의 경우 -> article로 감싼 후 iframe 사용

영상의 높이를 아는 방법 
-> 영상의 종횡비를 가지고 계산해서 적절한 값을 넣어주자
-> padding-top: 50%;
padding-top, padding-bottom는 부모 요소 넓이에 비례

미디어쿼리 -반응형 웹

max-width:1000px
1000px 이하인 경우에 작동

@media screen and (max-width:1000px) {
	body {
    	background-color: green;
    }
}

유형

all - 모든 장치 대상
print - 인쇄물, 출력 미리보기 화면에 표시
screen - 스크린이 존재하는 디바이스

미디어 쿼리 조건

webkit-min-device-pixel-ratio,
webkit-max-device-pixel-ratio
-> 출력 장치 픽셀 비율

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

orientation 뷰포트 방향
(orientation:landscape)

논리연산자

and - 모두 만족하는 경우에 스타일 적용
not - 조건 반전하는 경우 적용
, - 조건중 하나라도 만족하는 경우
only - 미디어쿼리 지원하는 브라우저만 작동

계획

주말에 반응형 작업 해보기!!!