Study/HTML & CSS
[생활코딩] 미디어쿼리
xiubin
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 태그에 해당하는 것이 화면에서 보이지 않는다.
반응형