1. 반응형 대 적응형
– 반응형이란? 광고 유형에 따라 화면 크기가 자동으로 최적화됩니다.
해주는 웹사이트입니다
– 적응형이란? PC용 사이트와 모바일용 사이트를 별도로 제공하는 방식에 관한 것이다.
2. 반응형 웹을 위한 CSS 미디어 쿼리
– 미디어 쿼리란? 반응형 레이아웃을 구성하는 데 사용할 수 있는 CSS 구문입니다.
– 사용하는 방법
@media <미디어 유형> and (미디어 조건) {}(1) 미디어 유형: all(모든 미디어 장치), screen(화면을 출력하는 디스플레이가 있는 장치), print(화면 인쇄)
(2) 미디어 조건:
A.width: 뷰포트 너비 – 최소 너비/최대 너비
B.height: 뷰포트의 높이 – 최소 높이/ 최대 높이
C.정렬: 종횡비 – 풍경(넓은)/ 초상화(길이)
(3) 작동 예:
배경색, 디스플레이, 텍스트 정렬
+ CSS 변수란?
반복해서 사용하는 경우 여러 곳에 사용할 수 있도록 미리 지정
:root{
--main-color: #black;
}
.test {
color: var(--main-color);
}