반응형을 위한 미디어(@media)쿼리 사용법
화면(Screen)의 표현식은 Width, height, color와 같은 미디어의 특성을 이용하여 복합적으로 스타일 시트를 적용할 수 있습니다.
미디어 쿼리는 화면의 크기에 따라 컨텐츠의 변경없이 적절한 모양을 보여줄 수 있습니다.
즉, 사용자마다 제각각인 환경에 대응하기 위해 반응형 웹을 구현하는데 사용
- 미디어 쿼리 두 가지 사용 방법 -
1. <link> 요소를 사용
<link rel="stylesheet" media="screen and (max-width: 768px)" href="style.css" />
max-width: 768px 즉, 화면의 너비가 768px 이하일 경우 style.css 파일을 불러옵니다.(유지보수에 용이)
2. CSS 안에서 @media를 사용
@media screen and (max-width: 768px) {
body{
background-color: #eee;
}
}
미디어 타입은 screen 또는 all을 사용하는 것이 일반적이며 생략할 경우 all이 디폴트 값으로 적용.
max-width / min-width가 일반적으로 사용.
규모가 큰 웹에 경우 화면별로 스타일시트를 만드는 편이 유지보수에 용이하며 이를 무시할 경우 스파게티 소스를 자주 볼 수 있습니다.