미디어쿼리
-
[생활코딩] 미디어쿼리Study/HTML & CSS 2019. 11. 27. 17:15
웹 개발자들은 모니터, 스마트폰과 같이 변화하고 발전하는 화면의 형태에 각각 최적화된 웹페이지를 만들고자 한다. 이에 사용되는 기술이 바로 미디어 쿼리이다. 반응형 디자인이란? 화면의 특성에 따라 웹페이지의 각 요소들이 반응해서 동작하도록 구현하는것을 의미하고, CSS에서 반응형 디자인을 구현할때 사용하는 것이 미디어쿼리이다. 미디어 쿼리는 태그 내에 @media( ) 코드를 통해 적용할 수 있다. 예로 화면크기가 800px 보다 작을 경우를 가정하려면 @media(max-width:800), 화면 크기가 800px 보다 클 경우를 가정하려면 @media(min-width:800) 과 같이 ( ) 안에 조건을 입력하는 방식이다. Responsive => 800px 보다 화면 사이즈가 작아지면 div 태그..