-
[생활코딩] 미디어쿼리Study/HTML & CSS 2019. 11. 27. 17:15반응형
웹 개발자들은 모니터, 스마트폰과 같이 변화하고 발전하는 화면의 형태에 각각 최적화된 웹페이지를 만들고자 한다.
이에 사용되는 기술이 바로 미디어 쿼리이다.
반응형 디자인이란?
화면의 특성에 따라 웹페이지의 각 요소들이 반응해서 동작하도록 구현하는것을 의미하고,
CSS에서 반응형 디자인을 구현할때 사용하는 것이 미디어쿼리이다.미디어 쿼리는 <style> 태그 내에 @media( ) 코드를 통해 적용할 수 있다.
예로 화면크기가 800px 보다 작을 경우를 가정하려면 @media(max-width:800),
화면 크기가 800px 보다 클 경우를 가정하려면 @media(min-width:800) 과 같이 ( ) 안에 조건을 입력하는 방식이다.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ border:10px solid green; font-size:60px; } @media(max-width:800px) { div{ display:none; } } </style> </head> <body> <div> Responsive </div> </body> </html>=> 800px 보다 화면 사이즈가 작아지면 div 태그에 해당하는 것이 화면에서 보이지 않는다.
반응형'Study > HTML & CSS' 카테고리의 다른 글
[생활코딩] CSS 코드의 재사용 (0) 2019.11.27 [생활코딩] CSS Grid (0) 2019.11.26 [생활코딩] CSS Box model (0) 2019.11.26 CSS 가상 class 선택자 & Transition 전환 속성 & Transform 속성 (0) 2019.11.24 [코드스테이츠 TIL] CSS LAYOUT : Display, Box model, Positioning, Float (0) 2019.11.23