[CSS] 생활코딩 미디어 쿼리 예제
opentutorials.org/module/3129/18323
반응형 디자인 - WEB2 - CSS
반응형 디자인과 미디어 쿼리 소개 강의 소스코드 변경사항 미디어 쿼리를 이용해서 반응형 디자인 구현하기 강의 소스코드 변경사항
opentutorials.org
반응형 디자인
화면의 크기에 따라서 웹 페이지의 요소들이 달라지는 것
적용사례 : 플로우 output이 창크기가 줄여질 때 작아지지 않는다는 이슈에 적용할 수 잇을듯
미디어 쿼리를 활용하면 특정 조건을 만족할 경우에만 css가 동작하도록 할 수 있다.
1. 미디어 쿼리를 사용해서 넓이가 800이 넘을 시 보이지 않도록 하는 경우
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<style>
div{
border : 10px solid green;
font-size : 60px;
}
@media(min-width: 800px){
div{
display : none;
}
}
</style>
<body>
<div>
Responsive
</div>
</body>
</head>
</html>
만약 넓이가 800보다 작을 경우에 특정 css를 적용 시키려면 ?
@media(max-width:800px){
#grid{
display: block;
}
ol{
border-right:none;
}
h1 {
border-bottom:none;
}
}
이런식으로 사용한다.