CSS Responsive Design
- Responsive Design; 반응형 디자인
- 웹 페이지가 다양한 디바이스 및 화면 크기에 대응할 수 있도록 디자인하는 것. 이를 위해 ‘미디어 쿼리’를 사용한다.
미디어 쿼리(Meadia Query)
- 다양한 환경에서 사용자에게 최적화된 웹 페이지를 제공하는 데 사용되는 기술
- @media 태그
- 미디어 쿼리를 사용한다는 것을 나타내는 기호
min-width, max-width
- 미디어 쿼리를 적용할 뷰포트의 범위를 지정할 수 있다.
- min-width
@media screen and (min-width: 900px) { body {} }- 브라우저 크기가 900px 이상일때 적용된다는 의미
- max-width
@media screen and (max-width: 900px) { body {} }- 브라우저 크기가 900px 이하일때 적용된다는 의미
논리 연산
- 미디어 쿼리 연산에 논리 연산자를 사용할 수 있다.(and ..)
@media screen and (min-width: 600px) and (max-width: 900px) { body {} }- 브라우저 크기가 600px ~ 900px사이일 때 적용된다는 의미
